[Docs] 서드파티 자바스크립트 추가하기

개발/Next.js

[Docs] 서드파티 자바스크립트 추가하기

yoosmg 2023. 5. 7. 02:55

서드파티 자바스크립트는 제3자 소스에서 추가된 모든 스크립트를 말한다.

일반적으로 서드파티 스크립트는 분석, 광고, 고객 지원 위젯 등 사이트에 새로운 기능을 간편히 도입하기 위해 포함된다.

Next.js 페이지에 서드파티 스크립트를 추가하는 방법을 자세히 살펴보자.
에디터에서 pages/posts/first-post.js를 열고 다음 코드를 찾는다.

<Head>
  <title>First Post</title>
</Head>

보통 최대한 빨리 로드하고 실행해야 하는 스크립트는 페이지의 <head> 내에 추가한다.

HTML <script> 요소를 사용하는 경우, 다음과 같이 외부 스크립트를 추가할 수 있다:

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

이 스크립트는 Facebook 소셜 플러그인 및 기타 기능을 도입하는 데 흔히 사용되는 Facebook SDK를 포함한다.

이러한 방식으로 스크립트를 포함하면 작동은 하지만 같은 페이지에서 가져온 다른 자바스크립트 코드와 비교해서 어느 시점에 로드될지는 명확하게 알 수 없다.

Script 컴포넌트 사용하기

next/script는 HTML <script> 요소의 확장형이며 추가 스크립트를 가져와 실행할 때 최적화된다.
같은 파일의 파일 시작 부분에 next/script에서 Script 임포트를 추가한다:

import Script from 'next/script';

이제 Script 컴포넌트를 이용해 FirstPost 컴포넌트를 업데이트한다:

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

Script 컴포넌트에 몇 가지 추가 프로퍼티가 정의된 것을 확인할 수 있다:

strategy는 서드파티 스크립트가 로드되는 시기를 제어한다. lazyOnload 값은 브라우저 idle time(유휴시간)동안 특정 스크립트를 느리게 로드하도록 Next.js에 지시한다. idle time은 시스템이 사용 가능한 상태이나 실제 작업을 하지 않는 시간을 일컫는다. 주로 데이터 입출력 처리 시간의 차이로 인해 대기 상태에 있는 경우를 말한다.
onLoad는 스크립트 로딩이 완료된 즉시 자바스크립트 코드를 실행하는 데 사용된다. 위 예제에서는 스크립트가 올바르게 로드되었다는 메시지를 콘솔에 기록하고있다.

이제 http://localhost:3000/posts/first-post 에 접속해보면 콘솔 패널에 위와 같은 메시지가 표시된다.

또한 window.FB를 실행하여 스크립트가 이 전역 변수를 채웠는지 확인할 수 있다.

Quick Review: What does next/script simplify for you? Loading third-party scripts