The Debugging Chronicles : "코드의 미학"

[React] package.json script dev 설정 추가하기 본문

FrontEnd/React

[React] package.json script dev 설정 추가하기

sweetseonah1004 2024. 12. 17. 15:56

 

dependencies는 의존성 파일을 이야기 한다.

설치되어 있는 라이브러리들의 키 값을 이야기 한다.

node modules 폴더 안에는 라이브러리들이 설치 되어있는데

해당 폴더는 용량이 크기 때문에 공유하지 않는다.

 

따라서 npm i  or npm install 이라는 명령어를 치게 되면

package.json 의 dependencies에 명시되어 있는 라이브러리들을 알아서 설치가 된다.(node_modules폴더가 생성)

 

그리고 npm 명령어는 

script 안에 있다.

그래서 npm start는

바로 

이것을 이야기한다.

 

단 npm start를 제외하고는 

build,test,eject는 run을 적어줘야한다.

 

build는 실제로 배포하기 전에 번들링을 한 상태로 폴더가 만들어진다.

그러면 그 빌드 폴더만 배포하면 된다.

 

start와 dev를 나눠보자

사용자가 우리가 개발할 때 생기는 로그들이나 등등 보면 안되는 것들이 있다.

그래서

배포용과 개발용을  나눈다.

 

정리하면

 

start = 사용자가 보는 화면을 개발자 확인할 때

build = 배포 폴더를 만들기 위하여 사용

dev = 개발자가 보는 화면을 개발자가 확인할 때

eject = 숨겨진 폴더 확인(웹팩, 바벨 커스텀)

test = TDD(테스트 주도 개발)  --- 유닛테스트 --- "jest"

 

"dev" : "react-scripts start"

 

이 한 줄 추가해 주면 된다!

 


포트 번호 바꾸기

"dev" : "SET PORT=3001 && react-scripts start"

 

공용으로 사용하는 포트번호는 피하기! (8080,3306,...)

'FrontEnd > React' 카테고리의 다른 글

[React] Props  (0) 2024.12.18
[React] VScode Extension - Reactjs code snippets  (1) 2024.12.18