리액트(5)- 프로젝트 구조(package.json, 웹팩과 번들, 빌드모드, 개발모드)

package.json 파일
모든 Node.js 프로젝트는 루트 디렉터리에 package.json 파일이 있다. 리액트 프로젝트도 Node.js 프로젝트라서 package.json 파일이 있는 걸 확인할 수 있다.

-----------------------------------------------------------------------------
{
  "name": "ch01_5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

-----------------------------------------------------------------------------
애플리케이션 실행
package.json 파일의 "scripts" 항목에는 package.json 파일이 있는 디렉터리에서 실행할 수 있는 명령어가 정의되어 있다. 위에 "scripts"를 보면 start, build, test, eject가 있다. package.json 파일이 있는 디렉터리에서 npm start 명령어를 실행하면 실제로는 react-scripts start 명령이 실행된다. start 명령은 프로젝트를 개발 모드로 실행하고 build 명령은 배포모드로 실행한다.

웹팩과 번들 파일
웹팩은 프론트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러이다. 웹 어플리케이션은 자바스크립트 코드뿐만 아니라 다양한 이미지파일, CSS파일, HTML 파일로 구성된다. 웹팩에선 이렇게 동작하는데 필요한 파일을 모듈이라고 한다.웹팩은 다양한 입력 모듈을 결합하여 훨씬 단순한 형태의 모듈로 변환해 주는 역할을 한다. 이때 웹팩의 결과물을 번들이라고 한다.
아까 위에서 "sciprts"에 있는 것이 웹팩의 입력 모듈이다. 웹팩은 빌드 모드와 개발 모드일때 동작 방식이 다르다.

빌드모드 실행
.VSCode에서 터미널을 열고 
npm run build 
를 입력하면 빌드모드가 실행된다. 그럼 웹팩은 프로젝트 디렉터리의 파일을 모두 모아 이름에 main이나 chunk라는 단어가 있는 번들 파일들을 만들어 준다.
VSCode 탐색기를 보면 build 디렉터리가 생겼고 index.html 파일도 보인다.   build/static/js로 가보면 chunk단어가 들어간 번들 파일들을 확인할 수 있다. 
이처럼 빌드모드로 실행하면 웹팩은 리엑트 프로젝트의 다양한 파일들을 입력으로 하여 번들 파일을 몇 개 생성하고 public 디렉터리 안에 있는 index.html파일을 바탕으로  번들 파일들을 반영한 index.html 파일을 build 디렉터리에 만들어 준다.
npm run build 명령어를 입력하고 나면 끝에 다음과 같은 글을 확인할 수 있다.
-------------------------------------------------------
The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build
-------------------------------------------------------
npm install -g serve와 serve -s build 명령어는 웹 서버 역할을 하는 serve 프로그램을 설치하고 실행하는 명령어다.
실행이 완료되면 http://localhost:3000 가 나온느데 여기로 접속하면 리액트 애플리케이션이 실행된다. 이렇게 만든 build 디렉터리를 nginx나 아파치 서버와 같은 자신의 웹 서버에 올리면 애플리케이션을 사용자에게 바로 서비스 할 수 있다.

개발모드로 실행
앞에서 빌드모드를 실행 했다면 서버가 동작하고 있을거다. crtl + c를 눌러서 서버를 중지한다. 터미널에 npm start 명령어를 입력하면 서버를 따로 구동하지 않아도 웹브라우저가 실행되고 리액트 애플리케이션이 실행된다. 아까 빌드모드로 실행했을때랑 출력물 내용이 다르다. 이것은 웹팩이 서버로 동작하고 있기 때문이다.
npm start로 실행하면 npm run build와 다르게 명령이 종료되지 않고 계속 작동한다. 따라서 명령어를 입력할 수 없다. 이것은 npm start로 동작한 react - script start가 내부적으로 웹팩을 서버 형태로 구동하기 때문이다. react - scrips start 명령으로 실행된 웹팩 서버는 리액트 프로젝트 디렉터리의 파일들을 빌드하여 번들 파일로 만든 다음, 이를 반영한 index.html 파일을 생성한다.  그 다음 react - scripts가 웹 브라우저를 실행하고 http://localhost:3000 로 접속된다. 그리고 웹팩이 준비한 index.html에서 <scripts> 태그의 자바스크립트 코드로 실행해 웹 페이지를 보여준다.