[React] 작업환경 설정 (macOS)

1) Node.js 와 npm

리액트 프로젝트를 만들 때 Node.js가 반드시 필요합니다.

 

Node.js는 크롬 v8자바 스크립트 엔진으로 빌드한 자바 스크립트 런타임입니다.

 

node.js 를 설치하면 node js패키지 매니저 도구인 Npm이 설치됩니다.

 

 

macOS에서는 Node.js를 여러 버전으로 설치하여 관리해 주는 nvm 도구를 권장합니다.

 

 

1.1)설치 : macOS

 

터미널을 열고 다음 명령어를 입력하시면 됩니다.

 

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

 

그 다음 터미널을 재시작하고

 

 

$ nvm --version 

0.33.11

 

만약에 버전이 나타나지 않는다면 vim 명령어를 통해서 ~/.bash_profile에 다음 스크립트를 추가해야 합니다.

 

$ vim ~/.bash_profile

 

nvm이 잘 설치가 되었다면 

 

$ nvm install --lts

 

위의 명령어를 통해 Node.js LTS버전 설치해주시면 됩니다.

 

 

2) yarn & npm

Node.js를 설치할 때 패키지를 관리해주는 npm 도구가 설치가 되고 npm 그리고 yarn이라는 도구가 있습니다.

 

우선 yarn설치 방법에 대해 설명 드리겠습니다.

 

https://brew.sh

 

Homebrew

 

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

 

터미널에 입력하면 되겠습니다.

 

Homebrew가 설치가 되었으면 다음 명령어를 통해 yarn을 설치하시면 되겠습니다.

 

$ brew update

$ brew install yarn

$ yarn config set prefix ~/.yarn

$ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile

 

설치 확인은

 

$ yarn --version

1.12.3 

 

명령어를 통해 확인해보시면 되겠습니다.

 

npm 설치 확인

앞서 언급한것 처럼 Node.js설치가 완료되면 패키지로 npm이 설치 되기 때문에 

잘 설치 되었는지 확인절차만 하면 되겠습니다.

 

$ npm -version 또는 $ npm -v

 

 

3) 에디터 설치

리액트 프로젝트를 진행하면서 자주 사용하는 에디터로는

 

a. 서브라임 텍스트

b. 브래킷

c. VS Code

d. 아톰 등이 있습니다.

 

그 중에서도 보편화되어 있는 VS Code 설치 방법과 VS Code의 확장프로그램에 대해 몇가지 추천을 드려 볼까합니다.

 

1. VS Code

 

https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

 

사용하고 있는 운영체제에 맞는 것을 설치하시면 되겠습니다. 

 

2. VS Code 확장 프로그램 설치

 

확장 프로그램 설치의 경우 VS Code 실행 후에 왼쪽 제일 아래에 

젤 아래 모양을 클릭한 후 조회를 하시면 되겠습니다.

 

1. ESLint : 자바 스크립트 문법 코드 스타일 검사 해주는 도구입니다.

 

ESLint 검색 화면

 

 

2.  Reactjs Code Snippets: 리액트 컴포넌트 및 라이프 사이클 함수 작성시 단축 단어 사용을 통해 간편하게 코드 작성 가능하게 해줍니다.

 

Reactjs Code Snippets 검색 화면

 

3. Prettier-Code formatter: 코드 스타일 자동 정렬

 

Prettier-Code formatter 검색 화면

 

4. VS Code 한국어 패치

 

VS Code 한국어 패치 검색 화면

 

그 다음 VS Code에서 f1키를 누른후 "Configure Display Language"를 입력하고 나서 Enter를 누릅니다

 

그러면 "locale.json"이라는 파일이 열리고 locale값을 ko 설정한뒤 VS Code 재시작하면 한글로 패치가 되어질 것입니다.