React :: 환경변수(.env) 셋팅하기

토큰이나 API 키 같은 것은 하드코딩으로 집어 넣으면 배포 시 개발자 도구에 모두 드러나기 때문에 최대한 숨겨서 코딩을 진행해야 한다.

 

이때 사용할 수 있는 방법 중 하나가 "환경변수" 이다.

 

그럼에도..

 

CRA 공식 문서에서는 다음과 같은 주의 사항을 전달한다.

WARNING : Do not store any secrets (such as private API keys) in your React App

 

비공개 API 키 같은 값을 저장하는 것을 지양하는 이유는 환경 변수가 '빌드'에 내장되어 누구든지 이를 확인할 수 있기 때문.

 

1. .env 파일 생성

 

최상단 루트에 .env 파일을 생성해주도록 하자.

.env 파일은 꼭 프로젝트 파일 최상단에 있어야 함.

 

2. .gitignore 설정

 

.env
.env.local
.env.development.local
.env.test.local
.env.production.local

 

만든 env 파일을 git에 업데이트 되지 않도록

gitignore 에 추가해두도록 하자.

 

env 파일이 git에 올라가게 되면 git에서 경고 연락이 온다고 함. . .

그리고 git에 env 파일까지 포함해서 올리게 되면 env로 변수들을 뺀 이유가 없어지게 된다.

 

3. 환경 변수 선언

REACT_APP_API_URL = /url
REACT_APP_GRID_KEY = /key

 

위와 같은 방법으로 선언해준다.

 

1. 변수명은 반드시 REACT_APP_ 으로 시작

2. 따옴표, 쌍따옴표 같은 quote 사용 금지. = 로 blank 없이 선언

 

여기서 잠깐

env 설정 후 적용하고 싶다면 프론트 서버를 껐다가 켜주어야 함. (재구동 필요)

 

4. 환경 변수 사용

환경 변수의 경우 별도의 import 가 필요없다.

아래와 같이 사용하면 된다.

 

.js 에서 사용

process.env.REACT_APP_API_URL

const URL = process.env.REACT_APP_API_URL

 

이런 식으로 process.env 접두사를 붙혀 풀네임으로 불러와 사용하면 된다.

 

.html 에서 사용

 

index.html 에서 사용하고 싶을 시에는 위와 같은 형식으로 %를 감싸서 사용해주면 된다.