리액트를 사용하는 가장 큰 이유 중 하나는 손쉽고 빠르게 리액트 프로젝트를 구축할 수 있기 때문이다.
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