React typescript vite 환경에서 카카오 지도 api의 키 값을 .env로 설정하고 적용한 방법입니다.

.env 설정 및 활용 방법

.env 파일을 활용해서 키 값을 숨기려고 할 때, 다음과 같이 설정해줘야 한다.

• .env 파일이 루트 경로에 있는지 확인
• .gitignore 파일에 .env 추가
• 변수명은 무조건 REACT_APP_ 으로 시작
• 변수명은 관습적으로 전부 대문자로 작성
• 줄 끝에 , 또는 ; 사용 X
• 파일 수정 후엔 프론트 서버 재시작

.env 파일 내용

REACT_APP_ 이후는 무엇을 나타내는지 명시적으로 작성하는 것이 좋다.
.env 파일 내부 예시는 다음과 같다.

REACT_APP_TEST_DATA = abcd
REACT_APP_MAP_KEY = 1122334455

사용 방법

설정이 끝났으면 다른 파일에서 .env의 내용을 가져와서 사용해야 한다.

일반적인 소스 파일에서 사용하는 경우

process.env.REACT_APP_설정한키이름으로 접근할 수 있다.

const APP_KEY = process.env.REACT_APP_TEST_DATA;
const MAP_KEY = process.env.REACT_APP_MAP_KEY;

console.log(APP_KEY, MAP_KEY); // abcd 1122334455
console.log(process.env.REACT_APP_TEST_DATA); // abcd
console.log(process.env.REACT_APP_MAP_KEY); // 1122334455

HTML 파일에서 앱 키를 설정 하는 경우

html에선 % %를 사용해서 가져올 수 있다.

카카오 지도 API를 사용하는 방법
실제 지도를 그리는 Javascript API를 불러오기 (링크)

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

따라서 index.html 에 script를 추가해준다.

    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAOMAP_KEY%"
    ></script>

시도 및 해결

시도

위에서 설명한 방법 그대로 적용 해보았는데, 지도가 생성되지 않았다.

하지만 appkey= 내용에 환경 변수에서 가져오는 것이 아니라 키 값을 넣었을 땐 지도가 잘 생성되었다.
또한 소스 파일에서도 process.env.~~으로 접근 했을 때도 키 값을 잘 가져오기 때문에 키는 문제가 없다는 것을 알았다.

환경 변수를 통해 값을 가져오면 지도가 안 나오고, 키를 넣어버리면 보안적으로 문제가 될 수 있기 때문에 해결 방법을 찾아야만 했다.

index.html에서 % %로 작성해서 못 읽는 건 아닌지, .env 파일에서 무언가 잘못 설정했는지 생각하며 이 두 가지 위주로 찾아보았다.

문제 발견

구글링, gpt를 사용해서 많이 찾아보았지만 해결 방법은 정말 간단했다.. 🥲

React, Typescript, vite를 사용하고 있었는데, vite는 환경 변수를 선언하는 방법이 달랐다.
기존에 REACT_APP_ 라고 작성했는데, VITE_APP_ 으로만 수정하면 된다.

해결 코드

.env

VITE_APP_KAKAOMAP_KEY = 키 값 입력

index.html

    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_APP_KAKAOMAP_KEY%&libraries=services"
    ></script>

좌표 값으로 주소를 얻기 위해 &libraries=services 만 추가했다.

마치며

몇 달 전에 있었던 문제였으며, 그 당시엔 방법을 찾는데 시간이 걸렸었다.
이 글을 작성하며 한번 더 찾아보니 구글과 gpt 모두 자료가 잘 나오고 많이있다.
무엇이 문제인지 알고, 알맞게 찾아보는 것이 중요하다고 느꼈다.