http://dapi.kakao.com/v2/maps/sdk.js?appkey={key}&autoload=false&libraries=services
로 요청시 content-type이 text/html으로 오면서(실패함) net::ERR_BLOCKED_BY_ORB 문제가 생깁니다.
next.js에서
const script: HTMLScriptElement | null = document.createElement(“script”);
script.id = “kakao-maps-sdk”;
script.src = //dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_APP_KEY}&autoload=false&libraries=services;
script.async = true;
이렇게 직접 로드해서 사용하고있습니다.
시크릿모드, 캐시지우기 전부 해봤습니다.
항상 이러는게 아니고 로드할 때, 높은 확률로 발생합니다.
로드가 잘 될때도 있습니다.
Next에서 상대 경로를 내부 URL로 인식하면 발생할 수 있는 상황이라 아래 방법을 적용해도 동일한지 확인 부탁드립니다.
- 프로토콜을 붙여서 절대 경로로 호출
- (랜더링 이후)useEffect 내부에서 스크립트 생성 및 호출
프로토콜을 붙혔을때와 안붙혔을때, 둘다 동일하게 net::ERR_BLOCKED_BY_ORB가 뜹니다. (물론 될때도 있습니다). https://dapi.kakao.com/v2/maps/sdk.js?appkey={key}&autoload=false&libraries=services
만약 로딩이 됐다해도.kakao.js랑 services.js가 net::ERR_BLOCKED_BY_ORB 뜨는경우도 있습니다.
<Script
id="kakao-sdk"
strategy="beforeInteractive"
src={`https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_APP_KEY}&autoload=false&libraries=services`}
/>
위 방법으로도 해보았으니 같은 증상입니다.
2는 해보고 추가 댓글 달겠습니다.
// src/contexts/KakaoMapContext.tsx
"use client";
import { createContext, useContext, useEffect, useState, ReactNode } from "react";
// Kakao App Key를 환경 변수에서 가져옵니다.
const KAKAO_MAP_APP_KEY = process.env.NEXT_PUBLIC_KAKAO_APP_KEY;
// Context가 제공할 값의 타입을 정의합니다.
interface KakaoMapContextValue {
isLoaded: boolean;
}
// Context를 생성합니다.
const KakaoMapContext = createContext<KakaoMapContextValue>({
isLoaded: false,
});
/**
* Kakao Map SDK를 동적으로 로드하고, 로드 상태를 관리하는 Provider 컴포넌트입니다.
* 이 Provider는 애플리케이션의 최상단(예: RootLayout)에서 한 번만 사용되어야 합니다.
*/
export function KakaoMapProvider({ children }: { children: ReactNode }) {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
// 렌더링 이후 클라이언트 사이드에서만 실행됩니다.
// 이미 Kakao Map SDK가 로드되었다면 중복 실행을 방지합니다.
if (window.kakao && window.kakao.maps) {
setIsLoaded(true);
return;
}
// 이미 스크립트 태그가 DOM에 추가되었는지 확인하여 중복 추가를 방지합니다.
const existingScript = document.getElementById('kakao-maps-sdk');
if (existingScript) return;
// 새로운 script 요소를 생성합니다.
const script = document.createElement('script');
script.id = 'kakao-maps-sdk';
script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_APP_KEY}&libraries=services&autoload=false`;
script.async = true;
// 스크립트 로드가 완료되면 실행될 콜백 함수입니다.
script.onload = () => {
// Kakao Map SDK의 load 함수를 호출하여 초기화를 완료합니다.
window.kakao.maps.load(() => {
console.log("✅ Kakao Map SDK가 동적으로 로드되었습니다.");
setIsLoaded(true);
});
};
// 스크립트 로드에 실패하면 에러를 콘솔에 출력합니다.
script.onerror = () => {
console.error("❌ Kakao Map SDK를 로드하는 데 실패했습니다.");
};
// 생성된 script 요소를 <head>에 추가하여 로드를 시작합니다.
document.head.appendChild(script);
}, []); // 이 useEffect는 컴포넌트 마운트 시 한 번만 실행됩니다.
return (
<KakaoMapContext.Provider value={{ isLoaded }}>
{children}
</KakaoMapContext.Provider>
);
}
/**
* Kakao Map 로드 상태를 쉽게 사용하기 위한 커스텀 훅입니다.
* const { isLoaded } = useKakaoMap(); 와 같이 사용합니다.
*/
export const useKakaoMap = () => useContext(KakaoMapContext);
변경해보았으나
sdk.js?appkey={key}&libraries=services&autoload=false 200
kakao.js 200
services.js (실패함)net::ERR_BLOCKED_BY_ORB
같은증상입니다.
코드상 문제는 없어 보이며, 동일한 코드로 확인해도 말씀하신 현상이 재현되지 않아 추가 확인해드리기 어려운 상태입니다.
증상이 간헐적으로 발생한다면, 네트워크 환경이나 브라우저 설정 영향일 가능성도 있어요.
network 탭에서 요청-응답 간 차이가 있는지 확인해 주시고 시크릿 모드에서도 동일하게 재현되는지 확인해보셔야 할 것 같습니다.
root layout에서 context로 묶기보다 필요한 page에서 context로 묶어서 사용하니 어느정도 괜찮아졌습니다.
더 확인해보고 다시 알려드리겠습니다.
시크릿모드에서도 동일증상 발생합니다.
https://drive.google.com/file/d/15JqwArtc7sLz1kf9_KETIminCQ8tT6UW/view?usp=sharing
잘 될때가 있고 안될 때가 있네요.
실행 하는 환경에 따라서 잘 될때도 있는거 보면 그냥 환경문제인가 싶기도합니다..
1개의 좋아요
