yamoo9
commented
1 year ago 환경 변수 파일 부재
환경 변수 파일을 첨부한 ZIP 압축 파일 안에서 찾을 수 없습니다. 이런 유형의 오류는 발급받은 API KEY를 공유해주셔야 테스트가 가능합니다. 발급받은 API KEY 외부 공개가 우려된다면? 디스코드를 통해 파일 공유해주세요.
문제 원인
index.html 파일에 직접 Kakao 지도 스크립트 코드를 삽입해야 정상 작동합니다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<!-- ... -->
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은_KAKAO_API_KEY"></script>
</head>
<body>
<!-- ... -->
</body>
</html>동적 삽입의 경우 Kakao 지도 API 스크립트를 호출하지 못합니다. (확인 결과)
KakaoMap 컴포넌트 코드는 다음과 같이 작성합니다.
import { useRef, useLayoutEffect } from 'react';
export default function KakaoMap() {
const mapRef = useRef(null);
useLayoutEffect(() => {
const mapContainer = mapRef.current;
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
};
const map = new kakao.maps.Map(mapContainer, options);
}, []);
return (
<>
<div ref={mapRef} style={mapStyle} />
</>
);
}
const mapStyle = { width: 500, height: 400 };그러면 정상적으로 지도가 화면에 표시됩니다.
환경 변수 API 키 → index.html 설정
index.html 파일에 삽입된 API 키를 환경 변수로 설정 하려면? 아쉽게도 Vite는 기본적으로 그런 기능을 제공하지 않습니다. 그럼에도 환경 변수를 사용해 API 키를 사용하려면? vite-plugin-html-env 플러그인을 설치해 사용할 수 있습니다.
npm i -D vite-plugin-html-envvite.config.js 구성 파일에 설치한 플러그인을 설정합니다. (참고)
import htmlEnv from 'vite-plugin-html-env';
export default defineConfig({
plugins: [
htmlEnv({
prefix: '%',
suffix: '%',
}),
// ...
],
// ...
});설정을 마쳤다면 index.html 파일에서 .env 파일의 환경 변수를 사용할 수 있습니다.
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAOMAP_API_KEY%"></script>가이드 파일
가이드 한 내용이 포함된 ZIP 파일을 첨부합니다.
car-kakao-map-confirm-by-yamoo9.zip
React 용 Kakao Maps SDK 라이브러리
참고로 react-kakao-maps-sdk 라이브러리를 사용해 React 앱에 Kakao 지도를 렌더링 할 수 있어요. Kakao에서 공식적으로 제공하는 라이브러리는 아니지만, 사용을 고려할 수 있습니다. (API 문서 참고)
Juhee-Hwang
질문 작성자
황주희
문제 상황
kakao map API 연결을 위해 script 추가하고 src에 들어갈 API KEY를 .env 파일에 추가했습니다.
VITE를 사용하여 빌드했기 때문에 환경변수를 import.meta.env로 불러오기까지도 성공했습니다.
아래 이미지를 보시면 script 태그가 head태그 내부에 잘 들어가있는 것을 볼 수 있습니다.
근데 제대로 되지 않아서 무엇이 문제일까 생각했을때 index.html의 경로가 public폴더가 아니여서 그런가 하는 생각이 들었습니다.
혹시 index.html 경로를 수정하면 해결이 될까요...?
아래는 오류 메세지입니다.
프로젝트 저장소 URL
car-zip/origin repo
feature/#20브랜치입니다.car-zip.zip
카카오맵 API 가이드 링크 입니다.
환경 정보