전체 글

[React] Redux를 사용해서 간편하게 모달(modal) 구현하기

개요 modal은 사용자의 이목을 집중시키기 위한 인터페이스 창이다. 문서 내의 상위에 배치되며 사용자의 이목을 집중시키기에 좋다. 모달의 on, off는 보통 bool타입의 state로 관리하는데, 전역 상태 관리에 사용하는 라이브러리인 redux를 사용해서 모달을 구현하면 코드도 줄고, 관리가 용이할 것 같다는 생각이 들어 구현하게 되었다. 사용 라이브러리 본 글은 Redux와 bootstrap modal을 사용한다. 설치 명령어는 다음과 같다. npm i @reduxjs/toolkit bootstrap react-redux 구현 먼저 Redux가 관리할 state의 초기값을 선언한다. redux.ts const initialState = { message : "", isOpen : false, } ..

[JS] 스코프에 대하여

개요 Scope 는 범위라는 뜻을 가진다. Javascript에서 scope는 변수에 접근할 수 있는 범위를 뜻한다. 주로 동적 스코프, 정적 스코프(렉시컬 스코프), 블록레벨 스코프의 3가지 스코프가 있다. 동적 스코프 동적 스코프는 함수를 호출한 위치에 따라 상위 스코프를 결정한다. 결론적으로 말하자면 자바스크립트는 동적 스코프를 사용하지 않는다. 자바스크립트에서 함수와 스코프를 참조할 때에는 어디에서 호출되었는가만 보기 때문이다. 예시 코드 const func1 = () => { console.log(a); } const func2 = () => { let a = 2; func1(); } let a = 1; func2(); 위의 코드에서 func2 함수를 호출하면 콘솔에는 1가 출력된다. 간단하게 ..

2023년 회고

정말 오랜만에 글을 작성하는 것 같다. 마지막 포스팅 시점으로부터 정말 많은 일을 했기에 글을 쓸 짬이 안났던 것 같다.. 라고 하기엔 그냥 나의 게으름인 것 같다. 결론부터 얘기하자면 작년 이맘때쯤의 나와 비교했을 때 정말 많은 성장이 있었던 한해였던 것 같다. Github 올해부터 본격적으로 깃허브를 시작했다. 6월부터 시작해서 6개월을 날린듯한 감이 있지만 이제는 깃허브 없으면 프로젝트 못할 것 같다는 생각이 들 정도로 깃 사용에 익숙해지려고 노력했다. 잔디를 보면 11월과 12월을 정말 바쁘게 보냈다는 것을 알 수 있는데, 이때 연구실 프로젝트와 대회 프로젝트까지 일정 내에 완료해야 했기 때문에 정말 노트북을 잡고 살았던 것 같다. Github stat은 B-로 마무리 될 것 같다. 무슨 기준으로..

[NP]TCP/IP(Transmission Control Protocol/Internet Protocol) 소켓 통신

개요 대부분의 네트워크는 클라이언트와 서버로 나눌 수 있다. 웹 클라이언트와 서버는 TCP 프로토콜을 이용하여 통신한다. 일반적으로 사용되는 분야는 실시간 통신, 메일, 컴퓨터 간 파일 전송, 원격 로그인이 있다. 기본적으로 알아야 할 용어와 개념은 다음과 같다. 소켓: 두 프로그램이 서로 데이터를 주고 받을 수 있는 양쪽에 생성되는 통신 단자 소켓 통신: 서버와 클라이언트 양방향 연결이 이루어지는 통신, 그림으로는 다음과 같다. 클라이언트는 서버에 request를 보내고 서버는 reply를 보낸다. 흐름 소켓 통신의 흐름은 다음과 같다. 1. 서버와 클라이언트가 있으면 서버부터 실행한다. 2. 클라이언트는 서버에 요청을 보낸다. 3. 서버는 이를 처리한 후 클라이언트에 답장을 보낸다. 4. 클라이언트는..

[Algorithm] 코드 블럭 단위 복잡도 분석

개요 코드 블럭은 C++일수도 있고, 수도코드, 의사코드 일수도 있다. 점근적으로 n이 커질 때, 점근적 런타임과 점근적 메모리 문제의 크기를 설명하는 변수, n이던 아니던 vertex의 개수던 edge의 개수던 이런 parameter를 표현하는 것이 첫번째 단계이다. 알고리즘의 asymptotic behavior은 이 알고리즘이 n이 커졌을 때, 문제의 크기가 커졌을 때 어떻게 행동하는지, 과연 이 알고리즘이 n이 아주 큰 상황에서도 잘 동작하는지에 대한 정보를 제공한다. 예를 들어 A는 세타오브 n square이고 B는 n log n일 때 n의 값이 2k일 때는 A의 경우 4k square B의 경우 2k log k + 2k 이다. 하지만 2k에서 10k로 5배 증가시킨다면 A의 요구시간은 5 * 5..

[React] 컴포넌트의 생명주기(Lifecycle)

생명주기란? 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(Lifecycle)라고 한다. 컴포넌트는 생명주기마다 함수를 가지고 있고, 이 함수들을 이용하면 주기의 특정 시점에 원하는 동작을 하도록 만들 수 있다. 컴포넌트의 생명주기 컴포넌트의 생명주기 함수는 총 8종이 있다. 생명주기 함수는 리액트에서 자동으로 호출하며 개발자가 마음대로 호출할 수 없다. 생명주기를 그림으로 나타내면 다음과 같다. 컴포넌트는 생성부터 소멸까지 컴포넌트 생성 → 생성 완료 → 갱신 완료 → 소멸 완료의 4가지 단계를 거친다. 과정은 컴포넌트 생성 → 생성 완료(생성 과정), 생성 완료 → 갱신 완료(갱신 과정), 갱신 완료 → 소멸 완료(소멸 과정)의 3가지 과정을 거친다. 먼저 생명주기 함수가 무엇이 있는지 알..

[Algorithm] BFS,DFS 알고리즘 구현(C++)

본 글에서는 IDE로 DEV C++을 사용하였다. 그래프 만들기 보통 그래프를 입력받을 때에는 파일로 받는 경우가 많다. 본 글에서는 txt파일을 사용하였다. graph_1이라는 txt파일을 만들었다. 맨 위의 13은 vertex의 개수이고 12는 edge의 개수이다. 밑의 영어들은 트리 구조의 그래프이다. 해당 파일은 프로젝트 내부에 위치해야 한다. 구현 먼저 코드 블럭 단위로 리뷰를 할 것이다. 리뷰 순서는 앞선 글에서의 실행 순서와 같다. 2023.01.29 - [CS/알고리즘(Algorithm)] - [Algorithm] 그래프 탐색 알고리즘(BFS, DFS) 기본 [Algorithm] 그래프 탐색 알고리즘(BFS, DFS) 기본 개요 반드시 알고 있어야 하는 알고리즘 중 하나인 그래프 탐색 알고..

[Algorithm] 그래프 탐색 알고리즘(BFS, DFS) 기본

개요 반드시 알고 있어야 하는 알고리즘 중 하나인 그래프 탐색 알고리즘이다. 너비 우선 탐색(BFS), 깊이 우선 탐색(DFS)이 있다. 그래프가 Connect 상태인지, Unconnect 상태인지 확인하기 위해 사용한다. 선행 지식으로 큐, 스택, 트리, 그래프 자료구조의 이해가 필요하다. 2022.12.30 - [CS/자료구조(data structure)] - [자료구조] 큐(Queue)란? [자료구조] 큐(Queue)란? 개요 큐(Queue)는 선입선출(First-In Firut-Out) 방식의 선형 자료구조이다. 모양은 사람들이 줄을 서있는 모습을 생각하면 이해가 편하다. 구조 큐는 위의 모양과 같은 구조를 가진다. enqueue : 아이템을 mk-develop.tistory.com 2022.12..