저번 글에 이어, 주소검색 및 지도이동을 구현하려고 한다 ( 해당 글 참조 ) 카카오맵API에서 함수를 다 제공하기 때문에 그냥 가져다 쓰기만 하면 된다. 그냥 API연습 겸... 오늘은 MapHeader.vue를 중점적으로 보려고 한다. 우선 데이터를 담을 데이터 객체를 선언해보자. data() { return { keyWord : '', // 검색키워드 v-model을 통해 검색단어를 받아옴 placeArray : [] // 검색결과를 담는 배열 } }, 그리고 실제로 API를 통해 주소검색을 하는 메서드를 선언한다. searchBox : function(){ this.placeArray = []; // 배열 초기화 let places = new kakao.maps.services.Places(); ..
오늘 심심해서 Vue기반으로 카카오맵API를 통해 지도를 가져오는 걸 했는데 웹팩 연습할 겸, main.js를 번들링 했더랬다. 근데 에러가 났다.. 에러내용은 아래와 같다. > @utt/message-system@1.1.4 build:es > cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es [!] Error: Vue packages version mismatch: - vue@3.1.1 (C:\projects\UTT-Message-System\module\node_modules\vue\index.js) - vue-template-compiler@2.6.14 (C:\projects\UTT-Message-Syst..
예전에 카카오맵API를 통해 지도를 가져온 적이 있는데.. ( 해당 글 참조 ) 당시에는 Vue환경이 아닌 반푼이었다. 그냥 javascript로 가져오고 검색은 ajax나 axios를 쓰기만 하고.. 그래서 이번에 컴포넌트, 웹팩, Vuex 같은 것들 복습 하는 겸 Vue3 기반 프로젝트로 카카오맵을 만들어 보려고 한다. 아래 그림의 흐름대로 구현할 생각이다. 이 그림을 잘 기억해두자. 그럼 바로 시작해보자~~ ( API키 갖고 오고 이런 건 생략하겠다. 궁금한 사람은 위 링크에서 참조하자. ) MapHeader.vue 이렇게 원하는 html파일에 번들링 된 js파일을 넣어주기만 하면 ... 기존과 똑같이 잘 뜨는 것을 확인 할 수 있다~
기존에 만들었던 영화목록은 따로 파라메터를 받지 않고 그냥 url뒤에 필요한 값들을 하드코딩해서 보냈었다. 이번에는 검색어와, 가져 올 영화갯수, 페이지 처리를 해보겠다. 근데 우선 알아야 할 것은 해당 데이터가 데이터베이스에 있는 것이 아니라, API로 그때그때 가져오는 거라, 기존의 페이지네이션 처리 방식이 다르다. 나는 그냥 페이징 계산 안하고 [이전], [다음] 버튼 정도만 구현하였다.. 간단히 코드랑 결과화면만 찍겠다. MovieList.vue Album example Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too shor..
지금까지는 Vue프로젝트 생성 및 API를 통해 데이터를 가져오는 것까지 해보았다. 이제 실제 MoiveList.vue에 가져온 데이터를 표출해보자. 우선 MoiveList.vue의 template를 아래와 같이 수정해준다. Album example Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely. Main call to action Secondary action PlaceholderThumbnail test 상세보기 test 기존에는 하드코딩 ..
기존에 javascript에서 axios를 사용할 때는 그냥 를 통해서 가져왔었다. 근데 Vue 환경에서는 조금 달라서.. ( 물론 그냥 를 통해서 가져 올 수는 있지만.. ) 정리해보려고 한다. 기존의 axios 사용법이 궁금한 사람은 아래 링크를 통해 확인해보자. https://bongra.tistory.com/57 [JS] AJAX를 통한 동적으로 서버통신을 해보자. (feat. Js, JQuery, Axios) 오늘은 AJAX를 통해서 동적인 서버통신을 한번 해보겠다~~ AJAX란? Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. bongra.tistory.com axios 설치 ..