React 개발 환경 세팅

Node.js는 웹 브라우저가 외에서 자바스크립트 코드를 실행할 수 있게 해주는 런타임 환경입니다.

ES6(ECMAScript6)를 호환시켜 주는 바벨, 번들링과 핫 리로드 기능을 제공해주는 웹팩 등이 Node.js 환경을 사용하기 때문에 Node.js의 설치가 필요합니다.

npm, yarn은 자바스크립트 패키지 버전 관리 툴입니다.

npm은 Node.js를 설치하면 함께 설치되고, yarn은 16년도에 페이스북에서 개발한 패키지 매니저로, 기존 npm의 여러 단점들을 보완시킨 도구입니다.

npm과 달리 추가적인 설치를 필요로 하지만, 캐싱과 여러 개의 패키지를 동시에 설치하는 등의 최적화를 통해 더 나은 설치 속도와 npm과 달리 부가적인 설정 없이도 .lock 파일을 통한 일관적인 버전 관리가 가능합니다.

1. nvm 설치

nvm은 Node.js Version Manager의 약자로, 한 대의 기기에 여러 버전의 Node.js를 설치하고 관리하기 위한 도구입니다.

추후 개발의 편의성을 위해, nvm을 통해 Node.js를 설치하겠습니다.

nvm github의 설치 가이드를 따라 진행하겠습니다.

우선, curl로 설치 파일을 내려 받고, 파이프라인을 통해 실행합니다.

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

설치가 잘 됐다면, 마지막 출력에 아래와 같은 문구가 보입니다.

$ Close and reopen your terminal to start using nvm or run the following to use it now:

$ export NVM_DIR="$HOME/.nvm"
$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
$ [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

설치 과정에서 터미널을 열 때마다 nvm이 자동으로 로드될 수 있도록 ~/.zshrc나 ~/.bash_profile 파일에 nvm을 로드하는 코드를 추가합니다.

이 때문에 이후에 새로운 터미널 세션을 시작할 때 마다, 약간의 지연이 생기는데, 이게 싫으신 분들은 ~/.zshrc(또는 ~/.bash_profile)에서 아래 3줄을 주석처리 또는 삭제하시면 됩니다.

# export NVM_DIR="$HOME/.nvm"
# [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
# [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

이후에 Node.js나 NVM이 필요할 때, 아래 명령어로 실행시켜주시면 됩니다.

$ source ~/.nvmrc

2. Node.js 및 yarn 설치

nvm이 로드되어 있는 상태에서, 아래 명령어를 통해 LTS 버전의 Node.js를 설치합니다.

$ nvm install --lts

아래 명령어를 통해 Node.js가 잘 설치되었는지 확인합니다.

$ node --version
v18.17.0 // 사람마다 다를 수 있습니다!

설치가 확인 됐다면, 함께 설치된 npm을 통해 yarn을 설치합니다.

$ npm install --global yarn

3. CRA로 리액트 앱 생성

CRA는 리액트 앱을 만들 때 필요한 바벨이나 웹팩 등의 설치 과정을 단순화 시킨 도구입니다.

프로젝트를 생성할 디렉토리에서 아래 명령어를 실행합니다.

$ yarn create react-app <프로젝트 이름>

npm을 사용한다면

$ npm init react-app <프로젝트 이름>

4. 개발 서버 실행

CRA를 통해 만들어진 프로젝트 디렉토리에서, 아래 명령어를 통해 개발 서버를 실행해볼 수 있습니다.

$ [yarn/npm] start