React 작업환경 설정

1. Node.js와 npm

리액트 프로젝트 만들때는 Node.js를 반드시 먼저 설치

Node.js
크롬 v8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임
웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산 가능

리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트 개발하는데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치

Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치됨.

→ npm으로 수많은 개발자가 만든 패키지 (재사용 가능한 코드)를 설치하고 설치한 패키지의 버전 관리 용이

macOS, Ubuntu

1. nvm을 이용해서 맥에 Node.js 설치

   nvm을 사용할 수 없는 환경이 아니라면 nvm을 사용하는 것을 추천

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

   터미널 재시작후

   nvm --version

   버전이 잘 나타나는지 확인

   버전이 나타나지 않는다면?

   vim ~/.bash_profile

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

   nvm 잘 설치 되었다면 다음 명령어

   nvm install --lts

2. Homebrew를 이용해서 설치**

   brew install node

3. 홈페이지를 이용해서 설치

   Node.js

   터미널 창에서 node -v 입력하여 버전 확인

Windows

[Node.js](https://nodejs.org/ko/)

여기서 Windows Installer 설치

설치가 끝나면 터미널 창 열고 `$ node -v` 입력하였을때 버전이 잘 나타나는지 확인

2. yarn

- macOS

homebrew 이용

• homebrew가 설치되어있지 않다면?

  `/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`

  brew update

  brew install yarn

  yarn config set prefix ~/.yarn

  echo ‘export PATH=”$(yarn global bin):$PATH”’ >> ~/.bash_profile

  마친후

  yarn --version버전이 잘 나오는지 확인

Windows

Yarn

Download Installer 버튼 눌러 설치 프로그램 내려받은 후 실행

Ubuntu

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 --no-install-recommends yarn

echo ‘export PATH=”$(yarn global bin):$PATH”’ >> ~/.bashrc

마친후

yarn --version버전이 잘 나오는지 확인

3. Git

- macOS

Git - Downloading Package

- Windows

Downloads

- Ubuntu

sudo apt-get install git-all

4. create-react-app

yarn create react-app hello-react

yarn create react-app <프로젝트 이름> 명령어 사용

이미 프로젝트 폴더를 생성한 경우

yarn create react-app

yarn을 사용하지 않는 경우 우리는 yarn을 사용할 예정이라 (참고용)

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

프로젝트 시작

yarn start # 또는 npm start

http://localhost:3000/