집 플래닛 팀프로젝트!

1.  자랑스러운 코드

: 같은 장소의 여러 후기들을 한 그룹으로 묶어서 하나의 마커로 지도에 표시해줌!

  // 같은 위치의 후기들을 그룹화
  const groupedData: GroupedData = useMemo(() => {
    const grouped: GroupedData = {};
    filteredArticles.forEach((article: Article) => {
      // 각 후기의 위도와 경도를 결합한 고유 키 생성
      const key = `${article.lat},${article.lng}`;

      // 장소에 대한 첫번째 후기 작성 시 빈 배열 생성
      if (!grouped[key]) {
        grouped[key] = [];
      }
      grouped[key].push(article);
    });
    return grouped;
  }, [filteredArticles]);

 

1-1. 자랑스러운 이유

: 같은 장소에 대한 여러 후기를 하나의 마커로 표시함으로써, 지도를 사용자 입장에서 더 깔끔하게 볼 수 있었고 사이드 패널에 한 장소에 대한 여러 후기를 마커 하나를 클릭함으로써 한눈에 볼 수 있다는 장점이 있었습니다. 또한, 위도와 경도의 결합으로 고유 키를 생성함으로써 정확한 위치 기반의 그룹화가 가능하다고 볼 수 있습니다. 마지막으로 useMemo 훅을 사용하여 그룹화된 데이터를 메모이제이션함으로써 불필요한 재계산을 방지해 성능을 최적화 한 장점이 있는 것 같습니다!

 

 

 

 

 

 

2. 트러블 슈팅

<메인 페이지와 지도 페이지의 검색 기능 통합>

 

• 문제: 메인페이지에서 검색 후 자동으로 지도페이지로 이동할 때, 검색 결과가 유지되지 않았습니다.
• 원인 추론: 지도랑 메인에서 서로 다른 Input 컴포넌트를 사용중이기 때문에 로직이 달라서 발생하는 문제인 것 같습니다. 
• 해결방법: URL 파라미터를 활용해 검색 상태를 공유했습니다. router.push() 사용해서 지도페이지로 전달했습니다.

router.push(`/map?search=${encodeURIComponent(search)}`);

 

• 지도페이지에서는 URL 파라미터를 읽어와 KakaoMap 컴포넌트에 프롭스로 전달했습니다.

import { useSearchParams } from 'next/navigation';
import KaKaoMap from './KaKaoMap';

export default function MapPage() {
  const searchParams = useSearchParams();
  const initialSearch = searchParams.get('search') || '';

  return <KaKaoMap initialSearch={initialSearch} />;
}

 

•       KakaoMap 컴포넌트에서는 initialSearch 프롭스를 받아서 사용했습니다!

 

 

• 결과: 사용자는 메인페이지에서 검색을 하면 자동으로 지도페이지로 이동하며 검색결과가 즉시 표시됩니다. 따로 사용자가 지도를 들어가서 검색해도 검색 결과는 일치합니다.

 

 

 

 

 

 

 

 

3. 소감

이번 팀프로젝트를 하면서 코드에서 이슈보다는 리베이싱 충돌, 파일 손상, 민감한 키 정보 노출 등  깃협업에서 이슈가 많았습니다. 이러한 경험은 깃협업 초보자인 저에겐 너무 어려웠지만 결과적으로는 훌륭한 개발자가 되는 귀중한 학습 기회였던 것 같습니다! 이 학습을 통해 앞으로의 팀프로젝트에서는 더 나은 모습으로 참여할 수 있어서 좋은 경험이였던 것 같습니다!