[ETC] 개발 서버 및 빌드 실행 ✨ (npm run start/ dev/ build)

 

참고자료 1

[JS] npm start와 npm run dev의 차이

참고자료 2

 

---

✨ run의 의미는?

- npm에 기본적으로 설정된 start, stop, restart, test 이외의 scripts를 실행하는 명령어

- dev는 기본으로 설정된 명령어가 아니기 때문에 run을 이용해서 실행!

- scripts 내에 아무 명령어도 없으면, npm start 입력하여 자동으로 node server.js가 실행됨

 

 

 

 

📕 npm start

- start 명령어 안에 실행할 수 있는 기본적인 서버 혹은 파일 주소를 넣으면 그 주소가 실행

- npm start 입력하여 자동으로 node server.js가 실행됨

 

 

 

---

 

여기서 잠시...!

 

✨ craco란?

- create-react-app(CRA) Cofiguration Override의 약어

- CRA에 config 설정을 덮어쓰기 위한 패키지

- 번거로운 설정을 줄이기 위해 다양한 패키지들이 등장
- 보다 쉽게 CRA 설정이 가능하도록 지원해주는 라이브러리

오버로딩: 메서드의 이름은 같고 매개변수의 유형과 개수가 다르도록 하는 것
오버라이딩: 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용하는 것

 

 

💻 script 수정

"scripts": {  
	"start": "craco start",  
	"build": "craco build",  
	"test": "craco test",  
	"eject": "craco eject"  
}

 

 

💻 craco override 설정

- craco.config.js 

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
};
출처: https://freestrokes.tistory.com/167 [FREESTROKES DEVLOG:티스토리]

 

- tsconfig.paths.json 설정 (예시 코드)

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@services/*": ["src/services/*"],
      "@utils/*": ["src/utils/*"],
      "@screens/*": ["src/screens/*"],
      ...
    }
  }
}
출처: https://freestrokes.tistory.com/167 [FREESTROKES DEVLOG:티스토리]

 

✨그렇다면, 왜 사용하는가?

- CRA는 리액트 앱을 빠르게 시작할 수 있지만, webpack 설정을 변경하고 싶으면 CRA는 eject 명령어를 통해 설정을 노출할 수 있지만 복잡하고 유지보수의 부담을 증가시킴

 

💻장점

- 비탈출 방식: CRA 기본설정을 유지하면서 필요한 부분만 쉽게 오버라이드 할 수 있음

- 간편한 설정

- 플러그인 지원

 

 

 

---

 

 

📕  npm run build

- 빌드

- 컴파일 + 링크

- build 자바스크립트가 실행되고 webpack이 적혀있으면 webpack이 실행되는 원리

- 파일을 모아 하나의 js 파일로 만들어줌

-> 이를 할 때마다 webpack을 실행하는게 힘들어 webpack-dev-server를 해주게 됨

-> webpack-dev-server는 가상의 bundle.js를 만들어 자동으로 번들된 js 파일을 띄우게 해줌

-> dist 폴더에 index.js, index.es, index.es.js 등이 만들어짐

ex) package.json 에서 build 부분에 webpack이 존재하면, npm run build 시에 webpack이 실행되고 npm run devserver할 때 개발용서버레 띄워줄 것이다.

 

 

---

 

 

📕npm run dev(개발모드에서 실행)

✨webpack-dev-server

- webpack은 파일을 모아 하나의 js 파일로 만들어줌

- 실제 개발 중 js 파일을 수정할 때마다 webpack을 실행해 번들 작업을 해주면 시간이 매우 오래 걸림

- 그래서 이를 보완해주는 패키지가 webpack-dev-server

- 이는, 실제 빌드를 bundle.js 파일을 만들지 않아도 메모리 상에 가상의 bundle.js 파일을 만들어 웹 사이트를 띄울때 자동으로 번들된 js파일을 띄우게 해줌

- 그리고 수정할 때마다 업데이트된(번들링된) bundle.js 파일로 띄워주고 화면도 새로고침해 줄 수 있음(생산력 향상)

webpack-dev-server는 build를 자동으로 해주는 것이 아님.
단지 미리 지정해둔 경로로 접근할 경우 (파일이 없어도) bundle.js 파일이 있는 것처럼 파일을 보내주는 역할.
개발이 끝나고 실제 서버에 배포할 때는 빌드 작업을 거쳐야 함

 

참고)

    "dev": "webpack-dev-server --mode=development --open --hot --progress",

- "--hot"

-> Hot Module Replacement(HMR): HMR

- 빠른 피드백, 상태 유지, 빠른 스타일 업데이트

 

 

---

 

✨차이

• npm run dev: 개발모드에서 실행(webpack dev server에서 실행)
• npm run build: 빌드(실제 배포 서버에서 실행 전 빌드 실행)
• npm run start: 프로덕션 모드 서버 실행(script에 정의하지 않으면 node server.js에서 실행)