Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
궁금한 점이 있어요!
Đã giải quyết
Viết
·
529
1
const mapOptions = {
...,
logoControlOptions: {
position: naver.maps.Position.BOTTOM_LEFT,
},
};제 생각에는 전역 컨텍스트에 naver 객체가 생성되어 접근이 가능 한 것 같은데,
전역 컨텍스트에 naver라는 객체가 생성되는 시점이 궁금합니다.. !
Câu trả lời 2
2
안녕하세요! 좋은 질문 감사합니다 :)
정확한 이해를 위해서 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를 보시면 긴 주석으로 더욱 자세한 설명이 되어있습니다.
답변과 소스 코드 살펴보시고 답변이 부족했다면 추가로 질문 부탁드립니다. 감사합니다!😇
1
감사합니다.
강의 내용이 너무 좋아서 회사 사람들에게 전파하고 있답니다 :)
앞으로도 좋은 강의 부탁드릴게요~!