[TIL] 13주차 수요일. 심화 프로젝트 - 트러블 슈팅

트러블

홈 페이지에서 생성하기 누름 -> 기본 정보 입력 모달 -> 모달의 생성하기 누르면 지도 불러오는 페이지로 이동
위와 같은 과정에서, 지도 불러오는 페이지로 이동했는데 지도가 로드 되지 않는 문제가 발생했다.
새로고침을 하면 작동이 되는데, 페이지에서 페이지로 넘어갈 때 안 되는 문제.

해결 과정

다른 팀원 분이 발견하신 문제였는데 그 분이 해결 방법을 찾아보시고, 튜터님과 다른 수강생들한테 도움을 구하러 다니셨지만 해결하지 못 해서 골머리를 앓고 있는 중이었다.
팀 회의에서 보이는 코드를 다 하나씩 주석처리 해 가면서 문제가 어디서 발생하는지 찾아 보았고, 아무래도 다른 것보다 맵 가져오는 컴퍼넌트의 문제인 것 같다고 팀원들과 의견을 나누게 되었다.
그리고, 최후의 방법으로 gpt한테 도움을 구했고... 해결할 수 있었다.

코드

변경 전 코드

'use client';

import { IMGURLS } from '@/constants/images.constant';
import useGeoLocation from '@/lib/hooks/useGeolocation';
import Script from 'next/script';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

const KAKAO_SDK_URL = //dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&libraries=services,clusterer&autoload=false;
const imgUrl = IMGURLS.myLocationIconImgUrl;

const KakaoMap = () => {
  const myLocation = useGeoLocation();
  return (
    <>
      <section className="h-lvh mr-1">
        <Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />
        <Map
          center={
            myLocation ? { lat: myLocation.latitude, lng: myLocation.longitude } : { lat: 37.715133, lng: 126.734086 }
          }
          style={{ width: '800px', height: '100%' }}
        >
          {myLocation && (
            <MapMarker
              position={{ lat: myLocation.latitude, lng: myLocation.longitude }}
              image={{ src: imgUrl, size: { width: 70, height: 70 } }}
              title="현재 위치"
            />
          )}
        </Map>
      </section>
    </>
  );
};

export default KakaoMap;

변경 후 코드

'use client';

import { useEffect, useState } from 'react';
import { IMGURLS } from '@/constants/images.constant';
import useGeoLocation from '@/lib/hooks/useGeolocation';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

const KAKAO_SDK_URL = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&libraries=services,clusterer&autoload=false`;
const imgUrl = IMGURLS.myLocationIconImgUrl;
const KakaoMap = () => {
  const myLocation = useGeoLocation();
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const script = document.createElement('script');
    script.src = KAKAO_SDK_URL;
    script.onload = () => {
      kakao.maps.load(() => {
        setIsLoaded(true);
      });
    };
    document.head.appendChild(script);
    return () => {
      document.head.removeChild(script);
    };
  }, []);
  return (
    <section className="h-lvh mr-1">
      {isLoaded && (
        <Map
          center={
            myLocation ? { lat: myLocation.latitude, lng: myLocation.longitude } : { lat: 37.715133, lng: 126.734086 }
          }
          style={{ width: '800px', height: '100%' }}
        >
          {myLocation && (
            <MapMarker
              position={{ lat: myLocation.latitude, lng: myLocation.longitude }}
              image={{ src: imgUrl, size: { width: 70, height: 70 } }}
              title="현재 위치"
            />
          )}
        </Map>
      )}
    </section>
  );
};
export default KakaoMap;

메모

코드를 항상 뜯어보고 이해하자...
지금은 시간이 부족해서 구현하기에만 급급하지만...
그리고 문제 해결에 적극적으로 나서자 시간 낭비를 줄이도록