ReferenceError: kakao is not defined

지도/로컬 API
#1

안녕하세요. 저는 nextjs 토이프로젝트 진행중에 오류가 생겨서 질문드립니다.
카카오 지도를 화면에 잘 표시하다가
검색 기능을 활용하려고 하니까 ‘ReferenceError: kakao is not defined’ 애러가 납니다.

export default function SearchLocation() {
  const [inputFocus, setInputFocus] = useState(false);
  const [inputText, setInputText] = useState("");
  const [searchedList, setSearchedList] = useState<SearchedList[]>();

  const ps = new kakao.maps.services.Places();
  const inputSubmit = (e) => {
    if (e.key === "Enter") {
      console.log(inputText);
      searchPlaces(inputText);
    }
  };

  const searchPlaces = (keyword: string) => {
    ps.keywordSearch(keyword, placeSearchCB);
  };
  const placeSearchCB = (data: any, status: any, pagination: any) => {
    if (status === kakao.maps.services.Status.OK) {
      // 정상적으로 검색이 완료됐으면
      // 검색 목록과 마커를 표출합니다`미리 서식이 지정된 텍스트`
      displayPlaces(data);
      // 페이지 번호를 표출합니다
      //displayPagination(pagination);
    } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
      alert("검색 결과가 존재하지 않습니다.");
      return;
    } else if (status === kakao.maps.services.Status.ERROR) {
      alert("검색 결과 중 오류가 발생했습니다.");
      return;
    }
  };

  const displayPlaces = (places: any) => {
    let bounds = new kakao.maps.LatLngBounds();
    const itemEl = [];
    for (let i = 0; i < places.length; i++) {
      // 마커를 생성하고 지도에 표시합니다
      let placePosition = new kakao.maps.LatLng(places[i].y, places[i].x);
      //marker = addMarker(placePosition, i),
      itemEl.push({ index: i, place: places[i] }); // 검색 결과 항목 Element를 생성합니다
    }
    console.log("itemEl", itemEl);
    setSearchedList(itemEl);
  };
  return (
    <section>
      <div className="relative">
        {!inputFocus && (
          <FaSearch className="absolute left-6 top-1 text-pink-300" />
        )}

        <input
          type="text"
          onKeyDown={inputSubmit}
          onChange={(e) => setInputText(e.target.value)}
          onBlur={() => !inputText && setInputFocus(false)}
          onFocus={() => setInputFocus(true)}
          className={`rounded-md pl-2 outline-none focus:outline-pink-300 ${
            !inputFocus && "caret-transparent"
          }`}
        />
      </div>

      {/* 검색결과 목록 항목들을 표시 */}
      <div className="h-[300px] overflow-y-scroll">
        {searchedList &&
          searchedList.map((item) => (
            <SearchedCard key={item.place.id} item={item} />
          ))}
      </div>
    </section>
  );
}

최상의 루트 layout.tsx

declare global {
  interface Window {
    Kakao: any;
  }
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Script
          src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${APIKEY}&libraries=services,clusterer,drawing&autoload=false`}
          strategy="beforeInteractive"
        />
        <div id="login-modal" />
        <section className="flex h-screen">
          <nav className=" h-full bg-slate-100">
            <Sidebar />
          </nav>
          {children}
        </section>
      </body>
    </html>
  );
}

뭐가 잘못되었을까요 ㅠㅠ 도와주세요

#2

SDK 내부에서 동적으로 필요한 스크립트를 추가하는 로직이 있습니다.
Next Script를 이용하게 되면 내부에서 동적으로 처리하는 방식과 충돌할 수 있기 때문에
기본 script 태그를 사용하거나 useEffect훅에서 JS SDK 스크립트를 동적으로 로드하는 방식을 고려해주세요.

#3

감사합니다:)

export default function SearchLocation() {

  const [ps, setPs] = useState({});

  useEffect(() => {
    kakao.maps.load(() => {
      setPs(new kakao.maps.services.Places());
    });
  }, []);

이런 식으로 했더니 됐습니당!

1개의 좋아요