댕댕어디가 리팩토링 - #4 땅따먹기 페이지

땅따먹기 페이지

 

📌 땅따먹기 기능 소개를 하자면,

특정시설에 방문 후 땅따먹기 리뷰를 작성하면 해당 지역의 방문횟수가 카운트되고, 해당 지역에 방문횟수가 가장 많은 유저가 그 지역의 땅주인이 되는 간단한 시스템이다. 

 

처음에 기획할 때까지만 해도 1차 배포 후 기간이 2주 정도 남은 상황에서 지도 상에서 구역을 나누기를 구현할 수 있을까... 많은 걱정이 있었는데, 생각보다 구현이 빨리 됐고 각 지역의 내 방문횟수, 땅 목록 보여주기, 컨패티 효과 등 더 추가할 수 있게 되면서 우리서비스의 메인 기능 중 하나가 될 수 있었던 것 같다.

(땅따먹기 페이지 구현과정도 나중에 블로그로 정리하면 좋을 것 같다)

 

📌 1️⃣ Performance (성능)

우선 저번 검색페이지에서 했던 것처럼 LCP요소를 땅따먹기 버전 staticmap.png로 감지되게해서 시간을 줄였다

 

그리고 JSDelivr CDN (https://fastly.jsdelivr.net)에 대한 연결 시간이 100ms 지연되고 있어서 preconnect 또는 dns-prefetch를 사용하여 브라우저가 해당 CDN 서버에 미리 연결하도록 설정해줘야 한다고 한다.

🔍 JSDelivr CDN이란?

JSDelivr는 무료 콘텐츠 전송 네트워크(CDN)로, JavaScript 라이브러리, CSS, 글꼴(Font), 이미지 등의 정적 자원을 빠르게 제공하는 서비스이다.

 

🌍 JSDelivr의 역할

웹사이트 성능을 최적화하기 위해 자주 사용되는 외부 리소스(라이브러리, 웹 폰트 등)를 전 세계 여러 서버에서 빠르게 로드할 수 있도록 도와줌.

✅ 전 세계 여러 CDN 서버를 사용 → 사용자가 가까운 서버에서 리소스를 받도록 최적화
✅ GitHub, npm, WordPress 등의 오픈소스 파일을 직접 호스팅 가능
✅ 무료 + 속도가 빠르고 안정적 (Cloudflare, Fastly, BunnyCDN 지원)

<link rel="preconnect" href="https://fastly.jsdelivr.net" crossorigin="anonymous">
<link rel="dns-prefetch" href="https://fastly.jsdelivr.net">

그래서 위의 코드를 index.html에 넣어주었다.

 

📌2️⃣Best Practices (권장 사항)

이번에 뜬 브라우저 오류는 2개였는데,

하나는 <p>태그 안에 <p>태그가 있을 수 없다는 오류여서 내부의 <p>를 <span>으로 바꿔주었고, 다른 하나는

useEffect(() => {
    if (map && changeCenter && markers.length > 0) {
      const { region, subRegion } = changeCenter;
      const matchingMarker = markers.find(
        (marker) => marker.region === region && marker.subRegion === subRegion
      );
      
      if (matchingMarker) {
        const { marker } = matchingMarker;
        const center = marker.getPosition();
        
        map.panTo(center);
        handleMarkerClick(marker, region, subRegion, center);
      } else {
        console.error("선택한 지역의 마커를 찾을 수 없습니다.");
      }
    }
  }, [changeCenter, map, markers]);

맵이 처음 로드될때는 changeCenter에 아무 값이 안들어가는 줄 알았는데, changeCenter가 {region: '', subRegion: ''} 이렇게 생긴 객체여서 항상 true로 평가되기 때문에 조건문이 실행돼서 무조건 처음에 선택한 지역의 마커를 찾을 수 없다는 오류가 발생했던 거였어서 changeCenter ➡️ changeCenter.region && changeCenter.subRegion 로 바꿔주었다.

 

낮은 해상도로 제공되는 이미지는 마커이미지였는데 Lighthouse에서 측정된 크기가 1*1인데 표시된 크기가 24*29로 떠서 점수가 깎였는데 window.google.maps.Marker로 설정할 때 사이즈를 정확히 지정해줘도 계속 1*1로 측정돼서 포기..했다

그래도 브라우저 오류 뜨는 것만 해결해도 점수가 확 올라서 목표치는 달성했다!!

 

로컬 점수

배포 후 점수