create-react-app 에서 eject 명령으로 설정 파일 추출하기

create-react-app은 SPA 형태의 리액트 앱을 만들 때 유용한 도구입니다. 초기 세팅부터 개발용/배포용 스크립트까지 모두 포함되어 있습니다. 리액트를 처음 시작할 때 허들을 낮춰주는 역할도 하고, 간단한 테스트를 할 때도 유용합니다.

다만 그 편리함은 create-react-app이 제시하는 범위 내에서 작업을 할 때에 편리한 것이고, 그 외의 것들을 추가하기 시작하려면 그렇게 녹록치는 않습니다. 대표적으로 Sass 같은 CSS 전처리기를 추가할 수가 없습니다. 별도로 watcher를 돌려서 처리하거나 할 수는 있지만 작업의 덩치가 커지게 되면 create-react-app 자체의 핫로더와 동기화 문제가 발생한다든가 하는 문제가 생기죠.

이런 경우를 위해 npm 패키지 내에 포함된 설정파일과 스크립트를 직접 수정할 수 있게 추출(eject)해주는 명령어가 존재합니다. 간단하게 작업 디렉토리 루트에서 yarn eject # 혹은 npm run eject 해주면 됩니다.

다음은 eject 하기 전의 package.json 입니다.

다음은 eject 한 후의 package.json 입니다.

가장 큰 특징으로는 react-scripts 라는 패키지가 사라졌고, 해당 패키지에서 의존성을 가진 모든 패키지가 dependencies 에 추가되었습니다. config, scripts 라는 이름의 디렉토리가 추가되었고 build.js, start.js, test.js 같은 스크립트 파일이 추가되었습니다. 이 파일들이 react-scripts 패키지에 있던 파일들입니다. 이제 직접 내용을 수정할 수 있습니다.

또 주목할만한 부분은 package.json 안에 babel 세팅에 대한 부분이 추가가 되었는데요, 추가적인 바벨 프리셋이나 플러그인을 넣을 때 정말 유용하게 쓸 수 있습니다.

——

create-react-app 의 eject 에 대해서는 아직도 많은 의견이 있습니다. 일단 공식적으로도 eject를 하지 않고 할 수 있는 여러가지 세팅들을 문서로 제공하고 있습니다.
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md
그 외에도 create-react-app을 다시 한번 wrapping 하는 형태로 여러가지 프로젝트들이 나오고 있습니다.
혹은 직접 세팅을 위해 eject를 선택하실 수도 있겠고요.

여러모로 둘러보시고 취향에 맞는 선택을 하시기 바랍니다.

create-react-app 에서 eject 명령으로 설정 파일 추출하기”에 대한 2개의 생각

  1. 핑백: create-react-app 에서 decorator 방식으로 mobx 사용하기 | The Darkside of The GrotesQ

  2. 핑백: create-react-app 에서 sass loader 추가해 scss 불러오기 | The Darkside of The GrotesQ

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다