리액트 프로젝트 개발환경 구축을 바닥부터 설정하는 것은 굉장히 복잡하다.(Webpack 설정이 만만하지 않다...) 하지만 우리에겐 create-react-app이 있다.
create-react-app이란?
- create-react-app은 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 직접 모든 개발환경을 설정하지 않아도 되고 페이스북이라는 거대한 기업에서 지속적으로 업데이트를 해주기에 많은 사람들이 사용하고 있다.
준비사항
우선 리액트 프로젝트를 진행하기 위해 준비해야할 것.
-
Node.js - Webpack, Babel 같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어져 있기에 해당 도구들을 사용하기 위해서 Node.js를 설치한다.
링크: https://nodejs.org/ko/ -
Yarn - npm(노드 패키지 매니저)보다 조금 향상된 도구라고 생각하면 된다. npm은 위의 Node.js.를 설치하게 될 때 같이 받게 되는 패키지 매니저 도구다. 프로젝트에서 사용되는 라이브러리를 설치 및 라이브러리 버전 관리를 하게 될 때 사용된다. 여기서 npm이 아닌 yarn을 사용하는 이유는 조금 더 빠른 속도, 더 나은 캐싱 시스템을 사용하기 위한 것이다.
링크: https://classic.yarnpkg.com/en/ -
코드 에디터 - 본인은 주로 VSCode를 사용한다. 이 외에도 Atom, WebStorm 등 여러가지 선택지가 있다.
링크: https://code.visualstudio.com/
create-react-app 설치
이제 create-react-app을 설치해보자.
npx create-react-app start-react-app
npx란? npm 패키지를 로컬에 글로벌로 설치하지 않고 일회성으로 실행할 수 있게 해주는 도구이다. npm 5.2.0 버전 이후부터 기본적으로 제공된다.
npx가 실행이 안되는 구버전의 경우 아래와 같이 한다.
npm install -g create-react-app
create-react-app start-react-app
성공적으로 설치가 되었다면 위와 같은 결과가 나온다.
cd start-react-app
yarn start
위와 같이 입력하면 리액트 프로젝트가 시작 될 것이다.
짜잔!!
오늘은 이렇게 간단하게 리액트 프로젝트를 구축을 해보았다.
다음 포스팅에서는 초보자도 코드 문법 평준화를 도와주며 개발 협업에 굉장히 효율적인 ESLint와 Prettier를 배워보겠다.
