React 개발 환경 준비하기

지난번엔 React에 대해 알아보았으니 이번엔 React 설치하는 방법과 개발 환경 준비를 해보자

 

React는 앞서 이야기 한것처럼 자바스크립트 라이브러리이기 때문에 자바스크립트 패키지 관리 도구를 통해 다운받아야한다. 자바스크립트 패키지 관리 도구에는 크게 3가지가 있는데 npm과 yarn 그리고 pnpm이 대표적이다.

 

 

1. 자바스크립트 패키지 관리 도구(Javascript Package Manager)

 

자바스크립트 패키지 매니저라고도 불리며 개발에 필요한 패키지 설치, 수정, 삭제, 업데이트를 쉽고 편리하게 도와주는 도구다. 대표적으로 npm, yarn이 있고 국내에는 잘 알려져있지 않지만 pnpm도 존재한다.

 

1) npm

npm은 Node.js의 기본 패키지 관리 도구로 가장 많이 사용하고 있으며 가장 많이 사용하는 만큼 가장 많은 패키지가 등록되어있다. 단 패키지 설치 시 패키지들을 별도로 설치하여 의존성 중복이 발생할 수 있으며, 트리가 깊을수록 설치 속도가 느리고, 용량을 많이 차지한다.

 

2) yarn

yarn은 Meta에서 개발한 패키지 관리 도구로 npm의 단점을 보완, 여러 패키지를 병렬로 설치해 빠른 속도를 보장한다.

yarn.lock파일을 사용하여 모든 디바이스에서 같은 패키지를 설치하는 것을 보장해 버전음 잠글 수 있어 버전 차이로 인한 버그를 방지할 수 있다.

 

3) pnpm

pnpm은 npm의 단점을 개선한 패키지 관리 도구로 프로젝트별로 node_modules에 매번 패키지를 설치했던 npm과는 달리 global 저장소에 패키지를 한 번만 저장하여 용량 관리에 큰 장점을 보이며, 단 패키지를 한 번만 설치하기 때문에 프로젝트 별 호환 문제가 발생할 수 있다.

 

 

2. node.js

앞서 이야기한 자바스크립트 패키지 관리 도구를 사용하기 위해선 node.js를 설치해야한다.

 

node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임으로 쉽게 이야기하면 브라우저가 아닌 로컬 환경에서도 JavaScript를 사용가능하게 해준다. node.js의 가장 큰 특징으로 매우 뛰어난 I/O 성능, 서버 확장, JavaScript를 사용한 백엔드 작성으로 프론트에서 백까지 동일한 언어로 작성 가능하다는 점이다.

 

1) node.js 설치

 

그럼 node.js 를 설치해보자.

node.js는 공식홈페이지에서 다운받을 수 있으며 메인에서 LTS(Long Term Support)최신 버전으로 다운 가능하니 받아주도록 한다.

 

다운 받고 .msi 파일을 실행 시켜보자.

 

Next

 

동의 누르고 Next

 

설치 경로 지정 후 쭉 Next를 클릭 해 install 시켜준다.

 

2) node.js 설치 확인 및 npm 설치 확인

 

node.js 설치가 끝났으면 React 프로젝트를 생성할 폴더를 만들어주고

 

주소창에 cmd를 입력해 해당 폴더경로의 cmd창을 열어 node -v, npm -v 명령어를 입력해 node.js와 npm의 버전을 확인해준다.

 

이어서 npm install -g yarn 명령어를 사용해 yarn을 설치해 주고 yarn -v 명령어로 yarn의 버전을 확인해준다.

 

yarn까지 설치가 완료되었으면 npm install -g create-react-app 명령어로 create-react-app을 설치해준다.

 

그 뒤 create-react-app 뒤에 원하는 프로젝트명을 입력 후 enter를 누르면 해당 프로젝트 명으로 react 프로젝트가 생성된것을 확인할 수 있다.

 

설치가 완료된 모습

 

설치된 폴더에 들어가 package.json과 node_modules등의 파일과 폴더가 생성된 것을 확인

 

다음 yarn start 혹은 npm start 명령어를 입력하면

 

React 서버가 정상적으로 실행되는것을 확인할 수 있다.

 

다음 vs code를 이용해 react를 설치한 폴더를 열어주고 src폴더의 index.js파일을 열어 <React.StrictMode>를 주석처리 해준다.

 

여기서 <React.StrictMode>는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로 크게

 

1. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견

2. 권장되지 않는 findDOMNode 사용에 대한 경고

3. 예상치 못한 부작용 검사

 

를 위해 사용되며 프로덕션 배포시에는 StrictMode는 무시되기 때문에 삭제하지 않아도 된다.

하지만 React.StrictMode의 동작방식이 컴포넌트를 unmount 시켰다가 다시 한 번 remount 시켜 두개의 결과값을 비교하는 방식을 사용하기때문에 특정 함수가 여러 번 실행되는 원인이 되어 이번에는 사용하지 않도록 하겠다.