Intro
블로그의 시작을 알리는 첫 글로써 create-react-app을 주제로 정했다. 이유는, 이것이 뭘 해주는지 알기 전까지는 내가 프론트엔드 개발을 제법 할줄 안다고 생각해서?
create-react-app
create-react-app은 React App의 개발 환경을 한 줄의 커맨드로 구성해주는 boilerplate이다. React와 함께 facebook에서 만들었고 npm과 yarn 패키지로 제공된다. 하는 일은 크게 3가지라고 할 수 있다.
-
index.html, index.js를 포함한 웹페이지에 필요한 기본 디렉토리 구성
-
react, react-dom, react-scripts 및 dependency 라이브러리 설치
-
react-scripts를 사용하여 package.json에 npm command 정의
여기서 react-script가 하는 일이 많아보인다. 자세히 무엇을 하는지 알아보고 싶다.
npm start
react-scripts/scripts/start.js
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const {
choosePort,
createCompiler,
prepareProxy, prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');start.js 스크립트에서는 webpack으로 src/index.js를 엔트리로 하는 소스파일들을 번들링하고 그것을 webpack-dev-server와 react-dev-utils를 사용해 browser에 띄운다. webpack-dev-server의 hot 옵션으로 코드 수정 시 브라우저에서도 반영되게 한다.
npm test
const jest = require('jest');
const execSync = require('child_process').execSync;
let argv = process.argv.slice(2);
...
jest.run(argv);test.js 스크립트에서는 argv 변수에 --watch, --env와 같은 옵션을 조건에 따라 추가하여 jest에 넘겨주고 실행한다. 이렇게 cli가 아닌 스크립트 안에서 jest를 실행하는 것은 처음봤다.
npm run build
build.js 스크립트에서는 start.js에서와 마찬가지로 번들링을 하고, 다른 점은 build/ 디렉토리에 번들링한 결과를 저장한다. 이것으로 배포할 수 있고 배포 스크립트는 따로 작성해야 한다.
npm run eject
eject 커맨드는 사용해본 적이 없어서 docs를 찾아보았다.
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
하나의 dependency로 묶여있는 webpack, babel, eslint 등을 eject(꺼내다)하는 것이다. 이는 one-way operation으로 한 번 실행하면 이전으로 돌아갈 수 없다. 개인적으로 커스텀을 위해 eject를 사용해야 하는 상황이라면 처음부터 create-react-app을 사용하지 않는 편이 나을 것이라고 생각한다.
const ownPackage = require(path.join(ownPath, 'package.json'));
const appPackage = require(path.join(appPath, 'package.json'));
...
appPackage.dependencies[key] = ownPackage.dependencies[key];실제로 커맨드를 입력하면 위와 같이 package.json에 기존에 없었던 dependency들이 추가된다.
Outro
webpack이나 jest 등을 간단하게 세팅하고 싶을 때 많이 쓰이는 패키지들을 적당한 configuration으로 구성해주는 쓸만한 라이브러리인 것 같다. 다만 eject 커맨드를 통해 보여진 수많은 라이브러리 dependency들을 보니 숨이 턱 막히긴 한다. TypeScript와 같은 옵션도 포함되어 있기 때문에 실제로는 어쩌면 그 절반도 사용하지 않을 수 있다. 앞으로 자주 쓸 것 같진 않지만 그래도 create-react-app을 통해서만 React를 사용할 수 있는 줄 알았던 때에는 많이 애용했었다.
