서드 파티 JavaScript는 제3자 소스에서 추가된 스크립트를 가리킵니다. 일반적으로 서드 파티 스크립트는 분석, 광고 및 고객 지원 위젯과 같은 새로운 기능을 사이트에 도입하기 위해 사용됩니다. 이러한 스크립트를 사용하면 처음부터 작성할 필요 없이 기능을 추가할 수 있습니다.
서드 파티 JavaScript 추가하기(Adding Third-Party JavaScript)
다음은 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>이 스크립트에는 페이스북 SDK가 포함되어 있으며, 페이스북 소셜 플러그인 및 기타 기능을 도입하는 데 일반적으로 사용됩니다. 이 접근 방식은 작동하지만, 이러한 방식으로 스크립트를 포함시키면 동일한 페이지에서 가져온 다른 JavaScript 코드와 비교하여 언제 로드될지 명확히 알 수 없습니다. 특정 스크립트가 렌더링을 차단하고 페이지 콘텐츠 로딩을 지연시킬 수 있다면, 이는 성능에 큰 영향을 미칠 수 있습니다.
스크립트 컴포넌트 사용하기(Using the Script Component)
next/script는 HTML의 <script> 요소의 확장이며, 추가 스크립트가 가져와지고 실행되는 시기를 최적화합니다.
동일한 파일에 파일의 시작 부분에 next/script에서 Script를 가져오기 위한 import를 추가하세요.
import Script from 'next/script';이제 FirstPost 컴포넌트를 업데이트하여 Script 컴포넌트를 포함하도록 변경해보세요.
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는 제3자 스크립트가 언제 로드되어야 하는지를 제어합니다.lazyOnload값은 Next.js에게 해당 스크립트를 브라우저의 유휴 시간에 지연해서 로드하도록 지시합니다.onLoad은 스크립트가 로드 완료된 직후에 실행될 JavaScript 코드를 지정하는 데 사용됩니다. 이 예제에서는 스크립트가 올바르게 로드되었다는 메시지를 콘솔에 기록합니다.
http://localhost:3000/posts/first-post에 접속해보세요. 브라우저의 개발자 도구를 사용하면 Console 패널에 위의 메시지가 기록된 것을 확인할 수 있습니다. 또한 window.FB를 실행하여 스크립트가 전역 변수를 채웠는지 확인할 수 있습니다.
참고: 페이스북 SDK는 성능 면에서 효율적인 방식으로 서드 파티 스크립트를 애플리케이션에 추가하는 방법을 보여주기 위해 임의의 예제로 사용되었습니다. 이제 Next.js에서 서드 파티 기능을 포함하는 기본적인 내용을 이해했으므로, 계속 진행하기 전에
FirstPost에서 Script 컴포넌트를 제거할 수 있습니다.
Script 컴포넌트에 대해 더 자세히 알고 싶다면 공식 문서를 확인해보세요.
https://nextjs.org/learn/basics/assets-metadata-css/third-party-javascript
