[React] .env 환경변수 설정하기

환경변수 파일이란?

- 애플리케이션이 실행될 때 특정 값을 넘길 수 있는 변수를 의미한다. 웹 애플리케이션 관점에서는 .env 파일에 정의된 변수를 의미하며, 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 사용한다.

-  API_KEY, DB 정보, TOKEN등 git, 오픈소스에 올리면 안되는 값들을 따로 저장하고 소스코드 내에서 하드코딩하지 않고 변수로 사용할 수 있다.

 

.env 파일 생성하기

- 프로젝트 최상위 루트에 .env 파일을 생성한다.

- 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오면 보안과 유지보수가 용이하다.

최상위 루트에 .env 파일을 생성

.env 사용하기

process.env.REACT_APP_ 는 예약어이므로, 다른 이름은 사용하면 React가 인식하지 못한다. 때문에 모든 환경변수 앞에 REACT_APP_을 붙여줘야 한다.

 

1. 토큰 등 사용할 값을 입력 및 저장한다.

# .env
REACT_APP_변수이름 = 값

2. 사용할 js 파일에서 변수에 담아 사용 가능하다.

const TOKEN = {
	key : process.env.REACT_APP_변수이름
}

 

.gitignore 추가

.gitignore에 .env를 추가하여 환경변수가 같이 git에 push되지 않도록 한다.