icon안동민 개발노트

리액트 앱 빌드하기

 React 애플리케이션을 개발 환경에서 프로덕션 환경으로 전환하는 과정에서 가장 중요한 단계는 애플리케이션을 빌드하는 것입니다.

 이 과정을 통해 최적화된 정적 파일들이 생성되며, 이를 웹 서버에 배포할 수 있습니다.

Create React App을 사용한 빌드 과정

 Create React App (CRA)으로 만든 프로젝트는 내장된 빌드 스크립트를 제공합니다.

 빌드 과정은 다음과 같이 간단합니다.

npm run build

 이 명령어를 실행하면 다음과 같은 과정이 진행됩니다.

  1. 소스 코드 컴파일
  2. 자산 최적화 (이미지, 폰트 등)
  3. 번들링 및 코드 분할
  4. 환경 변수 주입
  5. 정적 파일 생성

 빌드가 완료되면 build 디렉토리에 최적화된 프로덕션 파일들이 생성됩니다.

환경 변수 설정

 환경 변수를 사용하여 개발 환경과 프로덕션 환경에서 다른 설정을 적용할 수 있습니다.

 CRA에서는 .env 파일을 통해 환경 변수를 관리합니다.

  • .env : 모든 환경
  • .env.development : 개발 환경
  • .env.production : 프로덕션 환경

 예를 들어,

// .env.production
REACT_APP_API_URL=https://api.myapp.com

 이렇게 설정된 환경 변수는 빌드 과정에서 애플리케이션에 주입됩니다.

빌드 최적화 옵션

 CRA는 기본적으로 최적화된 빌드를 제공하지만, 추가적인 최적화 옵션을 사용할 수 있습니다.

  1. 소스맵 생성 제어
GENERATE_SOURCEMAP=false npm run build
  1. 분석 도구 사용
npm run build -- --stats

 이후 webpack-bundle-analyzer를 사용하여 번들 크기를 분석할 수 있습니다.

  1. 코드 분할 : React.lazy()와 Suspense를 사용하여 코드 분할을 구현합니다.

빌드 결과물의 구조

 빌드 후 build 디렉토리의 구조는 다음과 같습니다.

build/
  static/
    css/
    js/
    media/
  index.html
  asset-manifest.json
  favicon.ico
  manifest.json
  robots.txt
  • static/ : 최적화된 JS, CSS 파일과 미디어 파일들이 포함됩니다.
  • index.html : 메인 HTML 파일입니다.
  • asset-manifest.json : 모든 에셋의 경로 정보를 포함합니다.
  • manifest.json : PWA를 위한 웹 앱 매니페스트 파일입니다.
  • robots.txt : 검색 엔진 크롤링 설정 파일입니다.

일반적인 빌드 문제와 해결 방법

  1. 모듈 찾기 오류 : node_modules를 삭제하고 다시 설치해 보세요.
rm -rf node_modules
npm install

  1.  환경 변수 문제 : 모든 환경 변수가 REACT_APP_으로 시작하는지 확인하세요.

  2.  빌드 성능 이슈 : Node.js 버전을 업그레이드하거나, 캐시를 클리어해 보세요.

npm cache clean --force
  1. 번들 크기 문제 : 코드 분할을 구현하거나, 큰 라이브러리의 대안을 찾아보세요.

'eject' 명령어 사용

 CRA의 설정을 더 세밀하게 제어하고 싶다면 'eject' 명령어를 사용할 수 있습니다.

npm run eject

 이 명령어는 숨겨진 모든 설정 파일들을 프로젝트 루트로 추출합니다. 하지만 주의해야 할 점이 있습니다.

  • 이 과정은 되돌릴 수 없습니다.
  • 프로젝트의 복잡성이 크게 증가합니다.
  • CRA의 자동 업데이트 기능을 더 이상 사용할 수 없습니다.

 'eject'는 매우 특별한 경우에만 사용해야 하며, 대부분의 경우 CRA의 기본 설정으로도 충분합니다.

빌드 후 단계

 빌드가 완료되면, 생성된 정적 파일들을 웹 서버에 배포할 수 있습니다.

 일반적인 배포 과정은 다음과 같습니다.

  1. 빌드 파일을 웹 서버의 적절한 디렉토리에 업로드합니다.
  2. 웹 서버 설정을 조정하여 SPA 라우팅을 지원하도록 합니다.
  3. HTTPS 설정, 캐싱 전략 등을 구현합니다.

 React 애플리케이션의 빌드 과정은 개발된 코드를 최적화하고 프로덕션 환경에 적합한 형태로 변환하는 중요한 단계입니다. Create React App은 이 과정을 매우 간단하게 만들어주지만, 개발자가 빌드 프로세스를 이해하고 필요에 따라 최적화하는 것이 중요합니다.

 환경 변수 관리, 코드 분할, 성능 최적화 등의 기술을 적절히 활용하면 더욱 효율적이고 안정적인 애플리케이션을 배포할 수 있습니다. 또한, 빌드 과정에서 발생할 수 있는 문제들에 대비하고, 필요한 경우 'eject' 명령어를 신중하게 사용하여 더 세밀한 제어를 할 수 있습니다.

 마지막으로, 빌드된 애플리케이션의 성능과 동작을 프로덕션 환경과 유사한 조건에서 철저히 테스트하는 것이 중요합니다. 이를 통해 실제 사용자들에게 최상의 경험을 제공할 수 있는 안정적인 애플리케이션을 배포할 수 있습니다.

실습정적 호스팅 서비스에 배포하기