[React] 리액트 작업 환경 설정하기

리액트 작업환경 설정하기

• 준비물 : node.js, VSCode 등

Node.js 설치하기

• Node.js 를 LTS 버전으로 설치한다.
• 윈도우의 경우 노드 공식 홈페이지 다운로드 페이지에서 설치한다. (https://nodejs.org/kr/)
• macOS, Linux 의 경우 nvm을 통해서 설치한다. nvm은 여러 종류의 node.js 버전을 설치할 수 있게 해주는 버전이다. 나중에 새 버전이 나왔을 때 업데이트 하기도 쉽고, 터미널을 통해 어떤 버전을 사용할지 설정할 수 있어서 편리하다.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
nvm install --lts

npm 대신 ... yarn

• Node.js를 설치하면 node 모듈 관리자인 npm이 설치된다.

• 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리의 버전 관리를 할 때 npm을 사용한다.

• yarn은 조금 더 개선된 버전의 npm이라고 생각하면 된다.

• 윈도우의 경우는 여기서 설치한다. (https://yarnpkg.com/en/docs/install#windows-stable)

• mac의 경우 Homebrew를 이용하여 설치

  brew install yarn
  brew install yarn --without-node

• 우분투/리눅스의 경우

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

에디터

• VSCode

• 다운로드 : https://code.visualstudio.com/download
• 운영체제에 맞게 설치하면 된다.

Git Bash

• 윈도우의 경우 Git Bash 설치도 권장한다. 일반 cmd를 사용하는 것보다 git bash가 편리하다.

여기서 도구들이 잘 설치되었는지 확인하기

• node 설치 확인 node -v
• yarn 설치 확인 yarn -v
• 작업 환경 설정시 Create-react-app 이라는 도구를 사용하자. 이전에는 package.json 파일을 작성해서 webpack이나 babel 등을 설정해주어야만 했는데 create-react-app 을 사용하면 프로젝트 설정을 간단하게 마칠 수 있다.

리액트 작업 환경 설정

• 작업 공간(디렉토리)를 새로 만든다. mkdir react-tutorials
• 해당 디렉토리 안으로 이동한다. cd react-tutorials
• react 프로젝트 생성 npx create-react-app 프로젝트이름
• 프로젝트 이동 cd 프로젝트이름
• yarn 실행 yarn start 혹은 npm start
• 브라우저가 실행되며 리액트 프로젝트 초기 화면이 실행됨
• vscode에서 방금 만든 디렉토리의 프로젝트를 연다.

프로젝트 파일의 설정들을 커스터마이징해야하는 경우

• 터미널에서 ctrl + c를 눌러서 서버를 종료하고 yarn eject 를 입력
• 설정 파일들을 꺼낼거냐고 묻는 알림이 뜬다. 'y'를 입력한다.
• config 폴더가 생기고 package.json 에도 설정된 라이브러리들이 보여진다.
• yarn start를 입력한다.