구글, 네이버, 카카오 등에서 제공하는 API를 활용해서 프로젝트를 진행하면
public/index.html에 <script> 태그를 넣어줄 때가 있다.
보통 src에 API KEY를 입력하게 되는데, 하드 코딩하면 보안 위험이 있다.
이러한 API KEY 어떻게 관리할지, 보편적인 방법을 알아보고자 한다.

방법

.env 파일 생성

최상위 폴더에 .env 파일 생성한다.
여기서 최상위 폴더란 프로젝트의 폴더를 의미한다.
아래 이미지를 참고하면 이해가 빠르다.

API KEY 입력하기

예를들어, 구글 맵을 사용하기 위해 발급받은 API KEY가 abcd1234라면
아래와 같이 .env 파일에 작성한다.

API KEY의 이름은 REACT_APP_ + 본인이 원하는 이름으로 해줘야한다.
가령, GOOGLE_MAP_API_KEY라고 이름을 짓고 싶으면,
REACT_APP_GOOGLE_MAP_API_KEY 이런 식으로 써야한다.

// .env

REACT_APP_GOOGLE_MAP_API_KEY = 'abcd1234'

반드시 REACT_APP이라는 접두사를 사용해줘야한다는 것을 기억하자
그렇지않으면 create-react-app이 이것을 인지하지 못하기 때문이다.
이와 관련된 stackoverflow 질문을 참고하면 더 좋을 것 같다.

.gitignore에 .env 추가하기

보통 Github에 본인의 코드를 push해서 관리한다.
이 때, .env 파일이 같이 올라가면 어떻게 될까?
개인 API KEY를 누군가가 나쁜 용도로 사용할 수도 있을 것이다.

따라서, .gitignore에 .env 파일을 입력해서 push를 미연에 방지하자.

// .gitignore

.env

API KEY 사용하기

React 프로젝트에서 API KEY를 사용한다면 크게 두 가지의 경우가 있을 것이다.
더 있을 수도 있지만 필자가 경험한 것은 두 가지입니다 ㅎㅎ

1. public/index.html에서 <script> 태그의 src 속성에 입력하는 경우
2. src 폴더의 js, jsx, ts, tsx 파일에서 사용하는 경우

public/index.html

public/index.html에서 <script> 태그의 src 속성에 입력하는 경우에는 % 기호를 활용한다.

%.env에 저장해놓은 이름%

이런 식으로 말이다.

// .env

REACT_APP_GOOGLE_MAP_API_KEY = 'abcd1234'

위 예시에 있는 API KEY를 src에 넣어야한다면 아래와 같이 사용해야할 것이다.

%REACT_APP_WRITE_ANY_NAME%

실제로 src 속성에 적용한 모습은 아래와 같다.

<!--public/index.html-->

<script
  async
  src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAP_API_KEY%"
></script>

src/ ~.js, ~.jsx, ~.ts, ~.tsx

src 폴더의 js, jsx, ts, tsx 파일에서 사용하는 경우에는 process.env를 활용한다.

// App.js

function App() {
  console.log(process.env.REACT_APP_GOOGLE_MAP_API_KEY); // API KEY 출력
}

export default App;

참고 자료

stackoverflow 질문글
lifeisbeautiful님 블로그
edie_ko님 블로그
albaneo0724님 블로그
kevink1113님 블로그