- 환경 변수를 사용하면 개발과 테스트, 프로덕션 등 다양한 환경에서 애플리케이션의 동작을 변경하거나 설정할 수 있다.
- React 프로젝트에서 환경 변수를 사용하는 방법은 대표적으로 Create React App (CRA)와 Vite두 가지가 있다.
이 두 도구는 환경 변수를 관리하는 방식에 차이가 있다. 본 글에서는 CRA와 Vite에서 환경변수를 어떻게 관리하는지 비교하고 이러한 차이가 어떻게 발생하는지에 대해 알아볼 것이다.
🔎 Create React App (CRA)
- CRA는 환경 변수를 관리하는데
REACT_APP_이라는 접두사를 사용한다. 이 접두사를 사용하지 않은 환경변수는 빌드 프로세스에서 무시된다. - 이는 보안을 위한 것으로, 임의의 환경변수가 클라이언트 사이드 코드로 노출되는 것을 방지한다.
- CRA에서 환경변수는
.env,.env.local,.env.development,.env.development.local,.env.production,.env.production.local등 다양한.env파일을 통해 관리되며, 빌드 모드에 따라 적절한 파일이 로드된다.
🔎 Vite
- Vite는 클라이언트 사이드 코드에 환경 변수를 노출시킬 때
VITE_접두사를 사용한다. 이 접두사를 사용하지 않은 환경변수는 서버 사이드에서만 사용할 수 있다. - Vite는
.env,.env.local,.env.[mode],.env.[mode].local등의 파일을 통해 환경 변수를 관리하며, 빌드 모드에 따라 적절한 파일이 로드된다.
❓ 서버 사이드(server-side)
네트워크의 한 방식인 클라이언트-서버 구조의 서버 쪽에서 행해지는 처리를 말한다.
🔎 차이가 발생하는 이유
환경 변수는 데이터베이스 접속 정보나 비밀 API 키 같이 민감하고 중요한 정보를 담고 있을 수 있다.
- 이런 민감한 정보가 클라이언트 사이드에 노출되면 보안 문제가 발생할 수 있다.
따라서 Vite와 CRA는 각각VITE_와REACT_APP_접두사를 사용해서, 개발자가 명시적으로 클라이언트에서 사용하도록 선택한 환경 변수만 노출하도록 한 것이다. - 빌드 프로세스에 따라 환경변수가 어떻게 적용되는지가 다를 수 있다. CRA에서는
npm run build또는yarn build명령을 실행할 때.env파일에 정의된 환경 변수들이 빌드 결과물에 포함된다.
반면, Vite에서는vite build명령을 실행할 때 Vite 설정 파일이나 환경변수 파일에 정의된 환경 변수들이 빌드에 적용된다.
