첫 리액트 프로젝트 만들기

1. Node.js 설치
2. npm 또는 yarn 설치
3. 코드 에디터 설치
4. Git 설치
5. create-react-app으로 프로젝트 만들기

---

1. Node.js 설치

리액트 프로젝트를 만들 때는 반드시 Node.js를 먼저 설치해야 한다.
Node.js는 자바스크립트 런타임으로, 크롬 V8 자바스크립트 엔진으로 빌드했다.
Node.js는 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용할 수 있다.

2009년 Node.js2009년 Node.js리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치한다.
사용하는 도구: ECMAScript6를 호환시켜주는 바벨, 모듈화된 코드를 한 파일로 합치고(번들링) 코드를 수정할 때마다 웹 브라우저를 리로딩하는 등의 여러 기능을 지닌 웹팩 등.

Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치된다.
npm으로 수많은 개발자가 만든 패키지(재사용 가능한 도구)를 설치하고, 설치한 패키지의 버전을 관리할 수 있다.
리액트 역시 하나의 패키지다.

Node.js는 장기적으로 안정적인 지원을 제공하는 LTS 버전을 설치하자.
https://nodejs.org/ko/

2. yarn 설치

npm 대신 yarn이라는 패키지 매니저를 설치하자.
yarn은 페이스북에서 만든 npm을 대체할 수 있는 도구로 npm보다 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다.

1. homebrew 설치

https://brew.sh/index_ko

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

2. yarn 설치

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

3. yarn 설치 확인

yarn --version

3. 코드 에디터 설치

책에서는 VS Code를 사용하지만 나는 원래 사용하고 있는 WebStorm을 사용한다.

WebStorm 확장프로그램 설치

• React snippets : 리액트 코드 스니펫 모음
• Prettier : 코드 스타일 자동 정리 도구
  
  

4. Git 설치

https://git-scm.com/

5. create-react-app으로 프로젝트 만들기

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

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

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

나는 책과 동일하게 hello-react라는 이름의 프로젝트를 생성했다.

yarn create react-app hello-react

yarn을 사용하지 않는 경우는 npm init 명령어로 프로젝트를 생성하자

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

프로젝트가 생성되었다면 프로젝트 디렉터리로 이동한 뒤 리액트 개발 전용 서버를 구동해 보자.

cd hello-react
yarn start

또는

cd hello-react
npm start

그러면 브라우저에서 자동으로 리액트 페이지가 띄워진다.
링크는 localhost:3000