환경변수를 설정하여 api key 숨기기.

[!이시중] 2021년 11월 20일 12:00에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/61 에서 확인할 수 있음.

---

https://hyermione.tistory.com/9

axios를 통한 오픈 API 연결하기

상단 포스팅에서 axios를 연결하며, api key는 개인 발급을 받는 것이니 환경 변수를 통하여 관리하라고 언급했었다. 그러면서 관련 포스팅을 연결했는데, 해당 포스팅은 웹팩으로 설치한 경우라서 해당이 안 되시는 분들에게는 매우 불친절한 설명이라고 생각이 들었다.

 

https://hyermione.tistory.com/7

webpack-server로 설치 후, 환경변수 설정하기

하여 조금 더 친절한 설명을 하고자 포스팅을 준비하였다. 이 포스팅의 목표는 개인 발급 키를 .env 파일에 숨기고, git hub에 올리지 않음으로써 키를 오픈하지 않고, 개인적으로 사용되게 하는 것이 목표이다.

 

해당 포스팅에 사용된 환경은 react CRA이다. 이거로 설치하면 내가 요즘 공부하는 리액트, 제스트 등등 다 자동 설치되어 참 편하다.

npx create-react-app 프로젝트 이름 // 프로젝트 이름에 .를 넣어주면 해당 폴더에 바로 설치된다.

물론 오늘 사용할 dotenv도 CRA에 설치되어 있다. 혹시 설치가 안된 상태로 포스팅을 보시는 분들은 다음을 참고하시길 바란다.

npm i dotenv

https://www.npmjs.com/package/dotenv

dotenv

설치가 되었다고 가정하에 먼저 최상단에 .env 파일을 생성한다. 보통 env 파일이란 app이 실행될 때, 사용자가 설정한 특정 값을 값 그대로가 아닌 변수로 변경하여 넘겨주는 변수를 모아둔 파일이라고 생각하면 된다. 대표적으로 api key와 같은 부분들이 있다.

이제 해당 파일 안에 변수를 선언해주어야 하는데, react는 반드시 REACT_APP으로 시작하는 변수를 vue는 반드시 VUE_APP으로 시작하는 변수를 설정해주어야 한다. 규칙이다.

 

여기서 환경마다 다르게 실행하려면 .env.test, .env.development와 같은 식으로 파일을 새로 만들어 주면 되는데, 나는 테스트용이니까 하나만 만들어서 사용해도 무방했다.

 

env에 설정한 파일들이 잘 실행되는지 확인하려면 반드시 개발 서버를 재실행해야 확인이 가능하다. 간혹 새로고침만으로 안된다고 멘붕이신 분들이 많은데, 재실행해야 해당 세팅이 적용된다.

 

js파일에

console.log(process.env.REACT_APP_설정한변수명);

을 찍어보면 잘 나오는 것을 확인 할 수 있다. 상단에 언급한 것처럼 env 파일은 api key를 숨기기 위한 용도로 올린 것이니까

이런 식으로 자기가 설정한 파일이 올라가지 않도록 한다.