CRA의 npm run start는 서버를 띄우는 걸까?

CRA의 npm run start는 어떤 일을 하는 걸까?

CRA(Create React App)의 npm run start 커맨드를 실행하면, 브라우저에서 로컬호스트의 3,000번 포트로 접속하여 개발한 내용을 확인할 수 있다. 그렇다면, 이 커맨드는 서버를 띄우는 것인가. 아니면 로컬의 파일들을 취합해서 단순히 보여주는 것인가. 확인해 보자.

package.json의 scripts

package.json의 scripts

npm run start는 package.json에 scripts안에 정의한 것을 실행하는 커맨드이다. scripts안에 있는 커맨드를 보니 모두 react-scripts라는 것을 이용하여 커맨드를 실행하는 것으로 보인다. react-scripts는 어디에 있는 것일까.

node_modules/.bin

npm run으로 실행하는 스크립트의 위치는 node_modules/.bin 디렉토리이다. 해당 디렉토리에서 react-scripts의 존재를 확인할 수 있었다. 동일한 이름의 파일이 3개 있는데, 모두 같은 역할을 한다. cmd에서 실행하는지, 파워쉘에서 실행하는지 정도의 차이가 있다.

node_modules/.bin

react-scripts 파일

.bin/react-scripts

react-scripts 파일의 내용은 위와 같다. 읽어보면 react-scripts라는 모듈의 bin 디렉토리안에 있는 react-script를 실행하면서 인자를 하나 넘겨주는 것을 알 수 있다. npm run start, npm run dev... 처럼 3번째 인자를 넘겨주는 것으로 보인다.

react-scripts 모듈

react-scripts 모듈 안의 bin 디렉토리 안에 있는 스크립트

react-scripts 모듈 안의 bin 디렉토리에서 react-scripts를 발견할 수 있었다. 해당 파일에서 살펴볼 부분은 다음과 같다.

스크립트 일부를 가져왔다

build, eject, start, test 라는 커맨드는 앞서 봤던 npm run의 인자로 넘겨주던 문자열과 일치한다. 위 내용을 보면 상위 디렉토리에 scripts 디렉토리가 있고, 그 안에 있는 build, eject... 파일 중에 하나를 선택해서 실행하는 것 같아 보인다.

react-scripts 모듈 안의 scripts 디렉토리

해당 디렉토리를 살펴보니 우리가 찾던 파일들이 있는 것을 알 수 있다. start 파일을 열어보았다. 총 163줄이고, 일부를 발췌하였다.

start.js 파일의 내용중 일부를 발췌

28번과 123번 코드를 보아 웹팩데브서버를 사용하는 것을 알 수 있다.

139번 코드는 웹팩데브서버를 실행하면서 브라우저를 실행하는 것으로 보인다. 기억을 되살려보면, npm run start를 실행하면 브라우저가 뜨면서 개발 중이던 페이지를 보여주었다. 그 동작이 이 코드로 실행되는 것으로 보인다.

결론

npm run start로 개발중이던 웹 페이지를 볼 수 있던 것은, 내부에서 웹팩데브 서버를 실행하여 보여주던 것이다.