yarn eject는 어떤 명령어 일까?

react에서 설정을 커스터마이징을 하기위해 yarn eject 명령어를 실행시켰다. 책에서 yarn eject 을 통해 세부 설정을 밖으로 꺼내준다고 했다.
이후로 eslint가 js파일마다 맨 첫 줄에 Parsing error를 잡아내기 시작했다.

오류 메시지 : "Parsing error: [BABEL] C:\Users\JH\learning\styling-react\src\CSSModule.js: Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment variables. Valid values are \"development\", \"test\", and \"production\". Instead, received: undefined. (While processing: \"C:\\Users\\JH\\learning\\styling-react\\node_modules\\babel-preset-react-app\\index.js\")"

메시지의 내용처럼 NODE_ENV를 선언해주니 문제는 해결되었다. (오류 해결에 대한 내용을 말하고자 하는게 아니니 짧게 넘어가겠다.) 참고 자료

오류를 해결하다보니 문득 yarn eject이 어떤 설정들을 꺼내온 것일까? 궁금해졌다.

yarn eject에 대한 내용은 깊이 숨어있지 않았다. 내가 그냥 지나쳐서 그랬지 컴퓨터는 늘 친절하게 알려주고 있었다. CRA를 설치하면 설치를 완료했다는 메시지와 함께 몇가지 명령어를 알려준다. yarn start, yarn build... 몇 개 안되는 이 중에 yarn eject가 있었다.😅

"이 툴을 제거하고 빌드와 관련된 라이브러리들, 설정 파일, 스크립트들을 디렉토리에 복사해줄게, 한번 실행하면 되돌릴 수 없어!" 이런 의미로 해석했다.
그럼 여기서 remove 한 것과 copy 했다는 건 뭘까?

1. 제거 된 것은? react-scripts

디렉토리를 두개 만들어보았다. test-eject 은 CRA만 설치한 프로젝트이고, test-eject-active 는 CRA를 설치한 후 yarn eject를 실행시켰다. 두개의 package.json을 비교해보면 test-eject에는 있지만 test-eject-active에는 없는 패키지가 있다. "react-scripts"이다.

참고한 블로그 내용에 따르면, 빌드 툴과 관련된 기본 설정들이 react-scripts 패키지에 담겨있었다.

yarn eject는 개발자가 직접 커스터마이징하기 위해 실행시킨 명령어이니 CRA에서 제공하는 react-scripts 패키지가 제거되고 설정을 변경할 수 있는 파일들이 꺼내진게 아닐까 싶다.

2. 그럼 copy된 것은?

CRA Getting Started에 설명되어 있는 것처럼 "hidden"된 파일들을 꺼내온 것이다. yarn eject를 실행하면 config폴더와 scripts 폴더가 추가된 것을 볼 수 있다. 주로 개발 환경을 구성하기 위한 파일들이다.
여기서 모듈 파일의 절대 경로를 지정하고 자동으로 불러오는 설정을 추가했었다.

📢 직접 시도해보고 확인한 내용을 바탕으로 정확한 정보 전달을 위해 노력합니다.
📢 그럼에도 잘못된 정보나, 이후에 update된 내용, 성장을 위한 관련 지식 등은 댓글에 남겨주시면 감사하겠습니다.