말이 씨가 될수도 있으니 좋은 말만 하자...??
오늘 배운 것
지도 API를 배웠다. 카카오 맵을 이용해서 지도를 그려보았다.
생각보다 간단했다. 적용할 수 있는 샘플도 많아서 이것저것 해볼 수 있었다.
그런데 생각없이 복붙하다보니 잘 안되는 때가 있었는데 대부분 호이스팅 문제였다.
간단한듯 보였지만 생각할 것이 많았다.
1. kakao에 대한 정의 : declare window: typeof globalThis & {} 이 안에 kakao를 넣어주었고 any로 처리해주었다.
-
appkey : appKey 요청을 받아줄 도메인을 적어줘야 한다. 배포시 주소가 바뀌면 꼭 적어줘야 지도가 적용이 된다.
-
router.push 시 카카오 기능이 로딩되기전에 실행되어 문제 생김(멀티페이지오플리케이션) : 클릭할때마다 새롭게 페이지를 받아오는 a태그를 이용해서 해결(싱글페이지어플리케이션)
- 모든 페이지에서 카카오를 받아올 수 있도록 app.tsx에서 script를 통해 kakao맵을 받아오는 방식 -> 비효율적
-useEffect를 사용해 직접 다운로드받아 다 받을때까지 기다린 후 그려주는 방식 : 직접 createElement라는 기능을 통해서 script 태그를 만들어 주고, document.head.appendChild(script)를 사용하여 head 태그에 넣어주는 방법, script.onload 내부에 window.kakao.maps.load()를 통해 카카오 맵이 전부 다 받아 진 후 화면을 그려줌
Link를 사용하여 a태그를 사용하면 router.push와 같은 동작을 하되, 검색 봇이 알아볼 수 있는 시멘틱 태그의 요소까지 갖출 수 있음 https://velog.io/@owlsuri/%EC%B9%B4%EC%B9%B4%EC%98%A4%EB%A7%B5-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0
콜백함수, promise, async-await도 배웠다.
https://velog.io/@owlsuri/callback-promise-async-await
기억이 안되면, 기록을 -