React 작업 환경 설정하기

리액프 프로젝트를 생성하는 사전 준비 작업을 수행하고 나서 첫 리액트 프로젝트를 만들어 볼 것이다.

 

1-1. Node.js와 npm

---

리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 한다.

https://hyunho1lee.tistory.com/30

Node JS 설치하기

 

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

npm으로 수많은 개발자가 만든 패키지를 설치하고 설치한 패키지의 버전을 관리할 수 있다.

현재 npm 저장소에 등록된 패키지는 약 82만 개로, 하루 평균 475개의 패키지가 새로 등록되고 있다.

 

1-2. yarn

---

Node.js를 설치할 때, 패키지를 관리해 주는 npm이라는 도구가 설치된다고 배웠다.

yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다.

$ npm install --global yarn

$ yarn --version
1.22.10

 

1.3 에디터 설치

---

익숙한 에디터가 있다면 해당 에디터를 사용하길 바란다. 자신에게 익숙한 것이 최고이다.

자주 사용하는 에디터로는 서브라임 텍스트, 브래킷, VS Code, 아톰 등이 있다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

1.3.1 VS Code 확장 프로그램 설치

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

2. Reactjs Code Snippets: 컴포넌트, 라이프사이클 함수를 작성할 때 코드를 자동으로 생성할 수 있는 코드 스니펫 모음이다.

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

 

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

그 다음에는 VS Code에서 F1을 누른 후 "Continue Display Language"를 입력하고 나서 Enter를 누른다.

 

2. Git 설치

---

Git은 형상 관리 도구로 프로젝트 버전을 관리하고 협업을 할 때 매우 핵심적인 역할을 한다.

https://git-scm.com/downloads

Git - Downloads

위에 링크에서 설치 파일을 내려받아 설치한다.

cmd 창보다는 bash 에뮬레이터를 사용할 것을 권유한다.

 

2.1 create-react-app으로 프로젝트 생성하기

---

터미널을 열고, 프로젝트를 만들고 싶은 디렉터리에서 다음 명령어를 실행한다.

yarn create react-app <프로젝트 이름>

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

cd hello-react
yarn start

 

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

 

브라우저에서 자동으로 리액트 페이지가 띄워질 것이다.

만약 페이지가 자동으로 열리지 않았다면 브라우저 주소창에 다음 링크를 직접 입력하여 열어 본다.

http://localhost:3000/