[Do it! w. TS] 02. 리액트 프로젝트 생성 및 설정

1. 타입스크립트 기반 리액트 프로젝트 생성 명령

$ npx create-react-app 프로젝트명 --template typescript

 

2. 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.36",
    "@types/react": "^18.2.12",
    "@types/react-dom": "^18.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "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"
    ]
  }
}

 

3. 애플리케이션 실행

package.json 파일의 scripts 항목에는 package.json 파일이 존재하는 디렉토리에서 실행할 수 있는 명령어가 정의돼 있다.

터미널에서 npm start 을 입력하면 실제로는 react-scripts start 명령 실행된다.

$ npm run start //개발모드
$ npm run build //빌드(=배포 또는 프로덕션)모드

 

4.  웹팩과 번들 파일

- 웹팩: 프런트엔드 프레임워크에서 사용하는 대표적 모듈 번들러

 

js, css, html, 이미지 등 웹 어플리케이션에서 필요한 다양한 파일들을 모듈이라고 한다.

웹 팩에서는 이러한 다양한 입력 모듈을 결합하여 훨씬 단순한 형태의 모듈로 변환해 주는 역할을 한다.

이 때 웹팩의 결과물을 번들이라고 한다.

 

웹팩은 빌드모드와 개발 모드에 따라 동작방식이 다르다. 개발모드인 경우 웹팩을 서버형태로 구동한다.

 

5. build 모드인 경우

$ npm run build

이 경우 웹팩은 프로젝트 디렉토리의 파일을 모두 모아 main 또는 chunk라는 단어가 있는 번들 파일들을 만든다. build 디렉토리의 static 디렉토리 아래의 디렉토리들에서 확인할 수 있다.

•  이처럼 빌드모드로 실행할 때에 웹팩은 리액트 프로젝트의 다양한 파일들을 입력으로 하여 번들 파일을 몇 개 생성한다.
•  그러고는 기존 프로젝트의 public 디렉토리에 있던 index.html 파일을 바탕으로 번들 파일들을 반영한 새로운 index.html 파일을 build 디렉토리에 만든다.

빌드 디렉토리 서비스하기

 

nginx 등의 웹서버를 사용하여 build 디렉토리 경로를 지정해 주면 내용을 서비스 할 수 있다. 그러나 아래의 명령어를 사용하여 웹서버 역할을 할 serve 프로그램을 설치하고 실행할 수 있다. build 디렉터리의 상위 디렉토리에서 입력한다.

$ npm install -g serve
$ serve -s build
// 만약 build 디렉토리 이름을 test-dir01로 변경했다면 아래와 같이 하면 된다.
$ serve -s test-dir01

 

6. 개발모드인 경우

$ npm start

이렇게 하면 서버를 따로 구동하지 않아도 웹브라우저가 실행되고 리액트 앱이 실행된다. 개발 모드인 경우 웹팩이 서버로 동작하기 때문에 터미널에서의 출력 내용이 다르다.

 

• npm start 명령은 npm run build와 다르게 명령이 종료되지 않고 계속 동작한다.
• npm start 명력으로 동작한 react-scripts start가 내부적으로 웹팩을 서버 형태로 구동한다.
• react-scripts start 명령으로 실행된 웹팩 서버는 리액트 프로젝트 디렉터리 파일들을 빌드하여 번들파일로 만들고 이를 반영한 index.html 파일을 생성한다.
• react-scripts가 웹브라우저를 실행하고 http://localhost:3000 주소로 접속한다.
• 웹팩이 준비한 index.html 에서 <scripts> 태그의 자바스크립트 코드를 실행해 웹페이지를 화면에 보여준다.

npm start
-->

react-scripts start
--실행-->

웹팩 웹서버
--번들파일-->

웹브라우저

 

7. 개발 모드에서의 핫모듈 교체

개발 모드 중 소스 수정 시 수정사항이 즉시 웹브라우저에 반영된다. 이는 hot module replacement(HMR) 덕분이다.

이를 hot reloading이라고도 한다.

 

웹팩 서버는 처음 빌드한 번들 파일들을 웹브라우저 쪽 index.html 파일에 반영한다.

동시에 프로젝트 디렉터리에 새로운 파일이 생기거나 변경이 있는지 감시한다.

처음 빌드한 부분과 다른 부분이 생기면 해당 부분만 빌드한다.

이를 웹브라우저의 자바스크립트 코드에 심어 둔 웹팩 코드와 협업하여 변경된 내용을 실시간으로 반영한다.

 

HMR은 완벽하지 않기 때문에 새로고침이 필요한 경우도 있다.