React 앱에서 로컬 개발 환경과 프로덕션 환경 분리하기

React를 개발할 때 로컬 개발 환경과 프로덕션 환경을 명확히 분리하는 것은 매우 중요합니다. 환경 분리를 통해 API 엔드포인트, 환경 변수, 빌드 설정 등을 상황에 맞게 관리할 수 있습니다.

1. 환경 변수 설정하기

React 프로젝트는 기본적으로 REACT_APP_ 접두사가 붙은 환경 변수를 지원합니다. 각 환경에 맞는 변수들을 .env 파일로 구분해서 관리하세요.

// .env.development
REACT_APP_API_URL=http://localhost:4000/api

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

개발 서버에서는 자동으로 .env.development가 적용되고, 빌드 시 .env.production을 사용합니다.

2. 환경별 API 주소 사용하기

코드 내에서는 process.env.REACT_APP_API_URL을 활용해 환경에 맞는 API 주소를 사용할 수 있습니다.

const apiUrl = process.env.REACT_APP_API_URL;

fetch(`${apiUrl}/users`)
  .then(response => response.json())
  .then(data => console.log(data));

3. 빌드와 배포 시 환경 구성

프로덕션 배포 전에는 반드시 npm run build 혹은 yarn build 명령어를 사용해 프로덕션용 번들을 생성하세요. 이때 .env.production이 반영됩니다.

4. 요약

• .env 파일을 환경별로 분리해 관리하기
• 코드에서 process.env.REACT_APP_* 변수 사용하기
• 개발과 프로덕션 빌드 시 각각 알맞은 환경 적용하기

이렇게 하면 React 앱의 환경이 명확히 분리되어 안정적인 개발과 배포가 가능해집니다.