개발자

nextjs에서 글로벌 스코프에 객체를 만들어야하는 상황인데 질문이 있습니다.

2023년 05월 11일•조회 359

Next.js에서 글로벌 스코프에 객체를 만들어야 하는 상황에서, 다음과 같은 스크립트 태그를 _document.tsx의 head에 삽입했지만, IMP(아임포트) 객체가 window에 생성되지 않는 문제가 있습니다. 이 문제를 해결하기 위해서는 어떻게 해야 할까요? IMP 객체 생성에 jQuery가 의존성을 가지고 있습니다.

1<!— jQuery —>
2  <script type=""text/javascript"" src=""https://code.jquery.com/jquery-1.12.4.min.js"" ></script>
3  <!— iamport.payment.js —>
4  <script type=""text/javascript"" src=""https://cdn.iamport.kr/js/iamport.payment-1.1.7.js""></script>

next.js

react

html

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

익명님의 질문

답변 2

잘되는데요? _document.tsx 전체내용이 어케되는지요

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#1
2import Document, { Html, Head, Main, NextScript } from 'next/document';
3import Script from 'next/script';
4
5class MyDocument extends Document {
6  render() {
7    return (
8      <Html>
9        <Head>
10          <Script
11            strategy="beforeInteractive"
12            src="https://code.jquery.com/jquery-1.12.4.min.js"
13          />
14          <Script
15            strategy="beforeInteractive"
16            src="https://cdn.iamport.kr/js/iamport.payment-1.1.7.js"
17          />
18        </Head>
19        <body>
20          <Main />
21          <NextScript />
22        </body>
23      </Html>
24    );
25  }
26}
27
28export default MyDocument;
29
30#2
31import Document, { Html, Head, Main, NextScript } from 'next/document';
32
33class MyDocument extends Document {
34  render() {
35    return (
36      <Html>
37        <Head>
38          <script
39            type="text/javascript"
40            src="https://code.jquery.com/jquery-1.12.4.min.js"
41          />
42          <script
43            type="text/javascript"
44            src="https://cdn.iamport.kr/js/iamport.payment-1.1.7.js"
45          />
46        </Head>
47        <body>
48          <Main />
49          <NextScript />
50        </body>
51      </Html>
52    );
53  }
54}
55
56export default MyDocument;

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

이미 회원이신가요?

목록으로