개발자
Next.js에서 글로벌 스코프에 객체를 만들어야 하는 상황에서, 다음과 같은 스크립트 태그를 _document.tsx의 head에 삽입했지만, IMP(아임포트) 객체가 window에 생성되지 않는 문제가 있습니다. 이 문제를 해결하기 위해서는 어떻게 해야 할까요? IMP 객체 생성에 jQuery가 의존성을 가지고 있습니다.
답변 2
Next.js에서 글로벌 스코프에 객체를 생성하기 위해서는 다음과 같은 방법을 고려할 수 있습니다. 1. Custom '<Script>' 컴포넌트 사용: Next.js에서는 Custom '<Script>' 컴포넌트를 사용하여 원하는 스크립트를 페이지에 추가할 수 있습니다. 이를 활용하여 '_document.tsx' 파일에 '<Script>' 컴포넌트를 작성하고, 거기에 스크립트 태그를 추가할 수 있습니다. 예를 들면: 2. 'next/head 사용: 'next/head' 모듈을 사용하여 '_document.tsx' 파일의 '<Head>' 컴포넌트 안에 직접 스크립트 '태그를 추가할 수도 있습니다. 예를 들면: 이러한 방법을 사용하여 '_document.tsx'파일에서 필요한 스크립트를 추가하면, 해당 스크립트는 Next.js의 페이지에서 글로벌 스코프에서 사용할 수 있게 될 것입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
#1 import Document, { Html, Head, Main, NextScript } from 'next/document'; import Script from 'next/script'; class MyDocument extends Document { render() { return ( <Html> <Head> <Script strategy="beforeInteractive" src="https://code.jquery.com/jquery-1.12.4.min.js" /> <Script strategy="beforeInteractive" src="https://cdn.iamport.kr/js/iamport.payment-1.1.7.js" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); } } export default MyDocument; #2 import Document, { Html, Head, Main, NextScript } from 'next/document'; class MyDocument extends Document { render() { return ( <Html> <Head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" /> <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.7.js" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); } } export default MyDocument;
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!