본문 바로가기

전체 글

 (291)
[React] useContext Hook & createContext React 내의 대부분의 상태 관리는 useState, useEffect, useRef 정도의 hook으로 처리 가능하다. 그러나 개발중인 서비스의 규모가 커지면 커질수록 데이터의 이동이 많아짐에 따라 Callback이나 Argument의 형태로 컴포넌트 사이의 데이터를 주고 받는 방식은 한계에 봉착한다. 위 그림은 리액트 컴포넌트간의 데이터 전송 방식을 나타낸 것이다. 녹색 화살표는 실인자로 데이터를 넘기는 방식을 나타내고, 주황색은 콜백을 이용하여 하위 컴포넌트의 데이터를 상위 컴포넌트로 전송하는 방식을 의미한다. 유저가 특정 컴포넌트에서 로그인하고, 해당 정보를 프로젝트 전반에 걸쳐 사용하는 경우를 생각해보자. 만약 유저의 정보를 유지하는 컴포넌트가 Component 4이고, 해당 정보를 이용하는 ..
[React] create-react-app이 작동하지 않을 때 : We no longer support global installation of Create React App / You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 다음 명령을 이용하여 리액트 프로젝트를 만들려고 했으나, 실패했다. npx create-react-app login-app --template typescript 위 코드는 npx의 create-react-app을 이용하여 타입스크립트에 대응하는 리액트 프로젝트를 만들겠다는 명령이다. 분명 어제까지만 해도 해당 명령이 잘 동작했으나, 이상하게도 오늘은 동작하지 않는다. 해당 명령을 입력했을 때 나타나는 설명 창이다. 최신 버전이 5.0.0인데, 4.0.3을 사용하고 있거나, create-react-app이 전역적으로 설치되어 있어 실행되지 않는 모양이다. 후자에 대해 내가 찾아본 방법은 다음과 같다. npm에 전역적으로 설치된 create-react-app을 제거한다. npm의 캐시를 제거한다. crea..
[docker] 도커에 대한 설명 상황에 따라 다양한 환경에서 동일한 작업을 수행해야 하는 경우가 있다. 이때 이 환경이라는 녀석이 참 골치 아픈데, 서로 다른 환경은 보통 서로 다른 동작 방식을 가지고 있는 경우가 많기 때문이다. 예를 들어, 동일한 프로그램을 설치할 때, Window 운영체제에 대해 설치하는 방식과 linux 운영체제에서 설치하는 방식은 큰 차이가 존재한다. linux의 경우 대부분의 파일을 apt 등의 패키지 매니저를 통해 설치할 수 있으나, Window 계열에서는 보통 해당 웹사이트를 방문하여 대응되는 프로그램을 설치하게 된다. 설치 과정 말고도, Window 및 Linux에서 지원하는 System call의 종류, OS 자체의 작동 방식 및 구현 등의 차이에 의해서도 동일한 소스 파일을 가져다 놓아도 다른 결과를..
[React] useReducer Hook https://ko.reactjs.org/docs/hooks-reference.html#usereducer useReducer hook은 useState와 같이 상태를 관리하기 위해 사용될 수 있는 hook이다. useState에 비해 다양한 값을 동시에 처리하거나, 다양한 action을 정의해 둘 수 있다는 장점이 존재한다. useReducer 의 사용은 다음과 같은 상황에서 고려할 수 있다. 연관성이 높은 변수들을 함께 처리하고 싶은 경우 특정 state가 자신의 이전 값 기반이 아니라, 별개의 다른 state들의 값 기반으로 업데이트 되는 경우 업데이트 하는데 있어서 다양한 로직이 존재하는 경우 해당 hook은 다음과 같은 방식으로 사용할 수 있다. const [state, dispatch] = u..
[React] useEffect Hook 특정 프로그램을 만드는 경우를 생각해보자. 리액트에 의해 관리되는 State을 이용하여 표현할 수 있는 부분도 존재하지만, 특정 데이터를 가져오거나 동작을 구독 방식으로 ( 특정 이벤트에 반응하여 작업 수행 ) 구현하는 경우 등의 업무는 State 관리만으로는 처리가 불가능하거나 매우 어렵다. 이렇듯 리액트는 컴포넌트의 렌더링과 관계없는 영역인 Side Effect 까지 State로 관리할 수는 없는데, 이런 부분을 관리하기 위해서 등장한 hook이 useEffect이다. useState은 set~ 함수를 이용하여 State을 변화시키고, 화면의 re-rendering 을 야기한다. 비슷하게 useEffect는 State의 변화에 따라 특정 함수의 실행을 야기한다. 이때, 해당 함수는 다음과 같은 구조를..
[React] useRef Hook 리액트는 기본적으로 리액트 내부에서 관리하는 virtual DOM을 갱신하고, 갱신된 내용을 웹사이트, 앱 등 다양한 실제 DOM에 대응시키는 방식으로 동작한다. 그러나, 특정 상황에서는 실제 DOM에 접근하고 싶을 수 있다. 리액트에서는 실제 웹 환경에 존재하는 엘리먼트에 대해 직접적으로 접근할 수 있도록 useRef hook을 제공한다. const ref = useRef(); // ref의 선언 ... return (); // ref와 실제 input 엘리먼트를 ref를 통해 연결 사용법은 극히 간단하다. useRef 을 이용하여 ref 객체를 선언 위에서 생성된 ref 객체를 연결하기를 원하는 태그의 ref 프로퍼티로 전달 위와 같은 방법을 통해 생성된 객체는 실제 DOM 상의 엘리먼트를 가리키게 ..
[WSL2] WSL2에서 vscode가 작동하지 않을 때 WSL2 환경에서는 apt를 통해 vscode을 설치할 수 없다. 해당 환경에서 사용하는 vscode는 리눅스 상에 설치된 것이 아니라, 윈도우 환경에서 사용하고 있는 것을 remote-wsl 확장을 통해 리눅스와 연결한다는 개념이다. 아무튼 vscode는 WSL2 에서 다음 명령을 통해 작동시킬 수 있다. code . # 현재 폴더에서 열기 code apple.rs # apple.rs 파일 열기 그런데, 가끔 code 자체를 인식하지 못하는 경우가 있다. 분명 이전에는 인식했는데도 인식을 갑자기 못한다. 보통 컴퓨터가 갑자기 말을 안듣는 경우, 컴퓨터를 껐다가 켜면 다시 작동하는 경우가 있다. WSL2 역시 명령 프롬프트를 이용하여 껐다가 켜면 작동한다. #명령 프롬프트에서 wsl --shutdown ..
[Linux] WSL2 alias 저장 alias는 명령에 대한 별칭을 저장하는 기능이다. 이때, WSL2에서는 alias 명령으로 별칭을 지정해도 껐다 키면 개인적으로 지정한 alias가 모두 증발하는 일이 있었다. 즉, 해당 별칭은 WSL2가 작동할때만 저장되는 일종의 로컬 변수처럼 작동하고 있는 것이다. 이는 자신이 사용하는 유저의 /home/user-name 경로의 .bashrc에 별칭을 직접 등록하면 해결된다. 예를 들어보자. 나의 WSL2 환경에서는 프로그램 실행시 기본적으로 로컬 드라이브의 C:\Windows\System32 경로를 가리킨다. 따라서 해당 계정을 리눅스 환경에서 이용하기 위해 항상 /home/blaxsior 경로를 찾아야 한다. 이런 이유로 다음과 같은 alias를 지정한다고 해보자. alias cdh='cd /h..

티스토리툴바