IT's Jenna

안녕하세요 오늘은 node.js로 개발할 때 필수적으로 사용하는 nvm에 대하여 알아보겠습니다. 1. NVM이란? 2. 설치방법 (MAC OS 기준) 3. nvmrc 파일 활용 1. NVM이란? NVM은 Node.js Version Manager의 약어로 노드 버전을 관리하는 프로그램입니다. 프로젝트를 진행하다보면 프로젝트마다 사용하는 노드 버전이 다른 경우가 많습니다. 또한 설치되는 패키지들 중에는 노드 버전에 영향을 받는 패키지들도 있기 때문에 해당 버전에 맞춰서 개발을 하는 것이 편리합니다. 이때 서버 노드 버전은 16.20.2인데 제 PC의 노드 버전은 18.18.0이라면 프로젝트에 따라서 노드를 삭제하고 재설치해야하는 번거로움이 있겠죠? 이럴 때 NVM이 설치되어 있으면 노드 버전을 간편하게 변..

리액트에서 상태 관리를 할 때 사용하는 방식은 state를 props로 넘겨주고 값을 공유하는 top-down 방식이다. 본 구조는 컴포넌트가 많아지고 구조가 복잡해질수록 관리가 어렵다는 단점이 있다. 특히 depth가 깊어질수록 초기 상태 및 상태 변화를 확인하기 위해서 타고 들어가야 하는 파일들이 많아지기 때문에 오류 핸들링이 굉장히 어렵다. 코드 복잡성의 증가는 개발자들의 협업에 많은 이슈를 발생시키고 효율적인 코드 관리도 어려운 critical한 문제이다. 이러한 지역적인 상태 관리에 한계점을 느끼고 개발된 것이 전역적인 상태 관리 방식이다. 전역적인 상태 관리란 상태를 별도의 공간에 모아 두고 모든 컴포넌트들이 해당 공간에서 상태를 받아오는 것이다. 아래 그림은 지역적인 상태 관리와 전역적인 상..

화면을 렌더링 하는 방식은 두 가지가 있다. 1. CSR (Client Side Rendering) : 서버로부터 전달받은 데이터를 Client 측에서 직접 렌더링 하는 방식 2. SSR (Server Side Rendering) : 서버에서 전달 받은 HTML을 렌더링 하는 방식 처음 화면을 렌더링 하는 방식은 모두 static sites 방식이었다. 즉, user가 도메인을 통해 접속하면 서버에서 전체 페이지를 HTML 파일로 전달하고 브라우저는 파일을 렌더링만 한다. 해당 방식이 SSR이다. 그러던 와중에 서버에서 Json 형태로 파일을 보내줬을 때 jQuery에서 HTML을 구성하고 Client 측에서 알아서 화면에 테이블을 렌더링 할 수 있게 된다. 이것을 바탕으로 개발자들은 일부 컴포넌트만 구..

서버를 만들기 위해 Back-end에서 사용하는 java script 개발환경이 node js이고 이러한 node js의 프레임워크가 express이다. 그에 비교하여 Front-end에서 웹앱을 만들기 위해 사용하는 java script 개발환경이 React이고 이 React의 프레임워크가 CRA와 Next.js이다. React는 원래 java script밖에 인식을 하지 못한다. 하지만 페이지를 구성하기 위해선 css 또는 font 등 추가적으로 인식되어야 하는 파일들이 있다. 이때 React가 해당 파일들을 인식할 수 있도록 하기 위해서 loader라는 모듈 등을 설치하고 그에 대한 설정을 해주는 과정이 필요하다. 이러한 설정의 모음인 React의 configuration library가 있는데 그..

리액트의 컴포넌트에는 클래스형과 함수형 두 가지가 있다. 과거에는 클래스형과 함수형의 구분이 명확했다. 클래스형은 state와 life-cycle 사용이 가능했고 함수형은 불가했기 때문에, 클래스형은 복잡한 주요 컴포넌트에 사용되었고 함수형은 비교적 단순한 하위 컴포넌트들에 사용되었다. 하지만 현재는 함수형에 hook이라는 기능이 출시되면서 함수형에서도 state와 life-cycle을 사용할 수 있게 되었다. 현재는 리액트 공식적으로 클래스형이 아닌 함수형을 사용하는 것을 권장하고 있다. 그렇다면 위에서 언급한 life-cyle이 무엇인지 알아보자. 라이프 사이클이란 컴포넌트가 생성 및 사용되고 소멸될 때까지의 일련의 과정을 의미한다. 클래스형의 라이프 사이클은 다음과 같다. 1. Mount : 컴포넌..

리액트란? 프론트엔드에서 웹앱 개발을 위해 사용하는 javascript 개발 환경 (페이스북에서 개발됨) 리액트를 사용하기 위해서 알아야 하는 개념이 3가지가 있다. 1. 컴포넌트 (Component) 컴포넌트는 props를 input으로 받고, UI가 어떻게 보여야 하는지 정의하는 리액트 Element (HTML 형식)를 return 하는 함수이다. 컴포넌트는 props와 state라는 2가지 속성을 가지고 있다. 2. Props props는 위에서 언급한 것 처럼 컴포넌트가 부모로부터 받는 input 이기 때문에 컴포넌트에 값이 할당될 뿐, 컴포넌트에서 자체적으로 값을 변경할 수 없다. 이때 props는 부모로부터 값을 받을 수만 있고 부모의 값이 변경되면 자식의 props도 변경되는 일방향적 구조이..