react-scripts-란

2023-04-25

CRA

React로 개발을 하면 CRA를 애용하게 된다

Babel이나 Webpack과 같은 귀찮고도 복잡한 설정들을 자동으로 설정해주기 때문에

개발자로 하여금 개발에만 집중해줄수 있게 해주는 상당히 유용한 기능이다

그러나 여느때와 같이 CRA를 통해 react 프로젝트를 생성하다 문득

CRA에서 설정된 webpack,babel들은 어떤식으로 설정되어있을지 궁금해져 찾아 보기로했고

내가 찾아 볼 수 있던건 package.json에 있는

recat-scripts 로 시작하는 명령어 뿐이었다

그렇다면 react-scripts가 뭘까?

정황상 react-scirpts라는 라이브 러리 안에 babel과 webpack등에 관한 설정이 있는건 분명하다

코드를 뜯어보자

react-srripts/scripts/start.js

start 코드는 개발서버를 실행하는 코드이기에 webpack-dev-server 와 webpackDevServer.config 파일을 통해 start 스크립트에 대한 정의를 한다

webpackDevServer.config 을 뜯어보면 우리가 흔히 webpack 설정에서 보던 설정들(headers, client, websocketUrl 등등)을 볼 수 있다

react-srripts/scripts/build.js

build.js 코드의 일부이다

build 함수 안에 webpack 라이브러리를 통해 compiler라는 상수를 선언 하고

compiler.run을 통해 build를 시작한다 우리 알고있는 build 파일의 저장소는

해당 코드에 의해 정의된다

react-srripts/scripts/test.js

위 파일은 단순히 jest를 불러와 테스트코드를 실행시켜준다

jest를 따로 설치, 설정해주지 않아도 돼 많이 편리하다

react-srripts/scripts/eject.js

babel이나 webpack등에 관한 설정들을 직접 하고 싶을때는 eject를 사용해야만 한다

그러나 eject를 사용하면 다시 되돌릴수 없게되고 recat의 숨겨져있던 모든 설정들이 다 나오게 되고

이를 관리해줘야만 한다 위 설정들은 eject를 해야만 설정 할 수 있는건 아니기에 eject는 최대한 피하도록 하자