[React] 2. 리액트의 작업 환경 설정(masOS)

리액트의 작업 환경 설정

---

리액트 공부를 시작하기에 앞서 첫 React Project 를 만들 것입니다.

 

2.1 Node.js 와 npm

리액트 프로젝트를 만들 때에는 Node.js 가 필수요건입니다. Node.js 는 크롬 V8 JavaScript 엔진으로 빌드한 JavaScript RunTime 입니다.

이것으로 웹 브라우저 환경이 아닌 곳에서도 JavaScript 를 사용하여 연산할 수 있습니다. 

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

 

2.1.1 Node.js 와 npm 설치 : macOS

제 작업환경은 MacOS 이므로 터미널을 열고 명령어를 입력하겠습니다.

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

 

이후, 터미널을 재시작 합니다.

$ nvm --version

위 명령어를 입력하여 nvm 설치여부를 확인합니다. 

 

터미널을 재시작해도 버전이 나타나지 않는다면?? (제가 나타나지 않았습니다..)

vim 명령어를 입력하여 스크립트를 추가해야 합니다.

$ vim ~/.bash_profile

위 명령어를 입력합니다.

 

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

해당 스크립트를 추가한 후 :wq 를 입력(저장 후 종료)합니다.

위 작업이 끝나고 터미널을 재시작하여 버전을 다시 확인합니다.

 

nvm 을 성공적으로 설치하였다면 아래 명령어를 입력하여 Node.js LTS 버전을 설치합니다.

$ nvm install --lts

 

2.2. yarn

 

Node.js 를 설치할 때, 패키지를 관리해주는 npm 이라는 도구가 설치되는데, 

제가 공부할 때에는 npm 대신 yarn 이라는 패키지 관리자 도구를 설치하려고 합니다.

yarn 은 npm 을 대체하는 도구로서 npm 보다 더 빠르고 효율적인 캐시 시스템과 기타 부가 기능을 제공합니다. 

 

npm 과 yarn 의 성능 등 차이점을 비교하고 싶은 경우 아래 링크에서 더 좋은 정보를 얻을 수 있습니다.

https://www.holaxprogramming.com/2017/12/21/node-yarn-tutorials/

 

2.2.1 yarn 설치 : macOS

Homebrew 를 사용하여 yarn 을 설치할 예정입니다. 

Homebrew 가 설치되어 있지 않다면 아래 명령어를 입력하여 설치합니다.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

위 명령어는 https://brew.sh/index_ko 에 접속하여 ctrl+c ctrl+v 해도 무방합니다!

 

Press RETURN to continue or any other key to abort 와 같은 문구가 출력된다면,

enter 키를 누르고 password 를 입력합니다.

 

Homebrew 가 설치되었다면 아래 명령어를 순서대로 입력하여 yarn 를 설치합니다.

$ brew update
$ brew install yarn
$ yarn config set prefix ~/.yarn
$ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile

 

터미널을 재시작한 후, 아래 명령어를 입력하여 yarn 이 재설치되었는지 확인합니다.

$ yarn --v

 

 

2.3 에디터 설치

다음은 리액트 애플리케이션을 제작하면서 코드를 수정할 코드 에디터를 설치합니다.

이미 익숙한 에디터가 있다면 사용하던 걸 쓰시기 바랍니다.

리액트 프로젝트에서 자주 사용하는 에디터로는 Sublime Text, Bracket, VS Code, 아톰 등이 있으니 참고하세요.

저는 새로운 에디터를 설치해보도록 하겠습니다. 

 

2.3.1 VS Code 설치

https://code.visualstudio.com/download 에 접속하여 본인의 운영체제에 맞는 버전을 설치합니다.

 

 

2.3.2 VS Code 확장 프로그램 설치

VS Code 를 사용할 때 설치하면 유용한 확장 프로그램입니다.

 

- ESLint : JavaScript 문법 및 코드 스타일을 검사해주는 도구

 

- Reactjs Code Snippets(제작자 charalampos karypidis 꺼로 설치)

 

- Prettier-Code formatter : 코드 스타일을 자동으로 정리해주는 도구 

 

2.3.3 VS Code 언어 한국어로 설정하기

Korean Language Pack for Visual Studio Code 를 설치합니다. 

이후, VS Code 에서 F1 을 누르고 Configure Display Language 를 입력한 후 Enter 를 누릅니다.

VS Code 를 재시작하면 에디터 언어가 한국어로 설정됩니다. 

 

2.4 Git 설치 

 

형상관리 도구의 표본으로 프로젝트 버전 관리와 협업에서 가장 핵심적인 역할을 합니다. 

https://git-scm.com/download/mac 에 접속해서 설치파일을 내려받아 설치합니다.

 

 

2.4.1 create-react-app 으로 프로젝트 생성

create-react-app 은 리액트 프로젝트를 생성할 때 필요한 Webpack, Babel 의 설치 및 설정 과정을 생략하고,

간편하게 프로젝트 작업환경을 구축해주는 도구 입니다. 

 

참고) 웹팩과 바벨의 차이점 : https://devlog.jwgo.kr/2018/12/03/webpack-babel-react/

 

이 도구를 사용하는 방법은 터미널을 열고, 프로젝트를 만들고 싶은 디렉터리에서 아래 명령어를 실행합니다.

$ yarn create react-app hello-react

 

리액트 프로젝트를 생성할 때에는 yarn create react-app [프로젝트 이름] 명령어를 사용합니다.

프로젝트 생성이 완료되었다면 아래 명령어를 입력하여 프로젝트 디렉터리로 이동한 후, 리액트 개발 전용 서버를 구동합니다.

$ cd hello-react
$ yarn start # 또는 npm start

 

명령어를 입력하고 나면, 터미널에 아래와 같은 결과가 나타납니다.

 

 

그리고 브라우저에 자동으로 아래와 같은 리액트 페이지가 띄워집니다!!

혹시 자동으로 열리지 않는다면 http://localhost:3000/ 링크를 직접 입력하시기 바랍니다.

 

다음에는 본격적으로 리액트를 공부할 예정입니다.

감사합니다. : )

 

참고) 리액트를 다루는 기술-개정판