[Vue + Express + MySQL 웹 사이트 만들기 (2) ] Sidebar.vue 구현 및 키워드 검색 기능 구현

📢 사이드 컴포넌트 구체화

대략적인 사이드바의 ui를 잡았으니 구체적으로 구현하고 기능도 넣어줄 차례

뒷면에 지도가 비치게 불투명 효과를 넣고 input 창에 가고싶은 지역의 맛집을 검색하면

이렇게 장소부분에 맛집의 상호명과 주소가 출력된다.
사실 몇가지 요소를 더 넣어야하는데 영..손이 안간다.

---

📢 키워드 검색 기능 구현

input창에 가고싶은 혹은 궁금한 지역의 맛집을 입력하면
sidebar component 장소부분에 맛집의 대략적인 정보가 출력되고
map component에는 입력한 키워드의 중심좌표를 기준으로 지도를 출력하고 그 위에 맛집의 마커가 찍히도록 구현하였다.

sidebar와 map component는 형제요소로 이루어져있기때문에 처음에는 외부 라이브러리인 mitt 설치하여 컴포넌트 간 데이터를 공유했다.

import mitt from 'mitt'

const emitter = mitt();
const app = createApp(App);
app.config.globalProperties.emitter = emitter
app.use(router).mount('#app')

주고받을 데이터가 몇개 없다고 생각해서 사용했던 방법인데 은근 불편할뿐더러 점점 공유해야 할 데이터가 많아져서 vuex로 상태관리를 시작했다.

import { createStore } from "vuex"
import place from "./place"

export default createStore({
  modules: {
    place
  }
})

(역시 vuex 최고 제일편해😀👍🏻)

store를 만들고 그 안에 place 모듈을 만들어서 상태관리를 시작했다.

  actions: {
    searchPlaces({ commit }, payload) {
      const { keyword }  = payload
      /* global kakao */
      let ps = new kakao.maps.services.Places();
      ps.keywordSearch(keyword, (data) => {
        console.log(data)
      ps.keywordSearch(keyword, (data,status) => {
        if(status === kakao.maps.services.Status.OK) {
          commit('updateState', {
            datas: data,
            msg: ''
          })
        } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
          commit('updateState', {
            datas: [],
            msg: '검색결과를 찾을 수 없습니다.'
          })
        } else if (status === kakao.maps.services.Status.ERROR) {
          commit('updateState', {
            datas: [],
            msg: '검색 중 오류가 발생하였습니다.'
          })
        }
      })
    }

sidebar 컴포넌트의 input 값을 payload로 받아와서 keyword로 사용해주었고 카카오 지도의 Status값에 따라 mutation을 통해 상태를 변경해주었다.

이제 Status의 상태에 따라 결과값을 볼 수 있다!

---

이제 키워드로 장소를 검색하면 지도에 장소의 중심위치를 출력하고 장소 주변 맛집들의 마커도 찍어보도록 하자

처음엔 모듈을 하나 더 만들어서 구현할 예정이였으나

🔫services.js:5 GET http://dapi.kakao.com/v2/local/search/keyword.json?page=1&size=15 400 (Bad Request) 

이 에러가 자꾸 뜨는거다 네트워크를 들어가보니 api 한개는 쿼리스트링까지 잘 달려서 get을 보내고있는데 나머지 한개는 쿼리스트링도 없고 뒤에 달린것도 없이 자기 혼자 보내지고 있더라..

기존 모듈에서도 input의 v-model 값을 payload로 보내주고 있었는데 새로 만든 모듈에서도 input 값이 필요해서 payload로 데려왔더니 아무래도 기존에 잡아오던 api와 충돌이 나는것같았다

그래서 그냥 기존 모듈에서 진행하였다.................

였으면 좋았겠지만
사실 그냥 뭔가 새로운 모듈에서도 될것같아서 계속 진행하다가 몇시간을 날려먹었다 😇

이정도면 삽질페티시

if(status === kakao.maps.services.Status.OK) {
  let markersPosition = []
  for (let i=0; i<data.length; i++) {
    let lat = data[i].y
    let lng = data[i].x
    markersPosition.push([lat, lng])
  }
  commit('updateState', {
    datas: data,
    msg: '',
    markersPositions: markersPosition
  })

기존 모듈의 data를 받아오는 부분 안에 위도와 경도를 받아 data로 내보내고
map 컴포넌트에서 그 데이터를 받아 지도와 마커를 그려주었다.

기존 모듈에서 진행하니 10분도 안걸렸다
내 자신이 싫었다..

---

오늘 느낀점
해볼 수 있는 데까지 해보는 건 좋은데 제발 안되면 되는 거 해라😐...

---

⏱내일 할 일
✔️ 마커 위에 infowindow 찍어서 간단한 맛집 정보 출력
✔️ 검색결과 목록을 클릭하면 infowindow 출력
✔️ 한식 중식 등 필터 기능 구현