1. CRA로 프로젝트 생성

시작하기

---

만일 nodejs가 설치되어 있지 않다면, 우선 nodejs를 설치해주세요.

https://nodejs.org/ 에서 설치 파일을 다운받으셔도 되고,

버젼관리를 쉽게 하고자 한다면, nvm ( node version manager ) 를 추천드립니다.

https://github.com/creationix/nvm

위 링크에서 nvm을 다운받거나 install script를 이용하여 설치하신다음,

터미널을 재시작 해주시면 사용이 가능합니다.

기본적인 명령어로는

1. nvm install node

- nodejs 가장 최신 버젼이 설치됩니다.(current version) 만일 최신버젼이 아닌 다른 버젼을 설치하고 싶다면, 예를 들어 7.6.0 버전을 설치하고 싶다면,

   nvm install 7.6.0 명령어를 사용하시면 됩니다.

2. nvm use node

- 현재 설치되어있는 가장 최신 버젼의 nodejs를 사용합니다. 만일 설치되어있는 다른 버젼을 사용하시려면, 예를 들어 7.6.0 버전을 사용하고 싶다면,

   nvm use 7.6.0 명령어를 사용하시면 됩니다.

   이렇게 사용하는 이유는 각 node 버젼마다 글로벌 패키지랄 다르게 적용할수 있고, 프로젝트에 따라서 사용해야하는 node 버전이 다를수 있기 때문입니다.

3. nvm uninstall x.x.x

- 설치되어 있는 x.x.x버전의 nodejs를 삭제합니다.

---

자신의 컴퓨터에 create-react-app을 글로벌 패키지로 설치해줍니다.

npm install -g create-react-app

프로젝트 생성

create-react-app projectname

위 명령어를 실행하면, projectName의 이름을 가진 폴더가 생성되면서,  react 프로젝트가 생성되며, 

그 다음 자동으로 각종 package들을 설치하게 됩니다. 약3~5분정도의 시간이 걸리는듯 싶습니다.

( 프로젝트 명은 모두 소문자로 하셔야 합니다. 대문자로 하면 

이러한 에러메시지가 나와요.

생성을 기다립니다.

이러한 명령어가 뜨면서 프로젝트 생성이 완료되었습니다.

저는 yarn을 설치해서 yarn으로 프로젝트 생성이 되었습니다. yarn 은 필수가 아니므로 사용하셔도, 안하셔도 됩니다.

자 그럼 우선 생성된 프로젝트를 살펴보겠습니다.

폴더 구조입니다. ( 참고로 사용하는 editer 는 vscode 입니다 )

구성이나 복잡한 폴더 구조가 없으며 앱을 빌드하는데 필요한 파일 만 있습니다. 

여기서 public/index.html은 템플릿 파일입니다. 필수적인 파일이므로 파일의 위치와 이름을 바꾸지 않으시길 바랍니다.

src/index.js 파일 또한 javascript의 진입 파일이므로 이름과 위치는 바꾸지 않으시길 바랍니다.

( 추후에 설명드릴 npm eject 명령어로 설정파일을 커스텀마이징 할 경우, 바꾸는게 가능하긴 합니다. 허나 저는 eject를 하지 않고 이번 포스팅을 할 예정입니다. )

스크립트

생성이 완료되었고, 폴더 구조도 보았습니다.

이제 사용 가능한 스크립트들을 살펴보겠습니다.

우선 package.json의 내용을 확인하겠습니다.

{

"name": "projectname",

"version": "0.1.0",

"private": true,

"dependencies": {

"react": "^15.6.1",

"react-dom": "^15.6.1",

"react-scripts": "1.0.10"

},

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jsdom",

"eject": "react-scripts eject"

}

}

역시 깔끔합니다. 물론 여기에는 dependencies가 3개밖에 없지만, 사실은 매우 많은 dependencies 가 있습니다. 숨겨진채로...

여기서 볼것은 scripts입니다.

총 4개의 스크립트 명령어가 있습니다.

1. start

- npm run start ( 혹은 npm start ) 로 실행합니다. react 개발 서버를 실행하는것으로, 개발모드에서 앱을 실행합니다. 브라우져에서 localhost:3000 에서 확인 가능합니다.

  코드 수정시 페이지는 다시 로드 되며, lint 오류는 콘솔에 표시됩니다.

  

  생성후 바로 npm start 를 실행한 뒤 화면입니다.

2. build

- npm run build 로 실행합니다. 프로덕션용 앱을 build 하는 과정이며, React를 프로덕션 모드로 올바르게 번들링하고 최상의 성능을 위해 빌드를 최적화합니다.

  빌드가 축소되고 파일 이름에 해시가 포함됩니다.

  

  명령어를 실행해보겠습니다.

생성된 build 폴더 구조입니다.

3. test

- npm run test 로 실행합니다. 테스트 러너를 시작하는 명령어로, Jest를 테스트 러너로 사용합니다.

  

4. eject

- npm run eject 로 실행합니다. 현재 프로젝트의 모든 설정 및 스크립트를 개발자가 사용할수 있도록 밖으로 끄집어냅니다. 

  프로젝트의 단일 빌드 종속성을 제거합니다. 이 명령어를 사용한뒤에는 각종 설정파일들(Webpack, Babel, ESLint 등)을 커스텀마이징 할수 있게 됩니다.

  하지만, 이 명령어는 단방향 명령입니다!! 한번 실행하면 이전으로 돌아갈수 없습니다!! 

  

이번 포스트에서는 CRA로 프로젝트 생성과 폴더 구조, 스크립트 실행에 대해 포스팅 하였습니다.

다음 포스트에서는 express 작업환경 설정에 대해 포스팅 하도록 하겠습니다.

---

참고 사이트 : https://github.com/facebookincubator/create-react-app