React > npm run build 배포하기

npm run build 명령어는 React 애플리케이션을 배포할 준비가 된 최적화된 형태로 빌드합니다. 이 명령어를 실행하면, 프로젝트 디렉토리의 루트에 build라는 폴더가 생성되고, 이 폴더 안에는 애플리케이션을 배포할 수 있는 정적 파일들이 포함됩니다. 다음은 npm run build 명령어가 하는 주요 작업들입니다:

npm run build의 주요 작업

1. 코드 번들링 (Bundling):
   • Webpack과 같은 번들러를 사용하여 모든 자바스크립트, CSS, 이미지 파일 등을 하나의 파일이나 여러 개의 파일로 결합합니다.
   • 코드가 번들링됨으로써 브라우저가 애플리케이션을 로드할 때 필요한 HTTP 요청의 수가 줄어들어 성능이 향상됩니다.
2. 코드 압축 (Minification):
   • JavaScript와 CSS 코드를 압축하여 파일 크기를 줄입니다. 이 과정에서 불필요한 공백, 주석 등이 제거되고 변수명 등이 단축됩니다.
   • 파일 크기가 작아짐으로써 네트워크 전송 속도가 빨라지고 로드 시간이 단축됩니다.
3. 코드 최적화:
   • 코드 스플리팅 (Code Splitting)을 통해 필요한 코드만 로드하도록 최적화합니다. 이는 애플리케이션의 초기 로딩 시간을 줄여줍니다.
   • Tree shaking을 통해 사용되지 않는 코드 (dead code)를 제거합니다.
4. 환경 설정:
   • NODE_ENV 변수를 production으로 설정하여 React의 개발 모드 특화 경고 메시지 등을 제거합니다. 이는 프로덕션 환경에서의 성능을 최적화합니다.
   • React의 일부 기능은 개발 모드에서만 활성화되며, 프로덕션 빌드에서는 비활성화됩니다.

생성되는 파일들

npm run build를 실행하면 build 폴더에 다음과 같은 파일들이 생성됩니다:

• index.html: 애플리케이션의 진입점이 되는 HTML 파일.
• static/js/: 번들된 JavaScript 파일들이 저장되는 디렉토리.
• static/css/: 번들된 CSS 파일들이 저장되는 디렉토리.
• static/media/: 이미지와 같은 미디어 파일들이 저장되는 디렉토리.

빌드 과정 예시

1. 프로젝트 디렉토리에서 명령어 실행:
2. npm run build
3. 생성된 build 폴더 구조 예시:
4. build/ ├── index.html ├── static/ ├── css/ ├── js/ └── media/

배포

build 폴더가 생성되면, 이를 웹 서버에 업로드하여 배포할 수 있습니다. 다양한 배포 방법이 있으며, 다음과 같은 방법들이 있습니다:

• Netlify: 정적 사이트 배포 서비스.
• Vercel: 정적 사이트 배포 및 서버리스 함수 지원.
• GitHub Pages: GitHub에서 제공하는 무료 정적 사이트 호스팅.
• AWS S3: Amazon의 S3 버킷을 이용한 정적 웹 사이트 호스팅.

요약

npm run build는 애플리케이션을 배포할 준비가 된 최적화된 형태로 빌드하여 build 폴더에 저장합니다. 이 과정에서 코드 번들링, 압축, 최적화가 이루어지며, 생성된 파일들은 웹 서버에 배포하여 실제 서비스로 제공할 수 있습니다.