React 환경 변수 : .env

소개

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 파일을 통해 환경별로 다른 설정을 관리하고, 민감한 정보를 보호하며, 배포 프로세스를 자동화할 수 있습니다.