환경변수(Environment Variables)는 애플리케이션의 설정을 외부에서 조작할 수 있게 해주는 중요한 값들입니다. Vite 빌드 도구와 cra로 생성한 리액트 앱에서 어떻게 환경변수를 관리하는지 알아봄니다.

Vite

1. .env 파일 생성

프로젝트 루트 디렉토리에 .env 파일을 생성합니다. 이 파일은 비밀 키나 API 엔드포인트 같은 정보를 저장하는 곳입니다.

2. VITE_로 시작하는 변수생성

Vite는 VITE 로 시작하는 환경 변수만 노출시킵니다. 따라서 아래와 같이 VITE 접두사를 붙여서 환경 변수를 선언합니다

VITE_TEST_KEY=ABCD

또는 문자열을 사용할 경우 따옴표 붙이기

VITE_TEST_KEY="ABCD"

3. 코드에서 환경변수 사용하기

환경 변수를 선언한 후에는 import.meta.env.VARIABLE_NAME 형태로 해당 값을 호출할 수 있습니다:

console.log(import.meta.env.VITE_TEST_KEY); // ABCD

주의할 점은 VITE_ 접속사를 붙이지 않은 변수명은 Vite가 인식하지 못하므로 반드시 붙여서 사용합니다.

---

Create React App(CRA) 환경변수 설정 방법

CRA에서도 마찬가지로 프로젝트 루트 디렉토리에 .env 파일을 생성합니다. CRA에서는 REACTAPP 이라는 접두사를 사용하여 환경변수를 선언합니다:

REACT_APP_TEST_KEY=ABCD

그 후, 코드 내부에서 아래와 같이 해당 값을 호출할 수 있습니다:

console.log(process.env.REACT_APP_TEST_KEY); // ABCD

CRA 역시 Vite와 마찬가지로 지정된 접두사(REACTAPP)가 없는 환경 변수들은 인식되지 않으므로 주의!

---

환경변수와 일반 변수의 가장 큰 차이는 범위와 생명주기입니다. 환경변수는 운영체제에서 프로세스를 실행할 때 설정되며, 해당 프로세스와 그 하위 프로세스들이 이 변수를 참조할 수 있습니다. 환경변수는 시스템 레벨에서 관리되므로 애플리케이션 전체에 영향을 줄 수 있습니다.

리액트에서 사용하는 환경변수는 애플리케이션 레벨에서 관리되며, 주로 개발/프로덕션 환경 등을 구분해 다른 설정값을 적용할 때 사용됩니다. 이런 방식도 결국은 운영체제가 제공하는 '환경변수' 개념을 차용한 것입니다.