[2장]React프로젝트 생성

준비사항

1. Node.js 설치
   Node.js에 대해서 설명하려면 정리 할 내용이 한가득이다. 여기서 Node가 필요한 이유는 추후에 Webpack과 Babel을 사용하기 위해서 설치가 필요하다라고만 설명을 하고 넘어 간다.
2. Yarn 설치
   Node.js를 설치하게 되면 같이 설치 되는 것 중에 NPM이라는 패키지 관리자가 같이 설치 된다. 이것을 그대로 사용해도 무방하나, NPM보다 속도가 빠르다는 Yarn을 사용하기 위해 준비한다.
3. Visual Studio Code 설치(이하: VSCode) VSCode는 마이크로소프트가 개발한 소스 코드 편집기이다. 공짜고 가볍고 좋다.
   별도로 선호하는 에디터가 있다면 패스하자.

Node.js의 설치

현재 글을 쓰는 시점에서 Node.js의 버전은 12.16.1이며, 사용하고자 하는 버전에 맞게 해당 링크에서 설치를 한다. 노드 다운 링크 Mac, Linux의 경우 NVM(Node Version Manager)를 설치 해서 사용하면 버전 관리에 매우 용이하다. 사용법은 여기를 참조하자.

Yarn 설치

Yarn설치의 경우 Mac, Linux는 brew를 사용, Windows의 경우 Chocolatey, Scoop를 사용해서 설치 할 수 있지만 그냥 NPM을 이용해서 설치 해줘도 된다.

npm install -g yarn

위 명령을 통해 간단하게 설치 할 수 있다.

Visual Studio Code 설치

여기서 다운 받아 사용 할 수 있다.

create-react-app 설치

React 프로젝트 생성을 명령어 한번으로 처리 해주는게 있는데 그게 바로 create-react-app이다. 설치는 yarn 또는 npm을 통해 설치 할 수 있다.

# npm을 사용한 설치
npm install -g create-react-app
# yarn을 사용한 설치 
yarn global add -g create-react-app

Mac, Linux 환경에서 nvm을 사용해 Node를 설치 했다면, yarn global이 제대로 동작하기 위해서는 아래와 같은 커맨트 입력이 필요하다.

# macOS:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile
# Linux:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc

create-react-app 사용

터미널에 아래 명령어를 입력한다.

npx create-react-app hello-world

cd hello-world
yarn start

명령을 실행 시켰을 때, 정상적으로 처리 되었다면 아래와 같은 화면을 볼 수 있게 된다.