카테고리

질문 & 답변
세부 분야

프론트엔드
해결 여부

해결됨

궁금한 점이 있어요!

23.03.01 16:50 작성 조회수 389

const mapOptions = {
            ...,
            logoControlOptions: {
                position: naver.maps.Position.BOTTOM_LEFT,
            },
        };

제 생각에는 전역 컨텍스트에 naver 객체가 생성되어 접근이 가능 한 것 같은데,

전역 컨텍스트에 naver라는 객체가 생성되는 시점이 궁금합니다.. !

Next.js 시작하기(feat. 지도 서비스 개발)

next/script로 네이버 지도 불러오기

강의실 바로가기

답변 2

좋아요순

최신순

답변을 작성해보세요.

박용주

지식공유자

2023.03.02

안녕하세요! 좋은 질문 감사합니다 :)

정확한 이해를 위해서 next.js 오픈 소스의 Script 컴포넌트에 대한 소스 코드를 해석하는 것이 좋습니다.
https://github.com/vercel/next.js/blob/canary/packages/next/src/client/script.tsx
위 링크는 next/script에 대한 소스 코드입니다.

1. 전역 변수 'naver' 객체가 생성되는 시점
Map.tsx 파일의 <Script> 에서 선언한 js 파일인

`https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.NEXT_PUBLIC_NCP_CLIENT_ID}`

가 load(다운로드 + 실행까지)된 이후부터 naver 객체가 생성됩니다.
next/script 소스 코드에서 'loadScript' 함수를 호출함으로써 네이버 map.js script를 불러오게 되는데, 소스코드 line 74와 line 129 등을 확인해보면 document.body.appendChild를 통해 script를 불러오는 로직을 실행한다는 것을 알 수 있습니다.

추가로, 'loadScript' 함수는 line 226의 useEffect 안에서 실행됩니다.

useEffect(() => { // script.tsx, line 226
    if (!hasLoadScriptEffectCalled.current) {
      if (strategy === 'afterInteractive') {
        loadScript(props)
      } else if (strategy === 'lazyOnload') {
        loadLazyScript(props)
      }

      hasLoadScriptEffectCalled.current = true
    }
  }, [props, strategy])

따라서 공식 문서(https://nextjs.org/docs/basic-features/script#strategy)에 적혀있듯 react hydration이 진행된 후 script를 불러온다는 것도 이해할 수 있습니다.

2. onReady 함수 실행 시점
이 역시 소스코드를 통해 확인할 수 있습니다.(강의와 공식 문서에 나온 설명만 이해하고 넘어가셔도 개발하는데 지장은 없습니다..! https://nextjs.org/docs/basic-features/script#executing-additional-code )
line 68과 line 217에서 각각 onReady()를 실행한다는 것을 확인할 수 있습니다.
line 68에 있는 onReady는 script가 최초로 'load'된 후 실행되며,(line 77 el.addEventListener('load', ...) 를 통해 'afterLoad' -> 'onReady' 함수가 호출됨)
line 217에 있는 onReady는 <Script>를 가진 컴포넌트가 mount될 때마다 실행됩니다.(useEffect 안에 있기 때문)
참고로, line 184를 보시면 긴 주석으로 더욱 자세한 설명이 되어있습니다.

답변과 소스 코드 살펴보시고 답변이 부족했다면 추가로 질문 부탁드립니다. 감사합니다!😇