개발 모드에서는 리다이렉트 로그인이 작동되지 않아 테스트가 어려워 개발 모드, 배포 모드 분기처리하여 개발 모드에서는 팝업 로그인, 배포 모드에서는 리다이렉트 로그인이 되도록 처리하는 과정에서 import.meta.env.MODE 값에 대해 알게 되었음.
혹시나 또 분기 처리해야 할 경우가 생길까봐 기록차 남겨둠!
import.meta.env.MODE란?
Vite와 같은 모듈 번들러(Module Bundler)를 사용하는 최신 프런트엔드 프로젝트에서 현재 애플리케이션이 구동되고 있는 환경(모드)을 알려주는 문자열 값
MODE의 역할과 사용처
이 값은 빌드 설정이나 코드 내부의 조건부 로직을 환경에 따라 다르게 적용할 때 핵심적으로 사용됩니다.
1. 주요 모드 값
일반적으로 다음과 같은 값을 가집니다.
development(개발 모드):npm run dev와 같이 개발 서버를 실행할 때 기본값입니다.
production(배포/운영 모드):npm run build와 같이 최종 배포용 파일을 빌드할 때 기본값입니다.
- 코드가 최적화, 압축(Minify)되어 성능을 높이는 데 중점을 둡니다.
- 사용자 정의 모드 (Custom Modes):
vite --mode staging처럼 커맨드 라인에 특정 모드를 지정하면 해당 문자열(staging)이 값이 됩니다. 테스트(staging)나 베타 환경 등을 따로 구분할 때 유용합니다.
2. 코드 내 사용 예시
애플리케이션이 어떤 환경에서 실행되는지에 따라 다른 동작을 하도록 만들 때 사용됩니다.
JavaScript
// 환경 변수에 따라 다른 API 엔드포인트를 사용합니다.
if (import.meta.env.MODE === 'production') {
// 실제 서비스 API 주소
const API_URL = 'https://api.myservice.com/v1';
} else {
// 로컬 개발용 API 주소
const API_URL = 'http://localhost:3000/v1';
}💡 import.meta.env란?
import.meta는 모듈에 대한 메타 정보(예: 모듈의 URL)를 제공하는 표준 JavaScript 객체이며, 빌드 도구는 여기에 env 속성을 추가하여 환경 변수를 노출시킵니다.
import.meta.env 객체는 MODE 외에도 다음과 같은 정보를 포함할 수 있습니다:
import.meta.env.BASE_URL: 앱이 제공되는 기본 URL 경로
import.meta.env.PROD: 현재 모드가production인지 여부를 나타내는 boolean 값
import.meta.env.DEV: 현재 모드가development인지 여부를 나타내는 boolean 값
import.meta.env.VITE_...: 사용자가.env파일 등을 통해 정의한 사용자 정의 환경 변수 (접두사로 구분)
이 방식은 기존의 process.env.NODE_ENV를 브라우저 환경에서 직접 사용하기 어렵거나 복잡했던 문제를 해결하고, 모던 프런트엔드 환경에서 환경 변수를 다루는 표준화된 방법을 제공합니다.
