TypeScript 환경변수 설정하고 싶을때

1. .env 파일을 src밖에 만든다. 

2. REACT_APP_NAVER 이런식으로 앞에 REACT_APP_을 꼭 붙인다

3. react-app-env.d.ts 파일을 만들어 타입을 지정! .d.ts 만 붙이고 앞에는 자유

/// <reference types="react-scripts" />

declare namespace NodeJS {

    interface ProcessEnv {

        NODE_ENV: 'development' | 'production' | 'test';

        REACT_APP_NAVER_CLIENT_ID: string;

        REACT_APP_NAVER_CLIENT_SECRET: string;

        REACT_APP_KAKAO_CLIENT_ID: string;

        REACT_APP_GOOGLE_CLIENT_ID: string;

        REACT_APP_GOOGLE_CLIENT_SECRET: string;

        PORT: number;

    }

}

 

4.config.ts

// Contents of src/config.ts

import {config as configDotenv} from 'dotenv'

import {resolve} from 'path'

switch(process.env.REACT_APP_NAVER_CLIENT_ID || process.env.REACT_APP_KAKAO_CLIENT_ID || process.env.REACT_APP_GOOGLE_CLIENT_ID) {

  case "development":

    console.log("Environment is 'development'")

    configDotenv({

      path: resolve(__dirname, "../.env.development")

    })

    break

  case "test":

    configDotenv({

      path: resolve(__dirname, "../.env.test")

    })

    break

  // Add 'staging' and 'production' cases here as well!

  default:

    throw new Error(`'NODE_ENV' ${process.env.REACT_APP_NAVER_CLIENT_ID || process.env.REACT_APP_KAKAO_CLIENT_ID|| process.env.REACT_APP_GOOGLE_CLIENT_ID} is not handled!`)

}