[React] 개발 환경과 프로덕션 환경

1. 개발 환경(Development)과 프로덕션 환경(Production)

개발 환경

(process.env.NODE_ENV = 'development')

npm run start // 개발 환경 실행

• 코드가 최적화되지 않음
• 디버깅이 쉬운 상태 (예: 콘솔 로그, 자세한 에러 메시지, 소스 맵).
• HMR(Hot Module Replacement)이 활성화되어 코드 변경 시 브라우저가 새로고침 없이 적용됨.
• 빌드 속도보다 편의성이 중요하기 때문에 성능 최적화보다는 빠른 반응성이 우선됨.

프로덕션 환경

(process.env.NODE_ENV = 'production')

npm run build // 배포용 정적 파일을 생성

• 코드가 최소화되고 난독화됨 (파일 크기 줄이기)
• 성능과 보안이 중요한 상태.
• 개발용 기능(예: console.log, HMR)이 제거됨.
• React의 useEffect 같은 훅에서 개발 환경에서만 실행되는 코드가 제외됨.

2. npm run build vs npm run start

npm run start (개발 환경)

개발 중 사용

개발 서버를 띄우는 react-scripts start가 실행된다.

• HMR로 코드 변경 사항이 실시간으로 반영됨
• 브라우저에서 로컬 주소로 접속 가능
• 파일이 번들링되지만 최적화되지 않고 개발용 기능 (예: 에러 오버레이, 소스 맵 등)이 포함된다

npm run build (프로덕션 환경)

배포용 정적 파일을 생성

build/ 폴더에 최적화된 정적 파일을 생성하는 react-scripts build가 실행된다.

• JavaScript, CSS 등을 최소화(minification)하고 코드 스플리팅(Chunking) 등을 적용해 성능을 최적화한다
  개발 서버가 아니라 Nginx, Apache, Vercel, Netlify 같은 정적 파일을 서빙하는 서버에서 실행됨.
  HMR 같은 개발용 기능이 없음.

3. React가 개발 환경과 프로덕션 환경을 구분하는 방법

React는 process.env.NODE_ENV 값을 기반으로 개발/프로덕션 환경을 구분한다.

이 값은 아래와 같이 react-scripts를 실행할 때 자동으로 설정된다.

• npm start → NODE_ENV=development
• npm run build → NODE_ENV=production

환경별로 다른 동작이 필요하다면
아래처럼 process.env.NODE_ENV를 활용할 수도 있다.

if (process.env.NODE_ENV === "development") {
  console.log("개발 환경에서 동작할 코드");
} else {
  console.log("프로덕션 환경에서 동작할 코드");
}

4. 왜 프로덕션 환경을 따로 만들어야 할까?

개발 중에는 디버깅과 빠르게 반영되는 코드가 중요하지만
프로덕션에서는 성능, 빠른 로딩 속도가 더 중요하기 때문에 최적화된 코드가 필요하다.

개발 환경에서는 react-dom.development.js를 사용하지만,
프로덕션 환경에서는 파일 크기를 줄인 react-dom.production.min.js를 사용해 로딩 속도를 빠르게 한다.

불필요한 개발 도구(HMR, 상세 로그, 디버깅 툴 등)를 제거해서 성능이 최적화된다.

5. 요약

• npm run start → 개발 서버 실행 (HMR 지원, 빠른 수정 가능).
• npm run build → 프로덕션용 정적 파일 생성 (최적화된 코드).
• 개발 환경(development)과 프로덕션 환경(production)은 process.env.NODE_ENV 값으로 구분
• 프로덕션 환경에서는 성능 최적화, 보안 강화, 파일 크기 축소가 필요하다