환경변수(dotenv 사용)

환경변수의 필요성

1. alpha, stage(real) 및 서버에 따라 달라지는 변수는 빌드할 때 환경변수로 주입한다.
2. 다른 서버를 운영하는데 필요한 코드 및 변수를 모두 들고 있을 필요가 없다.
3. API 키나 계정의 ID, 비밀번호와 같은 기밀 정보를 있는 그대로 코드에 작성하거나, 기밀 정보가 담긴 코드를 Github과 같은 오픈소스에 공개하는 것은 보안적으로 아주 위험한 행동이다.

위의 이유로 환경변수의 사용이 필요하고, dotenv는 .env라는 외부 파일에 중요한 정보를 환경변수로 저장하여 정보를 관리할 수 있게 해준다.

dotenv

dotenv란 .env 파일에 선언한 변수를 process.env에 로드해주는 무의존성 모듈이다.

다시말해 .env 파일을 통해 환경변수를 설정해주는 패키지이다.

path를 통해 .env파일의 절대 경로를 찾고, fs모듈을 통해 .env``파일을 물리적으로 읽어들여 process.env```에 key-value 형식으로 담는다.

dotenv 사용법

1. dotenv 패키지를 찾아서 적용한다.

npm install dotenv

2. .env 파일의 경로를 지정해준다.

const dotenv = require('dotenv');
// dotenv.config() 내에 아무것도 명시해주지 않으면 루트에 있는 .env 파일을 찾아 적용한다.
dotenv.config({
  path: './env/local.env'
});

3. .env 파일을 작성한다.

// .env 파일 예시
FIREBASE_API_KEY=TEST_KEY
FIREBASE_AUTH_DOMAIN=test.firebaseapp.com
FIREBASE_PROJECT_ID=test

4. DefinePlugin을 통해 process.env를 정의해준다.

webpack.DefinePlugin : 모든 자바스크립트 코드에서 접근이 가능한 전역 변수를 선언하기 위해서 사용되는 플러그인이다.

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(process.env),
    }),
  ]
}

5. 환경변수 사용
   단순히 process.env.xxx로 사용하면 됨

# .env #
FOO=foo

/* example.js */
console.log(process.env.FOO); // -> console.log('foo');
// or
if (process.env.FOO === "foo") {
  console.log("FOO!");
}

cf. create-react-app에서 환경변수 사용하는 경우
create-react-app에는 이미 dotenv 패키지가 내장되어 있다.

따라서 별도의 패키지 추가나 Webpack에 대한 설정 없이 .env 파일을 생성해서 변수를 선언하는 것만으로도 환경변수를 사용할 수 있다.

하지만 내부적으로 REACT_APP_으로 시작하는 환경변수만 읽어들이도록 설정을 해두었기 때문에 변수명은 반드시 REACT_APP_으로 시작해야 한다!