vue.js에서

mounted() 훅에서

카카오 지도가 2번 생성되는 현상을 막으려고

제 실력에서 할수있는 모든 조치를 다 취했지만

여전히

new kakao.maps.Map(mapContainer, mapOption)가 2번 실행되어서

지도 2개가 겹쳐서 생성되고있습니다


우선 mounted가 다 끝나갈때쯤 한번만 지도가 생성되게 하기 위해서

this.$nextTick()을 사용했고

data에 null로 할당해놓은 this.map에

아직 지도가 들어가지 않았을때만 그다음 로직이 진행되도록 if조건문을 걸었고

그후에 페이지 전체가 렌더링 되는 시간보다 더 긴 시간을 setTimeout에 걸었고

그다음에 한번더 this.map에 지도가 들어가지않았는지를 체크한 후에

지도가 생성되는 로직이 실행되게 했습니다.


그런데도 불구하고

console.dir과 console.log를 찍어본 결과

똑같은게 계속 2번씩 찍히는게 확인이 되고요

지도도 계속 중복되어서 생성되고있습니다


지금까지 코딩을 하면서 이런 경험이 처음이네요

보통 이 정도로 철저하게 조치를 취하면

저게 강제로 2번 실행되기가 더 어려울거 같은데

아무래도 mounted가 굉장한 강제성을 갖고있는거 같습니다


그래서 vue의 mounted를 한번만 실행되고서 강제로 종료되게 만드는 방법을 알려주셨으면 좋겠습니다