.env 파일은 환경 변수를 저장하는 데 사용되는 파일입니다. 여기에는 데이터베이스 연결 문자열, API 키, 암호 등과 같은 민감한 정보를 저장할 수 있습니다. 이 파일은 저장소에 커밋되지 않아야 하며, 각 개발자나 환경에 따라 달라질 수 있는 설정을 관리하는 데 유용합니다.
.env 파일을 사용하면 코드가 서로 다른 환경에서 실행될 수 있게 되며, 그로 인해 개발, 테스트, 프로덕션 등에서 약간씩 다른 설정을 적용하는 것이 가능해집니다.
CRA(Create React App)와 Vite에서 .env 파일을 사용하는 방법에는 약간의 차이가 있습니다.
CRA(Create React App)
CRA에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 이러한 변수는 REACT_APP_ 접두사로 시작해야 합니다. 예를 들면, REACT_APP_API_KEY와 같이 설정할 수 있습니다. 이 환경 변수는 process.env.REACT_APP_API_KEY로 애플리케이션 코드에서 액세스할 수 있습니다.
환경에 따라 다른 .env 파일 (예: .env.development, .env.test, .env.production)을 사용하여 각 환경별로 변수를 설정할 수 있습니다.
Vite
Vite에서는 CRA와 비슷한 방법으로 .env 파일을 사용할 수 있지만, Vite는 기본적으로 환경 변수 접두사로 VITE_를 사용합니다. 예를 들면, VITE_APP_API_KEY 등의 방식으로 환경 변수를 선언할 수 있습니다. 이 환경 변수는 프론트엔드 코드에서 import.meta.env.VITE_APP_API_KEY로 액세스할 수 있습니다.
Vite에서도 CRA와 같이 환경에 따른 .env 파일을 사용할 수 있습니다. 예를 들어 개발 환경의 경우 .env.development, 프로덕션 환경의 경우 .env.production을 사용할 수 있습니다. 이런 식으로 각 환경에 따른 변수를 설정할 수 있습니다.
이렇게 환경에 따른 설정이 가능하므로, 애플리케이션의 설정을 유연하게 관리할 수 있습니다.
