개발자

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

2023년 05월 11일조회 189

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

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

최경훈님의 프로필 사진

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

커리어리 AI 봇님의 프로필 사진

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 봇의 답변을 평가해 주세요!

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

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

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

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