리액트에서 .env 사용하기 (카카오 로그인)

팀 프로젝트 중 카카오 로그인 기능을 구현하려고 하던 중, env파일에 대해서 처음 알게되어서 어떻게 쓰는 것인지 등 공유하려고 한다.

 

먼저 env란 뭘까?

 

쉽게 얘기하면 깃허브에 올리면 안되는 것들을 환경변수를 정의하여 변수로 받아오는 것으로 생각하면 되겠다.

이 env파일은 항상 최상위 루트에 있어야 한다.

 

또한 리액트(CRA환경) 에서는 REACT_APP을 변수명 맨 처음에 꼭 넣어주어야 한다. 

그리고 process.env로 전역에서 접근가능하다.

 

 

const CLIENT_ID = process.env.REACT_APP_REST_API_KEY;

 

const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URL;

 

 

주의할 점은 절대 쌍따옴표나 따옴표를 붙이지 말 것!! 붙이면 undefined가 발생한다고 한다.

올바른 표현

REACT_APP_REST_API_KEY=secret입니닿ㅎ

 

잘못된 표현

REACT_APP_REST_API_KEY="secret입니닿ㅎ"                                                                                                                              

 

 

 

 

 

출처: https://velog.io/@rmaomina/react-env