[누구든지 하는 리액트] 5. 리액트 작업환경 직접 설정하기

필요한 도구 설치하기

node.js

• node.js를 직접적으로 사용하지는 않지만 react 프로젝트를 작성하는 과정에서 필요한 도구인 webpack, babel을 사용하기 위해 필요하다.
• LTS버전을 설치하자.
• mvn을 이용해서 설치하면 편리하다.

yarn

• node.js를 설치하면 node 모듈 관리자인 npm이 설치된다. 프로그램에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전 관리를 할 때 사용한다.
• npm 대신 yarn 사용을 추천한다. (조금 더 개선 된 버전)
• 더 나은 속도, 더 나은 캐싱시스템을 사용할 수 있다.
  - 한국에서는 속도적인 면에 큰 차이는 없다.
• 설치 방법
  - window
  - 공식 사이트에서 설치프로그램 다운받아서 실행.
  - mac
  - homebrew를 이용해서 설치.
  - 이미 node.js가 설치되어있을 경우
  - $ brew install yarn --without-node

VSCode

• 공식 사이트에서 설치

Git Bash

• 윈도우일 경우에 설치가 필요.
• 특정 디렉토리로 접속, 폴더 생성 등의 여러 용도로 사용하게 된다.

Create react app 사용하기

node, yarn 버전 확인

$ node -v

• node의 버전 확인

$ yarn -v

• yarn의 버전 확인

Create React App

리액트 프로젝트 생성 시 관련 라이브러리 설치 등의 작업을 간소화 시켜준 라이브러리이다. 페이스북에서 만들었다.

npx create-react-app

• 리액트 프로젝트 생성 명령어

$ yarn start

• 개발 버전 작업화면을 띄우는 명령어

$ yarn build

• 실제로 배포하기 위한 명령어

$ yarn eject

정말로 설정파일을 꺼낼 것인지 묻는 질문이 뜬다. yes를 할 경우, package.json파일로 babel 등의 설정파일관련 내용들이 나타나게 된다.
한 번 실행하면 되돌릴 수 없기 때문에 꼭 필요한 경우가 아니라면 하지 말도록 하자.