[React] 리액트 프로젝트에서 환경변수 사용하기 (with. dotenv)

 

*환경변수

프로젝트를 진행하다 보면 간혹 민감한 정보들이 변수 내 사용되는 경우가 있다. 예를 들어, 포트번호라던가 API라던가 하는 부분들은 때로는 공개되지 않아야 하는 경우가 있다. 실수로 깃에 업로드라도 되었다가는...상상만 해도 끔찍하다.

이러한 경우를 대비해 널리 쓰이는 것이 환경변수다. 공개되지 않아야 하는 정보들은 직접 입력하지 않고 환경변수에 담아 프로젝트 내애서 활용하는 것이다. Node.js에서 환경변수를 사용하기 위해 가장 많이 사용하는 모듈 중 하나가 바로 dotenv 모듈이다.

* dotenv module

dotenv 모듈을 사용하는 방법은 다음과 같다. 먼저 npm 혹은 yarn을 이용해 설치해준다.

# with npm 
npm install dotenv
 
# or with Yarn 
yarn add dotenv

설치가 완료되었다면, 프로젝트 최상단 디렉토리에 .env 파일을 생성한다. 위치가 아주아주아주 중요하다. 헷갈리면 그냥 package.json 과 동일선상에 생성한다고 이해해도 좋을 것 같다. 생성한 파일 내에 키-값 형태로 저장하고자 하는 환경변수를 입력한다.

PORT=3000
USER=POWELLSTREET

환경변수를 사용하고자 하는 파일 상단에 아래 코드를 입력한다. 이후 해당 변수가 필요한 경우 'process.env.변수명' 의 형태로 가져와 사용하면 된다. 크게 어렵지 않다.

import dotenv from 'dotenv'
dotenv.config()

console.log(process.env.PORT) // 3000;
console.log(process.env.USER) // POWELLSTREET;

 

* React 프로젝트에서 dotenv 사용하기

위 과정을 따라 환경변수를 사용하다보면 문제가 발생하는 경우가 있다. 리액트 프로젝트를 진행중인 사람이라면 dotenv 모듈을 사용해 똑같이 환경변수를 사용하려고 시도했을 때, 환경변수를 읽어오지 못하는 것을 발견했을 것이다. 사실 이 포스팅도 이것 때문에 썼다.

처음엔 .env 파일 위치가 잘못된건가 싶어 이것저것 만져보다가 결국 구글의 도움을 받게 되었다. 그리고 아래의 글을 발견했다!

create react app not picking up .env files?

대개의 경우 리액트 프로젝트를 시작할 때 별도의 설정 없이 create-react-app을 사용해 프로젝트를 시작한다. 이 경우, 환경변수를 사용할 때는 다음의 규칙을 지켜주어야 한다. 환경변수 앞에 'REACT_APP_'을 붙여주는 것이다. 이에 맞추어 환경변수를 수정해보면 아래와 같다.

REACT_APP_PORT=3000
REACT_APP_USER=POWELLSTREET

사용할 때는 아래와 같이 수정된 환경변수명을 불러오면 된다. 이렇게 하면 리액트 프로젝트 내에서도 문제없이 환경변수를 사용할 수 있다.

import dotenv from 'dotenv'
dotenv.config()

console.log(process.env.REACT_APP_PORT) // 3000;
console.log(process.env.REACT_APP_USER) // POWELLSTREET;

 

고민 해결!