(3) 작업 환경 설정

* 이제 리액트를 본격적으로 공부해 보자. 이 절에서는 리액트 프로젝트를 생성하는 사전 준비 작업을 수행하고 나서 첫 리액트 프로젝트를 만들어 볼 것이다.

---

(1) Node.js와 npm

* 리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 한다. Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있다. 2009년 Node.js를 출시한 이후 자바스크립트는 웹 브라우저 영역 외에 웹 서버는 물론, 모바일 애플리케이션, 데스크톱 애플리케이션 영역에서도 엄청나게 활약할 수 있게 되었다.

* 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치하는 것이다. 이 때 사용하는 개발 도구에는 ECMAScript 6(2015년 공식적으로 업데이트한 자바스크립트 문법이며, 리액트를 공부하면서 주요 내용을 틈틈이 소개할 것이다)를 호환시켜 주는 바벨(babel), 모듈화된 코드를 한 파일로 합치고(번들링) 코드를 수정할 때마다 웹 브라우저를 리로딩하는 등의 여러 기능을 지닌 웹팩(webpack) 등이 있다. 후반부에는 Node.js를 사용하여 백엔드 서버를 구현한다.

* Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치된다. npm으로 수많은 개발자가 만든 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있다. 리액트 역시 하나의 패키지이다. 현재 npm 저장소에 등록된 패키지는 약 82만개로, 하루 평균 475개의 패키지가 새로 등록되고 있다. 이러한 생태계는 자바스크립트 개발 환경을 다시 더 강력하게 만들어 주는 주된 요소이다.

* npm은 Node.js와 함께 설치한다. 이제 Node.js와 npm을 설치해 보자.

[Node.js 버전]

- 기본적으로 Node.js LTS 버전을 사용한다. LTS 버전은 장기적으로 안정적인 지원을 제공하는 버전을 의미한다.

- LTS 버전은 매년 10월쯤에 바뀐다. 2019년 10월에는 LTS 버전이 v.12.x이고, 2020년 10월에는 LTS 버전이
  v14.x이다. 실습하는 분들은 지금 글을 보는 이 시점에서의 LTS 버전을 사용하시면 된다.

설치 : Windows

* Node.js 공식 내려받기 페이지에서 Windows Installer를 내려받아 설치한다.

https://nodejs.org/en

Node.js

* 설치가 끝나면 터미널(또는 명령 프롬프트) 창을 열고, 다음 명령어를 입력하여 제대로 설치했는지 확인해 보자.

node -v

---

(2) yarn

* Node.js를 설치할 때, 패키지를 관리해 주는 npm이라는 도구가 설치된다고 배웠다. 하지만 우리는 npm 대신 yarn이라는 패키지 관리자 도구를 설치하여 사용할 것이다. yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다. npm에 이미 익숙하고 기존에 사용하던 흐름에 변화를 주고 싶지 않다면 yarn은 무시하고 npm으로 사용해도 무방하다.

[1] Windows 설치

* yarn 내려받기 페이지에서 Download Installer 버튼을 눌러 설치 프로그램을 내려 받은 후 실행하자.

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

Yarn

[2] 설치 확인

* 터미널을 열고 다음 명령어를 입력하여 yarn을 제대로 설치했는지 확인해 보자.

yarn --version

---

(3) 에디터 설치

* 리액트 애플리케이션을 만들면서 코드를 수정할 때 사용할 코드 에디터를 설치해 보자. 이미 익숙한 에디터가 있다면 해당 에디터를 사용해도 된다. 자신에게 익숙한 것이 최고다. 리액트 프로젝트를 진행하면서 자주 사용하는 에디터로는 서브라임 텍스트(Sublime Text), 브라켓(Bracket), VS Code, 아톰 등이 있다. 우리는 모든 운영체제를 지원하는 VS Code를 사용해 보도록 하자.

* VS Code 공식 내려받기 홈페이지에서 여러분의 운영체제에 맞는 버전을 설치하자. 이 에디터는 모든 크로스 플랫폼(macOS, Windows, 리눅스)을 지원한다.

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

[1] VS Code 확장 프로그램 설치

* VSCode 에디터를 사용할 때 설치하면 유용한 확장 프로그램을 소개한다.

확장 프로그램 설치

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

2. Reactjs Code Snippets : 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음이다. 검색했을 때 유사한 결과가 여러 개 나올 수 있는데 제작자가 charalampos karypidis 인 것을 설치하자.

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

* 위 확장 프로그램들을 반드시 설치해야 하는 것은 아니지만, 설치하면 개발할 때 매우 유용하다. 이 확장 프로그램들은 다음에 다루어 본다.

[2] VS Code 언어 한국어로 설정하기

* 기본적으로 한국어로 설정하여 사용하는데, 만약 영어로 사용하는 것을 선호한다면 이 과정은 생략해도 된다.

* 먼저 VS Code 확장 마켓플레이스에서 Korean Language Pack for Visual Studio Code를 설치한다.

* 그 다음에는 VS Code에서 [F1]을 누른 후 "Configure Display Language"를 입력하고 나서 [Enter]를 누른다. 이렇게 하면 locale.json이라는 파일이 열리는데, 여기서 locale 값을 ko로 설정한 뒤 VS Code를 재시작하면 에디터 언어가 한국어로 설정된다.

---

(4) Git 설치

* Git은 형상 관리 도구(Configuration Management Tool)로 프로젝트 버전을 관리하고 협업할 때 매우 핵심적인 역할을 한다. 개발자라면 Git을 모르면 안 될 정도로 매우 중요할 뿐 아니라 자주 사용한다. Git을 잘 모른다면 시간을 조금 투자하여 간단한 사용법을 익히는 것이 좋다. Git을 사용하여 앞으로 다룰 예제 코드를 직접 clone(사본 만들기)해서 참조한다.

Windows 설치

* Git 공식 내려받기 페이지에서 설치 파일을 내려 받아 설치하자.

https://git-scm.com/downloads

Git - Downloads

* Windows에서는 bash 에뮬레이터도 함께 설치한다. 앞으로 리액트 프로젝트를 진행할 때는 cmd 창보다는 bash 애뮬레이터를 사용할 것을 권장한다(bash가 cmd보다 편하기도 하지만, 터미널에서 사용할 명령어를 macOS, 리눅스에서 사용하는 명령어와 통일하는 것이 주목적이다.)

---

(5) create-react-app으로 프로젝트 생성하기

* create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구이다. 나중에 설정을 커스터마이징해야 하면 자유롭게 설정을 변경할 수도 있다.

* 이 도구를 사용하는 방법은 매우 간단하다. 터미널을 열고, 프로젝트를 만들고 싶은 디렉터리에서 다음 명령어를 실행하면 된다.

yarn create react-app hello-react

* 리액트 프로젝트를 만들 때는 이렇게 yarn create react-app <프로젝트 이름> 명령어를 사용한다. 프로젝트 이름은 자유롭게 정하면 된다.

* 이렇게 명령어를 입력하고 나면 다음과 같은 결과가 터미널에 나타난다.

* yarn을 사용하지 않는 경우

- yarn을 사용하지 않는 경우라면 다음 명령어를 사용하여 리액트 프로젝트를 생성할 수 있다.

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

* 프로젝트 생성이 완료되었다면 다음 명령어를 입력하여 프로젝트 디렉터리로 이동한 뒤 리액트 개발 전용 서버를 구동해 보자.

cd hello-react
yarn start # 또는 npm start

- VS Code에서 실행하고 싶다면 다음 블로그를 참조하자.

https://samsons.tistory.com/16

[PowerShell] 스크립트 실행 시 오류(UnauthorizedAccess), (PSSecurityException)

* 이렇게 명령어를 입력하고 나면 터미널에는 다음과 같은 결과가 나타난다.

* 그리고 브라우저에서 자동으로 리액트 페이지가 띄워질 것이다. 만약 페이지가 자동으로 열리지 않았다면 브라우저 주소창에 다음 링크를 직접 입력하여 열어 보자.

- http://localhost:3000/

* 리액트 로고가 보이는 검정색 페이지가 나타났는가? 그렇다면 리액트를 공부하기 위한 준비가 끝났다! 이제 본격적으로 리액트를 파헤쳐 보자.