create-react-app에 관하여 -1

create-react-app은 facebook incubator라는 깃헙 공간에 자신의 위치를 차지하고 있습니다.
react, jest, flow, immutable.js 등은 facebook 공식 그룹 밑에 있는데 facebook incubator 밑에는 지금 create-react-app, dhcplb, exerslide 등 세가지 프로젝트가 자리잡고 있습니다.

2016/10/06 editor’s deepdive

facebookincubator/create-react-app
_create-react-app - Create React apps with no build configuration._github.com

boilerplate

web상의 많은 프로젝트들, 특히 bootstrap 을 필두로한 web 프로젝트들은 boilerplate들을 갖고 있습니다.

`정보기술에서 말하는 보일러 플레이트는 변경 없이 계속하여 재 사용할 수 있는 저작품을 말한다.  
(중략)  
보일러 플레이트는 일종의 템플릿 등과 비교될 수 있는데, 이는 템플릿을 마치 빈칸을 채우도록 되어 있는 보일러 플레이트라고 생각할 수 있기 때문이다. 일부 대표적인 보일러 플레이트에는, 임무 기록서, 안전 표지, 일반적으로 사용되는 설치 절차서, 저작권 관련 문서, 그리고 책임 포기 성명서 등을 예로 들 수 있다.`

출처 : http://www.terms.co.kr/boilerplate.htm

웹 프로젝트들은 특별히 의존성을 많이 가지고 있기 때문에 이런 boilerplate 혹은 bootstrap이라는 이름의 템플릿 프로젝트를 많이 만듭니다.

React 생태계는 특히나 이 boilerplate가 우후죽순 생겨났었는데, 그 중요한 이유가 생태계의 변화 속도가 그 어떤 프레임워크와 비교해도 빠르게 발전했기 때문입니다.

awesome-react의 boilerplate 섹션만 보더라도 15개의 boilerplate가 있습니다.

설정상의 어려움들

react 커뮤니티에서 소스들이 ES2015를 주로 이용하기 시작하면서 react를 이용하기 위해서는 예전에는 webpack, babel, gulp.. 등등
알아야 할 것도 너무 많았고 설정해야 할 것도 너무 많아서 이런 일들을 배우는 것 자체가 허들처럼 느껴질 때가 있었습니다.

“나는 React 문법만 알면 개발을 할 수 있을 줄 알았는데….” 라는 자조들이 쏟아져 나오기 시작합니다.

이 때에 react-makes-you-sad(한글번역), react-howto(한글번역) 등이
나온 것은 그 어려움들을 이야기 하고 있죠.

petehunt/react-howto
_react-howto - Your guide to the (sometimes overwhelming!) React ecosystem._github.com

ehrudxo/react-makes-you-sad
_react-makes-you-sad - Here’s a flowchart to make you happy again!_github.com

물론, 설정상의 문제점 뿐만이 아니라 빠르게 변화하는 react 커뮤니티에 대한 내용들이 있었습니다.

그래서 저도 webpack 과 gulp셋팅은 기본적으로 되어 있는 프로젝트들을 찾고는 했습니다.

create-react-app

그러던 차에~ create-react-app 이라는 훌륭한 프로젝트가 등장합니다.

기본적으로 ES2015문법을 지원하는 셋팅과 watchify가 기본 설정이 되어 있는 것만으로도 훌륭하게 작업할 수 있다는 사실.

처음

`$create-react-app [프로젝트명]`

하나로 바로 웹서버를 기동시키고 npm run buid를 이용해 production 수준의 minify,uglify등을 지원하는 등을
손쉽게 지원하는 프로젝트인데, 다른 설정들은 신경쓰지 않아도 되었으니 얼마나 반가웠는지 모르겠습니다.

깃헙페이지의 사용자 가이드를 한번 정리해 보았습니다.

사용자 가이드

새로 릴리즈 버전이 나올때 업데이트 하기

저도 궁금했습니다. react 버전이 바뀌면 또 create-react-app 자체가 바뀌면 어떻게 적응이 될지.

Create React App은 두개의 패키지로 나눠지는 데

create-react-app 은 새로운 React 앱을 만드는 시스템 전체의 CLI 명령어입니다
react-scripts 은 생성된 프로젝트에서 개발 의존성을 관리합니다.

대부분의 경우 create-react-app을 업데이트할 필요는 없을 거 같습니다. 모든 셋업 관련 내용은 react-scripts가 담당합니다.

`**create**-react-app [프로젝트명]`

작업을 할 때 자동으로 최신의 react-scripts 를 가지고 와서 업데이트를 하게 됩니다.

그러면 create-react 자체를 업데이트 하려면?

`npm **update** -g **create**-react-app`

명령어를 사용하면 됩니다.

다만, 이미 create-react-app으로 만들어진 프로젝트의 react-scripts를 업데이트 하실 때는 조심하셔야 합니다.
package.json에서 버전을 확인한 후에 CHANGELOG
를 확인해서 의존성에 변화가 없는지를 확인해야 합니다.

이후, 대부분의 경우는 package.json 의 react-scripts 버전을 바꾸고 npm install 을 하면 별 문제 없이 업데이트가 될 것입니다.

폴더 구조

$create-react-app 을 하고 나면 폴더 구조는 다음과 같이 보여질 것입니다.

`**my**-app/  
README.md  
node_modules/  
**package**.json  
public/  
**index**.html  
favicon.ico  
src/  
App.css  
App.js  
App.test.js  
**index**.css  
**index**.js  
logo.svg`

프로젝트를 빌드 하기 위해서는 다음의 파일들은 정확하게 아래와 같이 존재해야 합니다
* public/index.html은 페이지 템플릿입니다.
* src/index.js는 JavaScript 진입점입니다.

이 외의 파일들은 필요에 따라 지우거나 바꾸셔도 됩니다.

src 폴더 하위가 하위폴더로 사용되는데, 바꿀 수는 있습니다. 빠를 빌드 자동화를 위한 조치입니다만 기본적으로는(설정을 바꾸지 전에는)
src 폴더 아래 있는 파일만 Webpack 이 인지할 것입니다. 다른 폴더에 들어간 JS나 CSS파일은 Webpack 이 관여하지 않습니다.

public 폴더 아래 들어간 파일만 static html파일로 인식합니다.
다른 폴더에 JavaScript파일과 HTML 파일을 Asset으로 사용하고 설정하는 방법은 차후에 설명하겠습니다.

최상위 디렉토리에 생기는 다른 디렉토리는 문서를 포함한 다른 용도로 사용할 수 있습니다.

npm script

생성된 프로젝트에서 다음과 같은 명령어를 사용할 수 있습니다.

`$npm start`

웹서버를 개발 모드로 시동합니다. http://localhost:30000 주소로 브라우저에서 접근할 수 있고
watichify가 적용되어 있어서 파일 수정하면 바로바로 반영이 됩니다.
에러는 console 로 확인이 가능합니다.

`$npm test`

test runner를 돌립니다. test 케이스를 어떻게 만들지에 대해서는 차후 다뤄보겠습니다.

`$npm run build`

개발 모드에서 제품( production ) 모드로 빌드를 돌려서 build 디렉토리 밑으로 보냅니다.
최적화(optimization) 과정을 거진 제품모드의 번들 파일입니다.
minified 되어 있습니다. 이 과정이 끝나면 deploy 할 수 있는 상태라고 볼 수 있습니다.

`$npm run eject`

빌드툴과 설정이 맘에 안들면 eject명령어를 사용할 수 있습니다.
이렇게 하면 단일 빌드 의존성을 제거하게 됩니다.
대신에 모든 설정파일을 당신의 프로젝트 밑으로 집어 넣어서 다른 설정들(babel,webpack, eslint 등등)을 직접할 수 있게 해 줍니다.
하지만 대부분의 경우에는 이 eject 명령어를 쓸 필요가 없을 것이고, create-react-app의 설정으로 충분합니다.
게다가 eject 명령어는 다시 돌릴 수 없습니다. 조심해서 사용하세요.

eject 하고 나면 이렇게 많은 devDependency가 package.json파일에 들어 옵니다.