현 프로젝트 시작단계

6. 백엔드 마커시스템 문제점

깡 딱 2025. 3. 11. 23:14
728x90

진행사항과 걸린 시간은 

github로 관리하고있다. 

https://github.com/hdachan/real_modir

 

GitHub - hdachan/real_modir

Contribute to hdachan/real_modir development by creating an account on GitHub.

github.com

 

현재 프로젝트이다. 이거 mvvm 로 관리하면 좋긴 한데

이 페이지가 너무 많아지는 거 같다.. ㅋㅋㅋㅋ

슬슬 헷갈리기 시작

그리고 애매한 것들을 한 서비스단에 다 만들어서 수정도 필요하다..

또한 이름도 안 맞췄다. 전부 다 수정해야 될 내용이다.

 

 

 

전체적으로 이제 UI는 만든 거 같다.

근데 UI 기능들을 또 만들어야 된다.. 하아

 

확실히 백엔드는 이론을 알아서 쉽게 되는데

프런트엔드는 좀 어려운 거 같다.

 

오늘은 내가 겪었던 백엔드 오류에 대해서 설명해보려고 한다. 

 

 

 

 

현재 코드설명


📌 코드 설명

1️⃣ buildMarkersFromList() (마커 리스트 생성)

Set<NAddableOverlay> buildMarkersFromList( List<Modir> dataList, String? selectedMarkerTitle, Function(Modir) onMarkerTap) {
  • dataList: 마커를 생성할 데이터 목록 (Modir 리스트)
  • selectedMarkerTitle: 현재 선택된 마커 (선택 여부에 따라 다른 아이콘 사용)
  • onMarkerTap: 마커를 탭할 때 실행할 함수 (예: 바텀시트 표시)

마커 생성 과정

final bool isSelected = (modir.title == selectedMarkerTitle);
  • 현재 마커가 선택된 상태인지 확인
    → 선택된 경우 다른 아이콘을 사용 (maker_on.png vs marker_off.png).
 
final marker = NMarker( id: modir.title, position: NLatLng(modir.latitude, modir.longitude), caption: NOverlayCaption(text: modir.title), icon: NOverlayImage.fromAssetImage(iconPath), size: Size(40, 40), );
  • NMarker 객체를 생성
    → id는 modir.title, 위치는 modir.latitude/longitude, 아이콘은 선택 여부에 따라 다름.
 
marker.setOnTapListener((overlay) { onMarkerTap(modir); });
  • 마커를 클릭했을 때 onMarkerTap(modir) 함수 실행
    → showMarkerBottomSheet() 같은 UI 동작을 실행할 수 있음.

2️⃣ updateMarkers() (마커 업데이트)

  • mapController: 네이버 맵 컨트롤러
  • dataProvider: 마커 데이터를 담고 있는 DataViewModel
  • selectedMarkerTitle: 선택된 마커 제목
  • onMarkerTap: 마커 클릭 시 실행할 함수
  • showSnackbar: 마커가 없을 때 실행할 함수 (예: "검색된 마커가 없습니다." 메시지)

3️⃣ 현재 지도에 보이는 마커만 필터링

  • 현재 지도의 보이는 영역 (bounds)를 가져옴.
  • 만약 bounds가 없으면 (null) 바로 종료.
 
    final filteredData = dataProvider.dataList.where((modir) {
      return modir.latitude >= bounds.southWest.latitude &&
          modir.latitude <= bounds.northEast.latitude &&
          modir.longitude >= bounds.southWest.longitude &&
          modir.longitude <= bounds.northEast.longitude;
    }).toList();
  • dataProvider.dataList에서 현재 지도 화면 안에 있는 마커만 필터링
    → 즉, 보이지 않는 마커는 표시하지 않음.

4️⃣ 기존 마커 삭제 후 새 마커 추가

 
final newMarkers = buildMarkersFromList(filteredData, selectedMarkerTitle, onMarkerTap);
  • 현재 보이는 마커만 필터링한 후 buildMarkersFromList()를 사용해 새로운 마커 생성.
 
    /// ✅ 기존 마커 삭제 후 새 마커 추가
    await mapController.clearOverlays();  // ✅ overlays 제거
    if (newMarkers.isEmpty) {
      showSnackbar();
    } else {
      await mapController.addOverlayAll(newMarkers);
    }
  } catch (e) {
    print("마커 업데이트 중 오류 발생: $e");
  }
  • 기존 마커를 모두 삭제한 후
    • 마커가 없으면 showSnackbar() 실행 (예: "검색된 마커가 없습니다." 메시지 표시)
    • 새로운 마커를 지도에 추가

 

 

문제 발견

 

 

현재 내 코드는 이러한 흐름인데

✔ 백엔드에서 데이터를 먼저 불러옴 (dataProvider.dataList)
✔ 지도에서 현재 보이는 영역에 있는 마커만 필터링
✔ 기존 마커를 모두 삭제하고, 새롭게 필터링된 마커만 추가
✔ 마커를 클릭하면 바텀시트 등을 띄울 수 있음 (onMarkerTap(modir))

 

 

내가 만들고 싶은 흐름 

✔  백엔드에서 모든 마커 데이터를 불러옴 (주소, 카테고리, 위도, 경도 포함).

✔  지도에서 현재 보이는 영역 내의 마커만 남김.

✔  추가로 사용자가 선택한 카테고리에 해당하는 마커만 남김.

✔  필터링된 마커만 지도에 표시.

 

 

근데 여기서 문제점이 나는 데이터를 미리 먼저 다 받아온다. 이렇게 된다면

확장성을 고려했을 때는 2번이고

쉽고 빠른 건 1번인데 

도저히 선택이 안돼서 계속 고민해서 나온 결론이 

 

 

🚀 최적의 방법 (하이브리드 방식)

👉 1차 필터링: 서버에서 현재 보이는 지도 영역만 가져오고,
👉 2차 필터링: 클라이언트에서 카테고리·검색어를 적용하는 방식

 

현재 나는 한꺼번에 다 불러오고 있어서 로직 수정을 해야된다.

내일은 백엔드를 다 만들 예정이다.

 

 

내일 할일 

 

1. 미리 만들어둔 네이버지도 넣고

2. UI 뺴고 마커만 불러오는 로직 작성

3. 로직마다 현재 보이는 지도영역만 가져오게 만들기

4. 클라이언트에서 카테고리 검색어를 적용 

5. 현재 진행 중인 프로젝트에 넣기 

 

 

728x90