.env
- REACT & NODE
- 2025. 9. 17.
⏺ 환경변수 파일들의 상세 설명
📊 환경변수 파일 우선순위 (높은 순서대로)
1. .env.{NODE_ENV}.local (최우선)
2. .env.local
3. .env.{NODE_ENV}
4. .env (기본값)
📁 각 파일의 역할과 사용 시나리오
🔹 .env (기본 환경변수)
# 모든 환경에서 공통으로 사용되는 기본값
NODE_ENV=development
API_BASE_URL=https://api.myapp.com
APP_NAME=MyApp
- 용도: 프로젝트 전체 기본 설정
- git: ❌ 커밋하지 않음 (보안 정보 포함 가능)
- 예시: API URL, 앱 이름, 기본 포트 등
🔹 .env.local (개인 로컬 설정)
# 개발자 A의 개인 설정
API_BASE_URL=http://localhost:3000
DEBUG_MODE=true
DEVELOPER_NAME=김개발
- 용도: 개발자마다 다른 개인적인 로컬 설정
- git: ❌ 절대 커밋하지 않음
- 예시: 로컬 서버 주소, 개인 API 키, 디버그 설정
🔹 .env.development.local (개발 환경 개인 설정)
# NODE_ENV=development일 때만 적용되는 개인 설정
REACT_NATIVE_DEBUGGER=true
LOG_LEVEL=debug
HOT_RELOAD=true
- 용도: 개발 모드에서만 사용하는 개인 설정
- git: ❌ 커밋하지 않음
- 예시: 디버거 설정, 로그 레벨, 개발 도구 설정
🔹 .env.test.local (테스트 환경 개인 설정)
# NODE_ENV=test일 때만 적용되는 개인 설정
TEST_DATABASE_URL=sqlite://test_local.db
MOCK_EXTERNAL_API=true
SKIP_SLOW_TESTS=true
- 용도: 테스트 실행 시 개인별 설정
- git: ❌ 커밋하지 않음
- 예시: 로컬 테스트 DB, 모킹 설정, 테스트 스킵 설정
🔹 .env.production.local (프로덕션 환경 개인 설정)
# NODE_ENV=production일 때만 적용되는 개인 설정
# (일반적으로 CI/CD나 서버에서 사용)
SENTRY_DSN=your_production_sentry_key
PERFORMANCE_MONITORING=true
- 용도: 프로덕션 빌드나 배포 시 개인/서버별 설정
- git: ❌ 커밋하지 않음
- 예시: 프로덕션 API 키, 모니터링 설정
🎯 실제 사용 예시
개발자 A의 환경:
# .env.local
API_BASE_URL=http://localhost:8080
DEVELOPER_TOOLS=enabled
# .env.development.local
DEBUGGER_PORT=9090
개발자 B의 환경:
# .env.local
API_BASE_URL=http://192.168.1.100:8080
DEVELOPER_TOOLS=disabled
# .env.development.local
DEBUGGER_PORT=9091
⚠️ 중요한 보안 원칙
1. .local 접미사가 붙은 모든 파일: 개인 설정이므로 git에 커밋하면 안됨
2. 실제 API 키, 비밀번호, 토큰: 절대 git에 커밋하면 안됨
3. .env.example: 예시 파일로 git에 커밋해서 다른 개발자가 참고할 수 있게 함
이렇게 체계적으로 관리하면 팀원들이 각자의 개발 환경을 유지하면서도 프로젝트 설정을 쉽게 공유할 수 있습니다!
> NODE_ENV=development 나 NODE_ENV=production 과 같은 플래그와 함께 실행해야해? 만약에 없으면 기본은 development 야?
env 파일들은 표준인거야? react-native 프로젝트가 알아서 저 파일들을 NODE_ENV= 값을 넣어서 실행하면 참조하는거야?
만약에 android 폴더에서 gradle assembleBundle 같은거 하면 어떻게 돼? 이거할 때도 NODE_ENV 넣어줘야 해? 보통 나는
실행을 android studio 랑 xcode 에서 직접하거든?
⏺ 좋은 질문입니다! React Native 환경변수 시스템에 대해 자세히 설명드리겠습니다.
🔍 NODE_ENV와 .env 파일 동작 방식
1. NODE_ENV 기본값
# NODE_ENV가 설정되지 않은 경우
NODE_ENV가 undefined → React Native는 development로 간주
기본 동작:
- NODE_ENV 없음 → development 모드
- React Native는 기본적으로 development 모드로 실행
2. .env 파일 로딩 순서
React Native + Expo에서는 다음 순서로 로딩:
# NODE_ENV=development일 때
1. .env.development.local ← 최우선
2. .env.local
3. .env.development
4. .env ← 기본값
# NODE_ENV=production일 때
1. .env.production.local ← 최우선
2. .env.local
3. .env.production
4. .env ← 기본값
3. Android Studio / Xcode에서 실행할 때
⏺ 📱 실제 실행 환경별 동작
1. Android Studio에서 실행
# Android Studio → Run 버튼 클릭
NODE_ENV가 설정되지 않음 → development 모드
↓
.env.local → .env 순서로 로딩
2. Terminal에서 실행
# package.json script 사용
npm run android # NODE_ENV=development
npm run android:release # NODE_ENV=production
# 직접 명령어
NODE_ENV=production npx react-native run-android --mode=release
3. Gradle 직접 실행
# android 폴더에서 직접 실행
cd android
./gradlew assembleRelease
# 이 경우 NODE_ENV 설정이 없음 → development로 간주
# 환경변수를 명시적으로 설정하려면:
NODE_ENV=production ./gradlew assembleRelease
🛠️ 실제 설정 방법
Option 1: IDE 환경변수 설정 (권장)
Android Studio:
1. Run Configuration 편집
2. Environment Variables에 NODE_ENV=development 추가
Xcode:
1. Scheme 편집 (Product → Scheme → Edit Scheme)
2. Run → Arguments → Environment Variables
3. NODE_ENV = development 추가
Option 2: .env 파일 활용 (현재 방식)
Option 3: 환경별 .env 파일 생성
현재 상황 (Android Studio/Xcode 직접 실행)
✅ 설정 완료된 것:
- .env → NODE_ENV=development (기본값)
- .env.development → 개발 환경 설정
- .env.production → 프로덕션 환경 설정
✅ 결과:
- Android Studio Run → development 모드 자동 적용
- Xcode Run → development 모드 자동 적용
- Terminal npm run android → development 모드
- Terminal npm run android:release → production 모드
Gradle 직접 실행 시 (선택사항)
# 개발 빌드
cd android
NODE_ENV=development ./gradlew assembleDebug
# 릴리즈 빌드
NODE_ENV=production ./gradlew assembleRelease
결론
1. NODE_ENV 명시 없이도 작동: .env 파일로 기본값 설정됨
2. IDE에서 직접 실행: 별도 설정 없이 development 모드로 작동
3. 환경변수 파일: React Native + Expo 표준 방식
4. Gradle 직접 실행: NODE_ENV 설정 권장하지만 필수 아님
현재 프로젝트에서는 환경변수를 직접 하드코딩으로 사용하고 있네요. React Native에서 환경변수를 가져오는 방법들을
보여드리겠습니다:
React Native 환경변수 사용 방법
1. Metro 기본 방식 (추천)
React Native + Expo에서 기본 지원:
// 환경변수 직접 접근
const API_URL = process.env.EXPO_PUBLIC_API_URL;
const NODE_ENV = process.env.NODE_ENV;
// .env 파일에서:
// EXPO_PUBLIC_API_URL=https://api.example.com
// NODE_ENV=development
2. babel-plugin-dotenv 방식
babel.config.js 설정으로 .env 파일 자동 로딩:
// 코드에서 사용
const config = {
apiUrl: process.env.API_BASE_URL,
debugMode: process.env.DEBUG_MODE === 'true',
nodeEnv: process.env.NODE_ENV
};
3. 현재 프로젝트 개선 방안
현재 config.ts를 환경변수 기반으로 변경:
// src/common/config.ts
export const NODE_ENV = process.env.NODE_ENV || 'production';
export const API_ENDPOINT = process.env.API_BASE_URL || 'https://myapp.com/api';
export const DEBUG_MODE = process.env.DEBUG_MODE === 'true';
// 환경별 조건부 설정
export const LOG_LEVEL = NODE_ENV === 'development' ? 'debug' : 'error';
4. TypeScript 타입 안전성
// types/env.d.ts
declare module '@env' {
export const API_BASE_URL: string;
export const DEBUG_MODE: string;
export const NODE_ENV: string;
}
현재 상황
1. 패키지에서 NODE_ENV 설정: ✅ 완료
2. .env 파일들: ✅ 생성됨
3. 코드에서 하드코딩: ❌ 개선 필요
현재는 config.ts에서 값들이 하드코딩되어 있어서 .env 파일의 이점을 활용하지 못하고 있습니다. process.env.변수명으로 가져와서
사용하면 환경별로 다른 설정을 자동으로 적용할 수 있습니다.
> 안드로이드 배포를 위해서 빌드할 때는 ./gradlew bundleRelease 명령어를 사용해서 콘솔에서 하기 때문에 NODE_ENV=production 을
붙일 수 있다지만, ios 는 archive 를 클릭하는데.. 그러면 이걸 어떻게 적용함? 그리고 현재는 상관없지? 어차피 하드코딩되어
있어서 development 이건, production 이건 간에 전부 같은 값들이니깐? 어디 영향 받은 곳이 있어?
1. 현재 상황 - 하드코딩으로 인한 영향 없음 ✅
// config.ts에서 하드코딩
export const NODE_ENV: string = 'production';
export const API_ENDPOINT: string = 'https://myapp.com/api';
- 현재는 NODE_ENV 설정이 전혀 의미 없음
- development든 production이든 항상 같은 값
- .env 파일 존재하지만 코드에서 사용 안함
2. iOS Archive에서 환경변수 설정
iOS Xcode Archive 시 NODE_ENV 설정 방법:
Option 1: Scheme 환경변수 설정
1. Xcode → Product → Scheme → Edit Scheme
2. Run/Archive → Arguments 탭
3. Environment Variables → NODE_ENV = production
Option 2: Build Settings
# Xcode Build Settings에서
GCC_PREPROCESSOR_DEFINITIONS = NODE_ENV=production
Option 3: Script Phase 추가
# Build Phases → New Run Script Phase
export NODE_ENV=production
3. 실제 사용되는 곳
코멘트에 따르면 NODE_ENV는 현재:
- devTools 설정 (거의 사용 안함)
- push token 관련
하지만 실제 코드에서는 **하드코딩으로 'production'**이라서 어떤 설정을 해도 변화 없습니다.
4. 결론
- 현재: NODE_ENV 설정해도 의미 없음 (하드코딩)
- iOS Archive: 환경변수 설정 가능하지만 효과 없음
- Android gradle: 마찬가지로 효과 없음
- 실제 영향 받는 곳: 없음 (전부 같은 값)
환경변수 시스템을 실제로 활용하려면 config.ts를 process.env.NODE_ENV로 수정해야 합니다.
'REACT & NODE' 카테고리의 다른 글
| 안드로이드에서는 실제 배포된 앱이 아니면 결제가 실제로 이루어지지 않습니다. (0) | 2025.09.18 |
|---|---|
| directly 'pod install' deprecated, rosetta2, intell x86 vs arm64 (0) | 2025.09.17 |
| React Native 0.81 and Expo 54 (0) | 2025.09.16 |
| React Native 0.79 and Expo 53 (2) | 2025.07.02 |
| React 19 and Next.js 15 (0) | 2025.05.01 |