아웃소싱 프로젝트 SA
https://www.notion.so/10-3a1234d3341e4fababe64e8d89cf0c32?pvs=4
Kakao map api 사용하기
공식문서 : https://apis.map.kakao.com/web/guide/
api 생성: https://developers.kakao.com/
환경변수 사용
-
html
%% 사이에 넣으면 된다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_API%"></script> -
jsx
process.env.변수명
kakao map api
새 애플리케이션 생성 -> 앱설정 -> 도메인(플랫폼) http://localhost:3000 등록 -> 공식문서를 참고하여 key에 JS key 넣어서 사용
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_API%"></script>
<div id="root"></div>
</body>
</html>Map.jsx
import React, { useEffect, useState } from 'react';
const { kakao } = window;
function Map() {
const [map, setMap] = useState(null);
useEffect(() => {
// console.log(window.kakao);
const container = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const map = new kakao.maps.Map(container, options);
console.log(map);
setMap(map);
}, []);
return (
<div>
Map
<div id="map" style={{ width: '500px', height: '400px' }}></div>
</div>
);
}
export default Map;삽질
환경변수를 저장하고 나면 재시작해야 제대로 동작하는데 왜 안나오지 이러고 있었다..
처음에 api를 head에서 시도해보다가 혹시 몰라 body로 옮겨봤는데 동작이 됐다.
노란 warning
A parser-blocking, cross site (i.e. different eTLD+1) script,
http://t1.daumcdn.net/mapjsapi/js/main/4.4.9/kakao.js,
is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity.
If blocked in this page load, it will be confirmed in a subsequent console message.
See https://www.chromestatus.com/feature/5718547946799104 for more details다른 사이트에서 구워진 쿠키 중, kako.com 도메인에서 구운 쿠키가 브라우저의 쿠키 보안 정책 중, 특정 스펙을 만족하지 못하여 발생하는 경고
결제, 로그인 등의 서비스가 쿠키 기반 동작이라면 문제될 수 있지만, 지도는 그런 동작이 없기 때문에 지도 어플리케이션을 개발하는 입장이라면 무시해도 된다.
해당 로그를 없애고 싶다면, 브라우저 쿠키를 비우거나,
개발자도구의 Cookies 테이블에서 Domain: .kakao.com SameSite: (None이 아닌) 빈값으로 되어있는 쿠키들을 선택적으로 삭제해보라고 한다.
-> 하지만 다시 접속하거나 로그인하면 다시 지워야하니 그냥 무시하자
commit vi editor
git commit -> i 입력(edit mode, 끼워넣기 나타남) -> 메시지 입력 -> esc로 모드 나가기 -> 맨 아래에서 :wq(저장 및 편집기 종료)
와이어프레임을 그려보기 위해 피그마를 사용해서 피그마에 익숙해지는 시간을 가질 수 있었다.
덕분에 좋은 정보 얻어갑니다, 감사합니다.