React | .env로 환경변수 간단하게 이용하기

unihit·2021년 1월 30일
2

React

목록 보기
1/1
post-thumbnail

INTRO


카카오 소셜 로그인 기능을 만들면서 카카오 init key를 받아와야 할 일이 생겼다. 처음에는 하드코딩하는 식으로 넣었다가 키의 보안 문제가 걸렸다. 보안 문제 때문에 config.js에 넣고 .gitignore 파일에 config.js 파일을 명시하고 작업했지만 config.js에는 기존의 서버주소를 넣어두고 사용하고 있었기 때문에 이를 따로 관리해줄 필요성을 느꼈다.

.env


그러던중 .env 파일에 넣고 환경변수로 사용하는 방법에 대해서 제안을 읽었고 그 방법을 찾았다. 일반적으로 외부파일(.env)에 환경변수를 정의해서 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. 방법을 찾던 중 대부분 나오는 것은 node.js를 기준으로 하는 조금 복잡한 방법이었는데, REACT용으로 사용하는 매우 간단한 방법을 찾았다.
일단 .env 파일을 프로젝트의 최상위 루트에 만든다. 반드시 최상위 루트에 만들어야 한다!

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

보안이 필요한 환경변수의 유출을 막기 위해서 REACT_APP_으로 시작하지 않는 환경변수는 무시되기 때문에 반드시 변수의 앞에 붙여야 한다!

REACT_APP_KAKAO_INIT_KEY=키 내용;

이런식으로 변수의 맨 앞에 붙이면 된다.

'process.env.환경변수'로 환경변수 불러오기

그리고 해당하는 변수를 사용할 파일에 process.env라는 키워드로 환경변수를 불러오기만 하면 된다!

Kakao.init(process.env.REACT_APP_KAKAO_INIT_KEY);

이런식으로 내가 원하는 키 내용을 .env 파일에서 바로 불러올 수 있다.
그리고 .env 파일은 git에 올라가면 안되기 때문에 .gitignore 파일에 .env를 추가해준다.

Reference


0개의 댓글