Next.js 카카오맵 구현

Next.js 카카오맵 구현

 

구현하려는 웹에 카카오맵을 사용하려고 문서를 보고 실행해보았습니다.

그 과정에서 맞딱뜨린 여러 문제들과 해법들을 기록합니다.

닥히 Next.js의 케이스가 아닌 경우도 있습니다.

---

 

1. 꽉찬화면 height='100%'

 

지도의 전체화면이 안먹는 것입니다.

width는 100%가 적용되는데,

아무리 부모 엘리먼트들의 높이를 100%로 주더라도

지도가 커지지 않습니다.

 

그러다가 발견한 해결책 'vh'

vh란 viewport height를 말합니다. 

그럼 뷰포트(viewport)란 뭘까요.

웹 브라우저의 현재 창에서 볼 수 있는 부분을 말합니다.

뷰포트가 의미있는 이유는

다양한 모바일 기기가 많은 현재,

현재의 모바일 브라우저의 화면 크기를 

비율로 설정할 수 있기 때문에

유연하게 대응할 수 있습니다.

 

다시 문제로 돌아와서,

높이를 100vh 로 했을 때 꽉찬 화면이 구현되었습니다.

어째서 너비는 %로도 가능했는지 

아직은 이해되지 않지만

가로도 100vw 로 변경했습니다.

 

 

2. kakao Type 

kakao 맵의 타입 정의 파일이 없어서 

많은 분들이 any 타입으로 정의 내려서 사용하고 있었습니다.

타입 정의가 없으면 typescript가 kakao가 정의되지 않았다고 오류가 발생합니다.

declare global {
  interface Window {
    kakao: any;
  }
}

 

 

3. Build 시 Warning: External synchronous scripts are forbidden.

이게 무엇인가 찾아보니,

대략적으로 script 간의 실행 순서에 문제가 있는 것 같았습니다.

어렴풋이 공부했던 기억이 나서 좀 찾아보았습니다.

https://ko.javascript.info/script-async-defer

defer, async 스크립트

스크립트의 세계에 이런 개념들이 있었습니다.

사실 잘 몰랐는데 이번 기회에 배워갑니다.

 

그러니까 이 카카오맵 구현은 크게 2가지로 구성됩니다.

첫째는 지도를 그리는 api 스크립트 태그입니다.

요 녀석입니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

그리고 두번째는 지도를 그려넣는 코드입니다.

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

바로 이 부분입니다.

 

그런데, 만약에 

스크립트의 실행 순서가 잘못되어서,

지도를 불러내는 코드가 먼저 실행이 된다면,

왜 있지도 않은것을 불러내냐고 오류가 발생합니다.

 

해당 글에서 힌트를 얻어서 해결했습니다.

https://devtalk.kakao.com/t/react-api/105709

&autoload=false

 

4. document is not defined

그런데 그 글 그대로 실행했을 때도 이런 오류가 발생했습니다.

 

react나 vue은 화면이 렌더링 되기 전엔 

document나 window가 아직 선언되지 않았기 때문에

활용할 수 없다는 것을 알게됐습니다.

이 때는 useEffect() 를 사용하여 해결하였는데,

useEffect에 전달된 함수는 렌더링이 완료된 후에 수행하기 때문입니다!

useEffect.. 너란 녀석.. 멋진 녀석.

 

 

 

Next.js 카카오맵 구현