프로젝트 개발을 진행하면서 개발 환경과 배포 환경에서 서로 다른 설정을 사용해야 할 경우가 종종 발생합니다. 특히 API의 엔드포인트 같은 중요한 설정은 환경에 따라 달라질 수 있습니다. 이러한 문제를 해결하는 효율적인 방법 중 하나가 환경 변수를 .env 파일에 정의하고 사용하는 것입니다.
.env 파일은 애플리케이션의 구성을 환경 별로 다르게 설정할 수 있게 해주는 텍스트 파일입니다. 이 파일을 통해 데이터베이스 연결 문자열, API 엔드포인트, 비밀 키 등 중요한 정보를 안전하게 관리할 수 있으며, 애플리케이션의 보안을 강화할 수 있습니다.
.env 파일은 프로젝트의 root 디렉토리에 위치하며, 다음과 같은 형식으로 변수를 설정합니다.
KEY=VALUE
React 프로젝트에서 환경 변수를 설정할 때는 변수명 앞에 REACT_APP_
을 붙여야 합니다. 이는 Create React App에서 환경 변수를 인식하기 위한 규칙입니다.
.env.development
, .env.production
, .env.test
등 환경별로 파일을 생성합니다. 각 파일은 해당 환경에 맞는 설정을 포함합니다..env.development
- 개발 중에 사용될 설정..env.production
- 서버에 배포할 때 사용될 설정..gitignore
파일에 등록합니다.React에서 .env 파일의 변수를 사용하려면 process.env
객체를 통해 접근할 수 있습니다. 예를 들어, API URL 설정은 다음과 같이 할 수 있습니다.
REACT_APP_API_URL="http://localhost:8000/api"
코드 내에서 이 변수를 사용하려면 다음과 같이 작성합니다.
const apiUrl = process.env.REACT_APP_API_URL;
이렇게 설정하면 개발 환경에서는 .env.development
에 정의된 REACT_APP_API_URL
이 사용되고, 배포 환경에서는 .env.production
에 정의된 REACT_APP_API_URL
이 사용됩니다.
.env 파일을 사용하면 환경 별로 다른 설정을 유연하게 관리할 수 있습니다. 이 방법은 애플리케이션의 설정을 외부화함으로써 코드 수정 없이도 다양한 환경에 쉽게 적용할 수 있게 해주며, 중요한 정보의 보안을 강화하는 데도 도움이 됩니다.
.env 파일을 활용하면 프로젝트의 유지보수성과 보안성을 크게 향상시킬 수 있습니다.