지금까지 작업했던 결과물을 github repository에 올리기 위하여 api key를 숨기는 작업을 했다.
구상은 config.js 라는 파일을 만들어 api key를 담고 .gitignore에 config.js를 등록하여 형상관리에서 제외시킬 생각이다.
<head>
<meta charset="utf-8">
<title>주변 주류 매장 찾기</title>
<script type="text/javascript" src="../src/js/config.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<div id="result"></div>
<script>
function loadKakaoMapSDK() {
const script = document.createElement("script");
script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${config.apikey}&libraries=services`;
document.head.appendChild(script);
script.onload = function () {
kakao.maps.load(function () {
initMap();
});
};
}위와 같은 식으로 변경을 했다.
여기서 문제는 밑에 추가적인 스크립트 함수가 있는데
kakao의 sdk를 받아오기 전에 밑에 함수(initMap)가 실행되어서 에러가 나왔다.
그래서 스크립트에 로직을 추가해서 SDK가 로드된 이후에만 Kakao Maps 관련 객체를 사용할 수 있게 만들었지만
그래도 계속해서 libraries를 불러오지 못하는 에러가 생겼다.
코드 중간에 console.log를 이용하여 kakao.maps.services의 type을 찍었지만 undefined를 반환했다.
해결법은 튜터님과 질의를 하면서 발견할 수 있었다.
document.head.appendchild를 통해 동적으로 태그를 넣는 과정이 코드에 있는데 이럴때는 autoload=false 옵션을 넣어주라고 카카오에서 가이드하고 있다고 한다.
<body>
<div id="map" style="width:100%;height:400px;"></div>
<div id="result"></div>
<script>
function loadKakaoMapSDK() {
const script = document.createElement("script");
script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${config.apikey}&libraries=services&autoload=false`;
document.head.appendChild(script);
script.onload = function () {
kakao.maps.load(function () {
initMap();
});
};
}이런식으로 코드를 수정하니 다시 한 번 지도가 잘 나오는 것을 확인할 수 있었다.
이제 .gitignore에 config.js 파일을 등록하고 github repository에서는 api key를 확인할 수 없다.
원래라면 프론트에서 이렇게 api key를 숨기는 처리를 하는 것은 좋지 않다고 한다.
왜냐하면 개발자 도구를 열어서 js 파일에서 key를 확인할 수 있는 방법이 있으니 보안 문제가 우려되는 것이다.
위의 문제는 다양한 해결법이 있지만 아마 특정 도메인에서만 사용할 수 있도록 처리하는 방법을 사용할 것 같다.
'웹 개발' 카테고리의 다른 글
| [프로젝트] 목록별로 카테고리 적용하기 (1) | 2024.10.14 |
|---|---|
| [프로젝트] 커서 페이지네이션 (0) | 2024.10.11 |
| [프로젝트] 카카오 지도 API로 주변 주류 매장 출력 (0) | 2024.10.07 |
| [프로젝트] 카카오 지도 api 구현 중 (1) | 2024.10.07 |
| [프로젝트] 트러블 슈팅(프로필 조회) (0) | 2024.10.04 |
