저번 글에 이어, 주소검색 및 지도이동을 구현하려고 한다 ( 해당 글 참조 ) 카카오맵API에서 함수를 다 제공하기 때문에 그냥 가져다 쓰기만 하면 된다. 그냥 API연습 겸... 오늘은 MapHeader.vue를 중점적으로 보려고 한다. 우선 데이터를 담을 데이터 객체를 선언해보자. data() { return { keyWord : '', // 검색키워드 v-model을 통해 검색단어를 받아옴 placeArray : [] // 검색결과를 담는 배열 } }, 그리고 실제로 API를 통해 주소검색을 하는 메서드를 선언한다. searchBox : function(){ this.placeArray = []; // 배열 초기화 let places = new kakao.maps.services.Places(); ..

예전에 카카오맵API를 통해 지도를 가져온 적이 있는데.. ( 해당 글 참조 ) 당시에는 Vue환경이 아닌 반푼이었다. 그냥 javascript로 가져오고 검색은 ajax나 axios를 쓰기만 하고.. 그래서 이번에 컴포넌트, 웹팩, Vuex 같은 것들 복습 하는 겸 Vue3 기반 프로젝트로 카카오맵을 만들어 보려고 한다. 아래 그림의 흐름대로 구현할 생각이다. 이 그림을 잘 기억해두자. 그럼 바로 시작해보자~~ ( API키 갖고 오고 이런 건 생략하겠다. 궁금한 사람은 위 링크에서 참조하자. ) MapHeader.vue 이렇게 원하는 html파일에 번들링 된 js파일을 넣어주기만 하면 ... 기존과 똑같이 잘 뜨는 것을 확인 할 수 있다~