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)
  • 인기 글

  • 태그

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

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

티스토리툴바