오류 내역 페이지가 로드될 때 카카오맵의 마커가 바로 생성되지 않고 어떤 추가 요청을 해야 나머지 마커를 불러오는 상황이 발생했다. 기존 코드 전체 보기 더보기 import React, { useState, useEffect } from 'react'; import { Map, MapMarker, CustomOverlayMap } from 'react-kakao-maps-sdk'; import { styled } from 'styled-components'; import { BiChevronRight } from 'react-icons/bi'; import { useNavigate } from 'react-router-dom'; // window.kakao 객체를 가져옴 const { kakao } = ..
구현하고자 하는 로직 DB에 저장된 위스키바 리스트가 서울시에 한정되어 있기 때문에, 다른 지역으로 넘어가면 지도에 별다른 리스트가 조회되지 않았다. 사용자 입장에서 생각해봤을 때 아래와 같은 로직을 추가하는 것이 유저 사용성이 더 편할 것 같다는 생각이 들어 아래의 로직을 추가했다. 1.서울시 전체 위스키바 크롤링하여 DB 저장, 해당 데이터를 보여주는 방식으로 로직 전면 변경 2. 약 350여개의 업장을 화면에 모두 출력하기보다 react-select를 이용해 '구'를 선택하도록 하여 구별로 업장 출력, 각 구마다 위스키바가 가장 많은 지점을 해당 구의 중앙 지점으로 설정 3. 사용자가 지도를 이동할 경우 idle 이벤트를 이용해 해당 구(또는 지역)을 감지하여 사용자가 이동한 구의 위스키바 데이터를..
서울시 내 위스키바 리스트를 출력하기 위해 방법을 고민하던 중, 카카오맵 API에서 위와 같이 키워드로 장소를 검색하고 목록으로 표출하는 기능을 제공해 준다는 것을 알게 되었다. 데이터를 크롤링할 것인지 vs 카카오 내장 검색 기능을 사용할 것인지 회의를 진행했고 지도 API에서 어차피 리스트를 제공해 준다면 해당 내장 기능을 최대한 활용해 보기로 결론을 내렸다. 구현하고자 하는 로직 1. 페이지가 마운트될 때 사용자 현재 위치 정보 동의 1-1. 사용자가 허용했을 경우 해당 위도/경도 설정 1-2. 사용자가 거부했을 경우 지도 설정 기본 값인 을지로 3가의 위도/경도 설정 2. props로 내려받은 위도/경도값을 주소로 변환해 'X시 Y동 칵테일바'라는 키워드 세팅 3. 해당 키워드를 이용해 지도 AP..
