1.2 개발 환경 설정

이 모든 설정 과정은 Windows 기준이다.

 

1.2.1 Node.js 설치

먼저 Node.js를 반드시 설치해야 한다. 리액트 애플리케이션은 웹 브라우저에서 실행되므로 Node.js와 직접적인 연관은 없다. 그러나 프로젝트를 개발하는 데 쓰이는 주요 도구들이 Node.js를 사용한다. 

Node.js를 설치하면 Node.js 패키지 도구인 npm이 설치된다. 

Windows는 공식 홈페이지 https://nodejs.org/ko/download/ 에서 설치한다. 

 

 

1.2.2 yarn 설치

npm 대신에 yarn이라는 패키지 관리자 도구를 설치한다. yarn은 npm을 대체할 수 있으며 npm보다 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다.

Windows는 https://yarnpkg.com/en/docs/install#windows-stable 에서 참고하여 설치한다.

 

위 사진과 같이 cmd에서 아래와 같은 명령어를 입력하면 yarn을 설치할 수 있다.

npm install -g yarn

 

 

1.2.3 코드 에디터 설치 

리액트 애플리케이션 코드 작성, 수정을 위해 코드 에디터를 설치한다. 다양한 에디터들이 많지만 VS Code를 설치한다.

https://code.visualstudio.com/Download에서 설치할 수 있다. 

 

 

1.2.3.1 VS Code 확장 프로그램 설치

1. ESLint 설치 : 자바 스크립트 문법 및 코드 스타일 검사한다.
2. Reactjs Code Snippets 설치 : 리액트 컴포넌트 및 라이프사이클 함수 작성할 때 단축 단어를 사용하여 코드를 자동으로 생성해낼 수 있다. 제작자가 charalampos karypidis인 것을 설치한다.
3. Prettier-Code formatter : 코드 스타일을 자동으로 정리한다.

Reactjs code snippets 확장 프로그램 설치

 

1.2.3.2 VS Code 한국어로 설정(선택)

Korean Language Pack for Visual Studio Code를 설치해서 VS Code를 편의상 한국어로 설정한다.

VS Code에서 F1을 누르고 "Condigure Display Language"를 입력한 후 ko를 클릭해서 한국어로 설정할 수 있다.

 

 

1.2.4 Git 설치

프로젝트 버전을 관리하고 협업할 때 필수적이다. 공식 홈페이지 https://git-scm.com/download/ 에서 설치한다. 

 

 

1.2.5 프로젝트 생성

create-react-app으로 리액트 프로젝트를 생성한다. 웹팩, 바벨 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축할 수 있다. 

cmd를 열고 아래 명령어를 입력하면 react app을 생성할 수 있다.

npm install -g create-react-app

 

그리고 npx도 설치한다.

마찬가지로 cmd에서 아래 명령어를 입력한다.

npm install npx -g

 

본격적으로 react 프로젝트를 생성하려면 cmd에서 아래와 같은 명령어를 입력한다.

npx create-react-app 프로젝트 이름

 

프로젝트로 이동하고 개발 전용 서버를 구동하려면 아래와 같이 입력한다.

cd 프로젝트 이름

 

npm start

 

개발 서버 구동 터미널 화면

 

 

참조 문헌

• 김민준, 리액트를 다루는 기술[개정판], 길벗