[React] CRA(Create React App) 환경에서 env 파일 사용하는 방법

서론

CRA(Create React App) 환경에서는 API 끝점, 키 및 기타 설정과 같은 환경별 구성을 관리하는 것이 확장 가능하고 유연한 애플리케이션을 구축하는 데 매우 중요합니다. 다행히도, CRA는 환경 파일을 사용하여 환경 변수를 처리하는 간단한 방법을 제공합니다. 이 튜토리얼에서는 CRA 프로젝트에서 env 파일을 효과적으로 활용하는 방법에 대해 알아보겠습니다.

1단계: 환경 파일 생성

시작하려면 프로젝트 루트에 새 파일을 만들고 이름을 ".env"로 지정하십시오. CRA는 이 파일을 자동으로 인식하고 개발 중 환경 변수로 내용을 로드합니다. 파일 이름은 점으로 시작해야 하며 파일 확장명이 없어야 합니다.

2단계: 환경 변수 정의

.env 파일 내에서 환경별 변수를 키-값 형식으로 정의할 수 있습니다.

REACT_APP_API_URL=http://api.example.com
REACT_APP_API_KEY=your-api-key

각 변수 이름 앞에 "REACT_APP_" 접두사를 기록합니다. 이 접두사는 CRA가 변수를 인식하여 JavaScript 코드에서 사용할 수 있도록 합니다.

3단계: 환경 변수 액세스

환경 변수를 정의한 후에는 process.env 개체를 사용하여 React 구성 요소에서 변수에 액세스할 수 있습니다. 예를 들어, 이전 단계에서 정의된 API URL 변수에 액세스하려면 process.env를 사용할 수 있습니다. 코드의 REACT_APP_API_URL, CRA는 빌드 프로세스 중에 이러한 참조를 해당 값으로 자동 교체합니다.

4단계: 개발 환경과 운영 환경 간의 차이

기본적으로 CRA는 개발 환경의 .env 파일을 로드합니다. 그러나 운영을 위해 앱을 구축할 때 .env 파일에 정의된 환경 변수는 번들로 제공되지 않습니다. 대신 별도의 .env.production 파일을 생성해야 합니다. 그러면 CRA는 최적화된 프로덕션 빌드를 생성할 때 이러한 변수를 포함합니다.

5단계: 소스 제어에 환경별 파일 추가

기본적으로 CRA는 Git 저장소의 .env 파일을 무시합니다. 그러나 저장소에 중요하지 않은 데이터(예: 기본 구성)가 포함된 환경별 파일을 포함하는 것이 좋습니다. API 키 또는 데이터베이스 자격 증명과 같은 중요한 정보의 경우 호스팅 플랫폼 또는 보안 비밀 관리 솔루션에서 제공하는 환경 변수를 사용하는 것이 좋습니다.

6단계: 기타 환경별 파일

CRA는 .env 및 .env.production 외에도 .env.development, .env.test 및 .env.local 파일도 지원합니다. 이러한 파일은 다양한 개발 단계, 테스트 시나리오 또는 로컬 개발 설정에 특정한 환경 변수를 정의하는 데 사용할 수 있습니다.

결론

중요한 정보를 취급할 때는 주의해야 하며 프로덕션 환경에서 기밀 데이터를 저장하는 데는 안전한 방법을 사용해야 합니다. CRA(Create React App) 환경에서 env 파일을 사용하면 코드베이스에 하드 코딩하지 않고도 환경별 구성을 편리하게 관리할 수 있습니다. 이 튜토리얼에 설명된 단계를 따라 React 구성 요소에서 환경 변수를 쉽게 정의하고 액세스할 수 있으므로 응용 프로그램이 다양한 환경에 적응할 수 있습니다. 이 접근 방식은 효율적인 개발 및 배포 워크플로우를 지원하여 보다 확장 가능하고 유지관리 가능한 React 애플리케이션을 제공합니다.