React 환경 변수 : .env

2024. 12. 5. 10:34·TypeScript
반응형

소개

React 애플리케이션을 개발할 때 API 키, 서버 URL 등의 민감한 정보나 환경별 설정을 관리해야 할 때가 있습니다. 이럴 때 .env 파일을 사용하면 효과적으로 환경 변수를 관리할 수 있습니다.

환경 변수 기본 설정

.env 파일 생성

# .env 파일은 프로젝트 루트 디렉토리에 생성합니다.
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your_api_key_here
REACT_APP_ENV=development

주의사항

  1. 모든 환경 변수는 REACT_APP_ 접두사로 시작해야 합니다.
  2. .env 파일은 .gitignore에 추가하여 버전 관리에서 제외해야 합니다.
  3. 변수 값에 따옴표를 사용하지 않습니다.

환경별 .env 파일 관리

# .env.development (개발 환경)
REACT_APP_API_URL=http://localhost:8000
REACT_APP_DEBUG=true

# .env.production (운영 환경)
REACT_APP_API_URL=https://api.production.com
REACT_APP_DEBUG=false

# .env.test (테스트 환경)
REACT_APP_API_URL=http://localhost:8080
REACT_APP_DEBUG=true

환경 변수 사용하기

컴포넌트에서 사용

// ApiService.ts
const API_URL = process.env.REACT_APP_API_URL;
const API_KEY = process.env.REACT_APP_API_KEY;

export const fetchData = async () => {
  try {
    const response = await fetch(`${API_URL}/data`, {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    });
    return await response.json();
  } catch (error) {
    console.error('API 호출 실패:', error);
    throw error;
  }
};

// App.tsx
function App() {
  const isDevelopment = process.env.REACT_APP_ENV === 'development';

  return (
    <div>
      <h1>환경: {process.env.REACT_APP_ENV}</h1>
      {isDevelopment && (
        <div>디버그 모드 활성화</div>
      )}
    </div>
  );
}

TypeScript에서 타입 정의

// react-app-env.d.ts
declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'test';
    REACT_APP_API_URL: string;
    REACT_APP_API_KEY: string;
    REACT_APP_ENV: 'development' | 'production' | 'test';
    REACT_APP_DEBUG: string;
  }
}

고급 활용법

환경 변수 유효성 검사

// config.ts
interface Config {
  apiUrl: string;
  apiKey: string;
  debug: boolean;
}

const getConfig = (): Config => {
  const requiredVars = ['REACT_APP_API_URL', 'REACT_APP_API_KEY'];

  for (const varName of requiredVars) {
    if (!process.env[varName]) {
      throw new Error(`Missing required environment variable: ${varName}`);
    }
  }

  return {
    apiUrl: process.env.REACT_APP_API_URL!,
    apiKey: process.env.REACT_APP_API_KEY!,
    debug: process.env.REACT_APP_DEBUG === 'true'
  };
};

export const config = getConfig();

동적 환경 변수 주입

// .env.template
REACT_APP_API_URL=${API_URL}
REACT_APP_API_KEY=${API_KEY}

// setupEnv.js
const fs = require('fs');
const path = require('path');

const generateEnvFile = () => {
  const template = fs.readFileSync('.env.template', 'utf8');
  const envContent = template
    .replace('${API_URL}', process.env.API_URL)
    .replace('${API_KEY}', process.env.API_KEY);

  fs.writeFileSync('.env', envContent);
};

generateEnvFile();

보안 고려사항

.env 파일 보호

# .gitignore
.env
.env.local
.env.*
!.env.example

예제 환경 변수 파일 제공

# .env.example
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your_api_key_here
REACT_APP_ENV=development

민감한 정보 관리

// 직접적인 값 노출 방지
const API_KEY = process.env.REACT_APP_API_KEY;
console.log('API 키가 설정되었습니다.'); // 값 자체는 출력하지 않음

// 프록시 서버 활용
const API_URL = process.env.NODE_ENV === 'development' 
  ? '/api'  // 개발 환경에서는 프록시 사용
  : process.env.REACT_APP_API_URL;

배포 시 CI/CD 환경 설정

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Create .env file
        run: |
          echo "REACT_APP_API_URL=${{ secrets.API_URL }}" >> .env
          echo "REACT_APP_API_KEY=${{ secrets.API_KEY }}" >> .env

      - name: Build
        run: npm run build

마치며

환경 변수를 적절히 관리하는 것은 안전하고 유지보수가 쉬운 React 애플리케이션을 만드는 데 매우 중요합니다. .env 파일을 통해 환경별로 다른 설정을 관리하고, 민감한 정보를 보호하며, 배포 프로세스를 자동화할 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

'TypeScript' 카테고리의 다른 글

[React Query] QueryClient : 효율적인 상태관리와 데이터 캐싱  (0) 2024.12.19
프론트엔드와 백엔드 간 Enum 동기화  (0) 2024.12.07
회원가입 폼 쉽게 만들기 : react-hook-form  (1) 2024.11.22
3D 카드 플립 효과로 배우는 실전 Tailwind 활용법  (0) 2024.11.20
[Next.js 실전] Image 컴포넌트로 웹 성능 최적화하기  (0) 2024.11.18
'TypeScript' 카테고리의 다른 글
  • [React Query] QueryClient : 효율적인 상태관리와 데이터 캐싱
  • 프론트엔드와 백엔드 간 Enum 동기화
  • 회원가입 폼 쉽게 만들기 : react-hook-form
  • 3D 카드 플립 효과로 배우는 실전 Tailwind 활용법
코샵
코샵
나의 코딩 일기장
    반응형
  • 코샵
    끄적끄적 코딩 공방
    코샵
    • 분류 전체보기 (725)
      • 스마트팜 (0)
      • 상품 추천 (223)
      • MongoDB (4)
      • 하드웨어 (17)
      • 일기장 (4)
      • 파이썬 (130)
        • Basic (41)
        • OpenCV (8)
        • Pandas (15)
        • PyQT (3)
        • SBC(Single Board Computer) (1)
        • 크롤링 (14)
        • Fast API (29)
        • Package (6)
      • Unity (138)
        • Tip (41)
        • Project (1)
        • Design Pattern (8)
        • Firebase (6)
        • Asset (2)
      • Linux (4)
      • C# (97)
        • Algorithm (11)
        • Window (7)
      • TypeScript (51)
        • CSS (10)
      • Git (11)
      • SQL (5)
      • Flutter (10)
        • Tip (1)
      • System (1)
      • BaekJoon (6)
      • Portfolio (2)
      • MacOS (1)
      • 유틸리티 (1)
      • 서비스 (6)
      • 자동화 (3)
      • Hobby (10)
        • 물생활 (10)
        • 식집사 (0)
  • 인기 글

  • 태그

    C#
    programmerlife
    learntocode
    Python
    리뷰이관
    devlife
    유니티
    리스트
    codingcommunity
    쇼핑몰리뷰
    스마트스토어리뷰
    스크립트 실행
    믈레코비타멸균우유
    ipcamera
    카페24리뷰
    programming101
    상품 리뷰 크롤링
    appdevelopment
    리뷰관리
    list
    rtsp
    unity
    라떼우유
    카페24리뷰이관
    cv2
    긴유통기한우유
    스크립트 실행 순서
    셀레니움
    파이썬
    codingtips
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
코샵
React 환경 변수 : .env
상단으로

티스토리툴바