[react] create-react-app으로 만든 app에서 테스트용 서버는 어떻게 돌아가나

create-react-app 작업 과정 간단히 보기

 

(1) 프로젝트 생성

 

 

(2) 작업하기

 

 

(3) 서버 실행하고 브라우저에서 localhost:3000으로 접속

 

 

 

 

 

 

만든 app 실행 과정 (서버 돌리는 코드 어딨나?)

 

(1) 터미널에 npm run [ start / test / build / eject ]   (start , test는 run이라고 적는 것 생략 가능)

 

 

(2) 

package.json 파일 scripts 속성 부분

package.json 파일을 보면 이렇게 되어있다. (scripts 부분은 npm 명령어를 저장해두는 부분)

그럼 각 명령을 argument로 가지고서 react-scripts 패키지로 위임됨.

 

 

참고로 npm 홈페이지에서 react-scripts를 찾아보면

create-react-app에서 사용하는 script랑 설정으로 구성된 패키지라고 소개하고 있음

 

 

 

(3) ./node_modules 에 설치된 react-scripts 패키지

먼저 /bin/react-scripts.js 파일이 실행되면서 전달한 argument가 start,build,test,eject중 하나인지 확인한다.

react-scripts.js 코드 일부

이렇게 모르는 argument 들어오면 이런 log 찍히면서 제대로 실행 안됨.

 

 

 

유효한 argument가 전달됐다면 scripts 디렉토리 밑의 해당 js파일이 실행될 것이다.

예를 들면 /scripts/start.js 파일

/scripts/start.js 코드 일부

그럼 이제 우리가 찾던 포트 번호 지정하거나 서버 만들어서 listen 하고 있는 코드 여기에 적혀있다!!

 

 

(😎결론)

실은 뒤에서 이렇게 다양한 추가 작업들이 이뤄지고 있지만, 우리는 클라이언트 사이드 코드만 작성한 뒤

npm start 해서 실행하고, localhost:3000으로 접속해서 화면이 원하는 대로 나오는지 확인해보면 된다.

 

 

 

(😎참고)

포트 번호 간단히 바꾸고 싶으면 package.json파일에서 이렇게 수정하면 된다고 함.

 

create react app의 react-scripts에 대한 참고 글