[React] create-react-app eject란?

merkyuri·2022년 7월 4일
3

React

목록 보기
1/1
post-thumbnail

리액트를 사용하는 가장 큰 이유 중 하나는 손쉽고 빠르게 리액트 프로젝트를 구축할 수 있기 때문이다.
Create React App 이라는 boilerplate를 통해서 하나의 프로젝트를 build할 수 있다는 점은 하나하나 dependency들을 설정하는 시간을 줄여주어 굉장히 큰 장점이다.

그렇다고해서 꼭 CRA만으로 앱을 구축할 수 있는 것은 아니다.
아무 것도 없는 상태에서 리액트와 필요한 다른 구성들을 설치하며 앱을 구성할 수 있는 방법도 있다. 그치만 CRA를 설치하고나서도 원하는대로 프로젝트에 맞게 커스터마이징을 할 수 있다.

그 방법은 바로 eject라는 스크립트다.


Eject?

CRA를 설치하고 package.json 파일에 들어가서 "scripts" 부분을 자세히 보면 맨 마지막에 앱을 eject시킬 수 있는 명령어가 있다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

npm run eject 혹은 yarn eject를 실행하면 숨겨진 모든 설정을 밖으로 추출해주는 명령어라고 한다.



그래서... 이게 뭔데?

Eject 스크립트를 실행하면 CRA를 구성하는 숨겨진 많은 설정들을 꺼내어 명령어를 실행한 사람에게 모두 보여지게된다.
처음 CRA를 설치해서 보면 정말 기본적인 세팅만 되어있는 사실을 알 수 있는데 자세한 리액트 앱의 구성을 공부하고 싶다면 eject를 실행해서 보면된다. Webpack, Babel, ESLint, etc. 앱을 build하기 위한 모든 구성요소들을 한번에 볼 수 있다.

규모가 작은 프로젝트를 진행했던 나로썬 내가 어떤 라이브러리를 사용하는지 하나하나 알아가며 설치해야 할 필요가 있었기 때문에 CRA를 설치하지 않고 필요한 설정들을 모두 npm에서 찾아서 설치해주었는데, 진작 이 스크립트에 대해 관심을 가졌더라면 앱을 구성하기 위해서 어떤 모듈이 필요한지 빠르게 알 수 있었을 것이다... 😞

❗️ Note: this is a one-way operation. Once you eject, you can’t go back!
다만 한 번 실행시 되돌릴 수 없기 때문에 (명령어 실행 전에도 되돌릴 수 없다는 alert를 준다.) 주의를 기울이며 사용해야 한다. (프로젝트 초반에는 옮겨가면 되니깐 괜찮지만 이후에는... 엄청난 양의 dependencies가 가득찬 패키지 파일이 두배로 늘어나는걸 경험하고 싶지 않다면 주의하기!)





개발자 사무실에서 어? 금지


References:
Create-React-App에서 Eject사용안하기
Create React App Docs

profile
냥발자가 되자

0개의 댓글