[React] 환경변수로 github 에서 Naver Maps API Client ID 숨기기

현재 네이버 지도 API를 사용하는 사이드 프로젝트를 진행중이다.

 

API 공식문서를 보면 다음과 같이 Client ID를 사용하도록 되어있다.

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>

하지만 API key를 공개적으로 Github에 올리는 것은 바람직하지 않다.

 

따라서 우리는 환경변수를 이용해 이 문제를 해결해보자.

 

---

우선 이 방법은 `create-react-app`을 사용해 React 프로젝트를 생성했을때를 기준으로 설명한다.

 

Create React App의 공식문서를 살펴보자.

https://create-react-app.dev/docs/adding-custom-environment-variables/#referencing-environment-variables-in-the-html

Adding Custom Environment Variables | Create React App

HTML에서 환경변수를 사용하기 위해서는 %REACT_APP_{VARIABLE_NAME}% 를 사용하면 된다.

 

문서를 처음부터 잘 읽어보면 REACT_APP_{VARIABLE_NAME} 처럼 REACT_APP_ 이라는 이름으로 시작하는 환경변수에 한해서만 가능하다고 적혀있다.

 

즉 .env 파일에서 변수 이름을 MY_API 로 주고 %MY_API%로 불러오는것은 불가능하다.

 

.env 파일 예제는 아래와 같다.

 

그리고 .gitignore에 .env 파일을 추가해야만 github에 파일이 올라가는 것을 방지할 수 있다.

 

---

이제 위의 네이버 지도 API 예제를 환경변수를 사용한 방법으로 바꿔보자.

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=%REACT_APP_NCP_ClientId%"></script>

Script 태그에 clientID를 하드코딩하지 않아도 환경변수에서 client ID 값을 제대로 불러오는 것을 볼 수 있다.

---

사실 프론트엔드 사이드에서 환경변수를 사용하는 방법도 완벽하게 private API key를 가리는 방법은 아니다.

 

사이드 프로젝트나 학교 과제로는 환경 변수를 사용하는 방법도 충분하지만 실제 production 버전에서는 react 프로젝트에 시크릿키를 저장해서는 안된다.

 

왜일까?

 

네이버 맵 예제로 알아보자.

script tag에서 환경변수를 사용해 값을 넘겨줬지만 브라우저의 inspect에서는 여전히 clientID값을 볼 수 있다.

 

 

네이버 맵 이외에도 다른 API를 사용할 때 예를 들어 JavaScript에서 환경변수로 값을 불러왔다고 가정하자.

 

그러면 자바스크립트 코드도 마찬가지로 Inspect - Sources - static 에 값이 노출된다.

 

이유는 Create React App 공식문서에 설명되어있다.

 

The environment variables are embedded during the build time.

 

그 이유는 바로 환경변수는 빌드시간동안 내장되기 때문이다.

 

쉽게 말해서 빌드할 때 환경변수값을 가져와 React 프로젝트가 정적 파일로 추출한다.

 

프론트엔드 프로젝트에서 완전히 키 값을 숨기는 방법은 서버에서 핸들링하는 방법밖에 없다.

 

하지만 Naver Maps API 에서는 위 방법으로도 충분하다는 생각이 드는게 콘솔에서 Web 서비스 URL를 등록할 수 있기 때문이다.

여기에 해당되지 않는 URL에서는 client ID를 알아도 호출할 수 없도록 만들어진듯하다.

 

다만 주의할 점은 개발 환경에서도 테스트하기 위해 로컬 호스트도 추가하는데, 실제 코드 배포 후에는 반드시 지우는 게 좋을듯하다.

 

 

---