2022/10/19 - TIL

 

카카오 map map api를 사용하면서 생긴 문제

1. kakao is not defined
2. Cannot read properties of null(reading 'currentStyle')

두가지가 있었다. 이전에 TIL로 작성을 한 적이 있었다. 1번같은경우 이전에 작성한 케이스가 맞았지만 2번 같은경우 우연히 에러가 발생하지 않는 경우를 골라 하였기 때문에 에러가 발생하지 않았던 것이다.

2번 에러가 생긴이유

우선 currentStyle을 잡는 객체가 무엇인지를 생각해봐야한다. 여러개의 글을 읽으면서 테스트를 해본 결과 나에게 문제가 생긴 이유는 동적으로 map의 컨테이너가 생겼다 없어졌다 하기 때문이었다. 즉, currentStyle은 맵의 컨테이너 사이즈가 현재 없다라는 것을 이야기한다.

해결 방법

1. 인스턴수 숫자 줄이기

우선 현재 만들어둔 코드를 보니 문제가 여러개가 있었다. 이 에러를 눈치챌 수 있었던 것은 검색을 여러번 한후에 줌을 할 때 여러 맵이 겹쳐보이는 경우가 있었는데, 이를 통해서 맵이 여러개 생성되었다는 것을 알 수 있었다. 우선 맵이 여러개 생성되는 것을 방지하기 위해서 인스턴스가 여러번 생성되는 것을 단 한번 생성되는 것으로 바꾸었다.

1. 인스턴스 저장 및 불러들이기

사실 인스턴스를 전역에 저장하고 사용한다는 것은 값의 변질을 시킬 수 있기 때문에 별로라고 생각이 들었다. 하지만, 카카오 맵처럼 api key를 사용하는 경우에는 필연적으로 window.kakao에 값을 고정적으로 비워둬야 하기 때문에 window.kakao에 관련된 값들을 저장하고 이 값을 수정할 수 있는 매서드를 저장하였다.

위의 방법을 사용하니 2번문제가 전부 사라졌다. 이걸 해결하는데 5시간 정도 고민하며 만들어 둔 것을 고치고 수정하였는데, 덕분에 인스턴스를 남발해서 생성하면 안된다는 교훈을 얻었다. 또, api를 만든다면 여러 경우를 고려해서 만들어야 이용하는 사람이 편할꺼같다는 생각이 들었다.