[React] 리액트 작업환경 준비 - node.js, yarn, webpack, babel

https://react.vlpt.us/basic/02-prepare.html

2. 작업환경 준비 · GitBook

 

다음과 같은 항목들을 설치한다.

1. Node.js

• Webpack과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어져있다.
• 때문에 해당 도구들을 사용하려면 Node.js를 설치한다.

2. Yarn

• 조금 개선된 버전의 npm이라고 생각하면 된다.
• npm은 Node.js를 설치할 때 같이 오는 패키지 매니저 도구이다.
  • 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리의 버전 관리를 하게 될 때 사용
• yarn을 사용하는 이유는?
  • 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위함

3. 코드 에디터

• 나는 VS code

 

Webpack, Babel의 용도는 무엇?

리액트 프로젝트를 만들면서, 컴포넌트를 여러가지 파일로 분리해서 저장할 것이다.
이 컴포넌트는 일반 자바스크립트가 아닌 JSX라는 문법으로 작성하게 된다.
여러가지 파일을 한 개로 결합하기 위해서 Webpack이라는 도구를 사용하고,
JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해 Babel이라는 도구를 사용한다.

 

Node.js

macOS라서 nvm 도구를 이용해 Node.js 설치했다.

 

https://github.com/nvm-sh/nvm

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

 

README 파일 보고 설치했다.

 

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

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

nvm install --lts

 

Yarn

https://classic.yarnpkg.com/en/docs/install#mac-stable

Yarn

 

npm install --global yarn

 

React 새 프로젝트 생성

"begin-react" 디렉터리 안에 리액트 프로젝트 생성

npx create-react-app begin-react

 

생성이 끝나면 해당 디렉터리에 들어가 yarn start 명령어를 입력해본다.

cd begin-react
yarn start

 

 

종료는 ctrl + C