리액트 개발 환경 설치하기

 

Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다.

 

---

설치 순서

 

1. 노드 버전 매니저 (nvm) 로 노드제이에스 (node.js) 설치하기
2. yarn 과 create-react-app 설치
3. 비주얼 스튜디오 코드와 플러그인 설치

 

---

 

노드 버전 매니저 (nvm) 으로 node.js 설치하기

 

node.js

- 구글에서 공개한 소프트웨어
- V8 엔진을 기반으로 만든 자바스크립트 런타임 도구
> node.js 는 웹 브라우저가 아닌 컴퓨터 (또는 서버) 에서 자바스크립트를 실행할 수 있게 해줌
- npm 은 node.js 와 함께 설치가 된다

nvm

- node.js 를 설치하거나 버전을 관리해주는 프로그램

 

NVM 설치하기 (window)

window


1. 아래의 주소에서 nvm-setup.zip 을 내려받아 압축을 해제하고 설치 파일을 실행

https://github.com/coreybutler/nvm-windows/releases​

2. nvm 버전 확인하기
-  nvm 이 설치되면 명령 프롬프트를 열어 아래의 명령어를 입력하여 버전을 확인

nvm -v​

3. nvm 으로 node.js 설치하기
- 아래 명령어를 실행하여 node.js 설치

nvm install 8.10.0​

> 홈페이지에서 제공하는 최신버전이 아닌 8 버전을 설치하는 이유는 현업에서 가장 많이 사용하는 node.js 버전이 8버전임
> 많은 라이브러리들이 node.js 8 버전에 맞춰 개발되어 있으므로 최신 버전을 사용하면 호환성 문제가 발생
> node.js 8버전과 12버전은 서버와 관련된 백엔드의 성능 향상, 네트워크 향상 기능이 추가 된 점만 다르고 나머지는 거의 같음

4. nvm 이 설치한 node.js 사용 설정하기
- nvm으로 설치한 node.js 8.10.0 버전을 사용할 수 있도록 아래의 명령어를 입력하고, node.js 와 npm 의 버전을 확인

nvm use 8.10.0

node -v

npm -v

 

NVM 설치하기 (macOS)

macOS
(다른 블로그 참고해서 따라한 것임 저도 macOS 사용자입니다, 책에서는 window 기준으로 설명)
zsh 사용기준

1. brew 설치하기
- 아래의 주소에서 따라서 설치

https://somjang.tistory.com/entry/Mac-OSX-Brew-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

2. brew 를 활용하여 nvm 설치

brew install nvm

3. 아래의 명령어를 입력해 디렉토리를 생성한다

mkdir ~/.nvm

4. 환경 변수를 설정

vi ~/.zshrc

> 입력하면 여러 텍스트가 나올텐데, 거기서 아래와 같은 코드를 찾아준다

export PATH="/usr/local/sbin:$PATH"
~
~
~
~
~
~

> i키를 눌러 편집 상태로 만들어주고, 기존 내용의 다음 줄에 아래의 코드를 붙여 넣어준다.

export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

> esc를 눌러 편집 상태에서 나와주고, 마지막 줄에 :wq 를 입력 후 엔터를 눌러준다.

5. 아래와 같은 명령어를 입력하여 변경된 내용을 적용시켜준다.

source ~/.zshrc

6. 터미널을 종료하고 다시 시작한 다음, 아래의 명령어를 입력해 버전을 확인

nvm --verison

 

---

 

yarn 과 create-react-app 설치하기

 

create-react-app

- 리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구
- create-react-app 이 없다면 리액트 프로젝트에 필요한 패키지를 일일이 찾아 package.json에 추가해야함
- npm 또는 yarn 을 이용해서 설치해야함.

 

yarn 설치하기

1. npm 을 사용해 yarn 을 설치한다
> 아래의 명령어를 터미널에 입력해 설치

npm install -g yarn​

 

create-react-app 설치하기

yarn global add create-react-app

 

리액트 앱 생성하기

1. do-it-example 이라는 이름으로 리액트 앱을 생성한다

create-react-app do-it-example​

 

리액트 앱 구동하기

cd do-it-example // 만든 리액트 폴더로 이동
yarn start

 

---

 

예제에 필요한 라이브러리 설치방법은 작성하지 않겠습니다.

 

---

 

비쥬얼 스튜디오 코드 플러그인 설치

 

Reactjs code snippets 

- 리액트에서 자주 사용하는 코드 뭉치를 자동으로 완성해주는 플러그인

1. Extensions 에서 reactjs code snippets 를 검색한 다음 install 클릭해서 플러그인 설치
2. 플러그인이 설치되면 [Reload] 를 눌러 비주얼 스튜디오 코드를 다시 실행

 

Prettier

- 코드의 줄바꿈 등의 스타일을 자동으로 변환해주는 Prettier-Code-formatter 
- 프로젝트의 코드 입력 스타일을 동일하게 유지시키므로 현업에서 자주 사용함

1. Extensions 에서 "Prettier" 검색 후 install 을 클릭해서 플러그인 설치
2. 플러그인이 설치되면 [Reload] 를 눌러 비주얼 스튜디오 코드를 다시 실행
3. 프로젝트 폴더에 Prettier 설정 파일 (.prettierrc) 을 생성함 ( 파일 이름 앞에 반드시 점(.) 을 포함해야함 )
4. 아래의 코드를 설정파일에 입력

{
  "useTabs": false,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "all",
  "semi": true,
  "singleQuote": true
}​

5. 자동으로 prettier 설정 적용하기
- Preferences > Settings 의 검색창에 formatOnSave 검색
- 체크 박스를 클릭해줌