React에서 dotenv사용하는법

ENV란?

• 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이다.
  환경변수 파일을 외부에 만들어 포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용하는 방법이다.

Installation

yarn 을 통한 설치

yarn add dotenv

npm 을 통한 설치

npm install --save dotenv

.env사용하기

프로젝트 루트경로에 (.env)파일을 생성하고 다음과 같이 작성한다.

//.env
SERVER_PORT=3000
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=YOU_Password
API_KEY=YOU_API_KEY

변수명 = 값 형태를 갖고 있다.

환경변수(dotenv)사용하기

프로젝트 상단에 .env를 불러와 준다.

// index.js
require('dotenv').config();
console.log(process.env.API_KEY) //YOU_API_KEY

위 결과처럼 .env를 사용하여 하드코딩 하지않고, 숨기고 싶은 값들을 사용할수 있다.

React에서 환경변수 사용하기

React에서 위 방법과 모든것이 다 똑같지만 .env에서 변수명이 REACT_APP로 시작되게 작성하면 된다. 만약 REACT_APP를 작성하지 않고 사용하면 무시되게 된다.

//.env
REACT_APP_API_KEY=YOU_API_KEY
DB_USER=root

사용 방법은 위와 같다.

// index.js
require('dotenv').config();
console.log(process.env.REACT_APP_API_KEY) //YOU_API_KEY
console.log(process.env.DB_USER) //undefind