배운 점
1. Kakao 지도 API를 불러올 때 Vite의 환경 변수 사용법을 준수해야 함.
2. 지도 div가 존재해도 보이지 않으면 캐시 문제일 가능성이 있음.
3. 스타일 속성의 값에는 공백이 없도록 조심하자.
오늘의 목표는 Kakao Developers에서 제공하는 Kakao 지도 API를 활용하여 ProductList 페이지에 지도를 구현하는 것이었다.
1. Kakao 지도 API 스크립트 추가하기
Kakao 지도를 사용하려면 Kakao Developers에서 발급받은 appkey를 API 스크립트에 추가해야 한다.
그래서 .env 파일에 VITE_KAKAO_APP_KEY라는 환경 변수를 만들고, index.html의 script 태그에서 아래의 코드처럼 사용하려고 했었는데..
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=VITE_KAKAO_APP_KEY&libraries=services,clusterer"
></script>하지만 이렇게 하니까 에러가 발생했다!
이유는 VITE_KAKAO_APP_KEY는 자바스크립트 문법이기 때문에 HTML에서는 직접 사용할 수 없기 때문이다.
해결 방법
1. Public_URL 사용하기
Vite에서는 .env 파일의 환경 변수를 %변수명% 형식으로 HTML에서 사용할 수 있다.
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_APP_KEY%&libraries=services,clusterer"
></script>이렇게 변경한 후, Kakao 지도 API가 정상적으로 불러와졌다.
2. KakaoMap 컴포넌트 생성
react-kakao-maps-sdk 라이브러리를 사용하여 KakaoMap 컴포넌트를 만들었어:
import React from 'react';
import { Map } from 'react-kakao-maps-sdk';
const KakaoMap = ({ width, height }) => {
return (
<Map
center={{ lat: 33.450701, lng: 126.570667 }}
style={{ width: `${width}`, height: `${height}` }}
level={3}
/>
);
};
export default KakaoMap;이제 ProductList 페이지에서 KakaoMap을 불러와 적용하면 될 거라고 생각했었다.
ProductList 페이지에서 지도가 안 보임!
ProductList 페이지에서 KakaoMap을 불러왔는데, 화면에 지도가 나타나지 않았다. 하지만 개발자 도구를 확인해 보니, div 태그는 존재하지만 지도는 보이지 않는 상태였기 때문에 나 혼자만의 여러가지 분석을 하기 시작했다. 🤔
원인 분석
- react-router-dom을 사용해서 페이지 전환이 이루어지기 때문에, 지도가 정상적으로 로드되지 않을 가능성이 있다고 생각했다.
- 그런 이유로 KakaoMap을 ProductList가 아니라 index.html에 가장 App.jsx에서 직접 불러왔지만, 여전히 지도가 나타나지 않았고..
- 마지막으로 캐시 문제를 의심하고 강제 새로고침을 해봤다.
해결 방법: 강제 새로고침
강제 새로고침을 하자 지도가 정상적으로 표시됨!
- VITE_KAKAO_APP_KEY 사용 방식:
- 원래 코드에서는 VITE_KAKAO_APP_KEY를 JavaScript 변수처럼 사용했는데, Vite에서는 HTML에서 환경 변수를 사용할 때 %VITE_KAKAO_APP_KEY%처럼 % 기호를 붙여야 한다.
