여기서 `npm run build` 명령어로 배포용 애플리케이션을 빌드하고, `npx serve -s build` 명령어로 빌드된 애플리케이션을 로컬 웹 서버에서 서비스하는 방법을 다룹니다.
npm run build
- 이 명령어는 리액트 애플리케이션을 배포하기 위한 최적화된 빌드를 생성합니다.
- 리액트 앱을 생성할 때 `create-react-app`을 사용했다면, `package.json` 파일에는 `build` 스크립트가 이미 정의되어 있습니다.
- `build` 스크립트는 웹팩(Webpack)과 같은 도구를 사용하여 애플리케이션의 자바스크립트, CSS, 이미지 파일 등을 최적화하고, 모든 파일을 `build` 폴더에 모아둡니다.
- 최적화 과정에는 코드의 압축, 불필요한 코드 제거(트리 쉐이킹), 브라우저 캐싱 최적화 등이 포함됩니다.
npx serve -s build
- `serve`는 정적 파일을 제공하는 간단한 웹 서버입니다. `npx`를 사용하면 `serve` 패키지를 글로벌로 설치하지 않고도 실행할 수 있습니다.
- `-s` 또는 `--single` 옵션은 싱글 페이지 애플리케이션(SPA)을 위한 옵션입니다. 사용자가 어떤 경로로 웹사이트에 접근하더라도 항상 `index.html`을 제공합니다. 이는 리액트 라우팅을 사용하는 SPA에서 필수적입니다.
- `build`는 `serve` 명령어가 서비스할 폴더명입니다. `npm run build`로 생성된 `build` 폴더 내의 파일들이 웹 서버를 통해 제공됩니다.
배포 과정 요약
1. `npm run build` 명령어로 리액트 애플리케이션의 최적화된 배포 버전을 생성합니다. 이 과정에서 `build` 폴더가 생성되고, 모든 배포용 파일이 이 폴더 안에 저장됩니다.
2. `npx serve -s build` 명령어로 생성된 `build` 폴더를 서빙하는 웹 서버를 시작합니다. `-s` 옵션은 모든 요청을 `index.html`로 리다이렉트하여 리액트 라우터가 클라이언트 측에서 경로를 처리할 수 있게 합니다.
3. 이제 브라우저를 통해 `serve`가 제공하는 로컬 웹 서버의 주소로 접속하면, 빌드된 리액트 애플리케이션이 표시됩니다.
컴포넌트
- 리액트의 컴포넌트는 사용자 정의 태그라고 할 수 있습니다. 이러한 컴포넌트를 통해 UI를 독립적이고 재사용 가능한 부분으로 나누어 관리할 수 있습니다. 각 컴포넌트는 자신의 상태를 가지고 있으며, 애플리케이션의 UI를 구성하는 데 사용됩니다.
이 과정을 통해 개발한 리액트 애플리케이션을 실제 사용자에게 제공하기 위한 준비를 마칠 수 있으며, 배포 후에도 `serve`를 사용한 로컬 테스트를 통해 애플리케이션의 동작을 확인할 수 있습니다.
