2. CRA 사용하여 프로젝트 셋팅하기

CRA 사용하여 프로젝트 셋팅하기

 

CRA란?

create-react-app 의 약자

React 는 ES6 기반의 자바스크립트 코드로 작성되는 것이 일반적인데, 모든 브라우저가 ES6 기반의 자바스크립트를 지원하지는 않는다.

그래서 웹팩을 사용해 ES6 문법을 모든 브라우저가 이해할 수 있는 ES5문법으로 변환해준다!

그럼 이 웹팩을 우리가 설정해야하는가? NO!

페이스북에서 제공하는 cra 를 사용하면 react 로 작업하기 위한 모든 것을 셋팅해주니까!

 

CRA를 사용하는 방법 1. 로컬에 설치

패키지 매니저 yarn 이나 npm 을 이용해 설치

(nodejs를 설치하면 npm은 함께 설치되어 있고, yarn은 별도로 설치해야함

둘다 패키지 매니저이고 둘 중 하나만 사용할것, 그리고 둘 중 뭘 사용해도 무관)

npm install global create-react-app
yarn add global create-react-app

create-react-app {프로젝트명}

 

그런데 create-react-app은 페이스북에 의해 지속적으로 업데이트가 되고 있다

그러니 로컬에 설치하는 것 보다 필요할때만 불러서 사용하는 것을 추천

 

CRA를 사용하는 방법 2. npx로 실행

npm version이 5.2 이상이라면 npm이 설치되면서 함께 설치됨

npx는 npm 레지스트리에 등록된 모듈 혹은 패키지의 실행을 돕는 도구이다

npx create-react-app ${프로젝트명}

한줄이면 끝~

npx를 사용해 우리는 cra 모듈을 직접 로컬에 설치하지 않아도 되고, 항상 최신버전으로 이용할 수 있다!

 

나는 클론코딩 프로젝트명 nomflix를 생성했다.

Mac일 경우, terminal에서 원하는 경로로 이동해 위 npx 명령을 실행하고

Window일 경우, vscode에서 terminal에서 원하는 경로로 이동해 동일한 명령을 실행하면 된다.

(vscode의 터미널에서 git bash를 default terminal로 설정하면 보다 편리하게 터미널을 사용할 수 있다)

짠~

마지막에 Happy hacking! 이라는 메시지가 보인다면 성공적으로 프로젝트가 생성 된 것이다~!

 

+) 프로젝트에서 사용하지 않을 기본 파일 삭제

yarn start

나는 yarn 을 쓸거지만 npm을 써도 완전히 무방하다! 다만 혼용하지만 말자~!

명령으로 프로젝트 시작

이런 메시지를 본다면 프로젝트가 잘 실행되었다!