👩🏻💻 Today Learn
- 최종프로젝트 중간발표
- 중간회고 및 추후개발사항 논의
💡 알게된 내용
Next의 <Script/>
- Next.js에서 여러 경로에 대한 타사 스크립트를 가져오려면 next/script를 사용해서 포함시켜 주어야 한다.
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<Script src="https://example.com/script.js" />
</html>
)
}- Next.js는 사용자가 여러 페이지 사이를 이동해도 스크립트가 한번만 로드 될 수 있도록 보장해준다!
Next의 Script에서 strategy 속성은?
그럼 Script사용 시 strategy 속성을 사용하는 이유는 무엇일까
해당 속성을 사용하면 스크립트 파일이 언제, 어떻게 로드될 지 동작을 미세 조정할 수 있어서 웹 페이지의 성능을 최적화할 수 있다.
strategy 속성에는 몇 가지 옵션이 있다.
beforeInteractive: 페이지가 상호작용하기 전에 스크립트가 로드되어야 할 때 사용된다. 페이지 로드 시에 스크립트가 필요한 경우에 사용된다.afterInteractive: (기본값)페이지가 로드되고 사용자가 상호작용할 준비가 된 후에 스크립트를 로드한다. 페이지의 초기 로드시간을 개선하는데 도움이 되며 페이지의 핵심 기능에 필수적이지 않은 스크립트에 적합하다.lazyOnload: 페이지 로드가 완료된 후에 스크립트를 로드한다. 예를 들어 광고 같이 사용자 경험에 직접적인 영향을 주지 않는 스크립트에 적합하다.worker: 웹 워커 내에서 스크립트를 로드하고 실행한다.
<Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />페이지가 로드될때 지도가 로드되어야 하기 때문에 beforeInteractive 를 사용하였다.
✍🏻 회고
프로젝트를 하면서 Next.js를 사용하고 있지만 제대로 알고 사용하는 부분이 있긴한가 싶다🤦🏻♀️
이제 중간발표가 끝났고 앞으로는 최적화도 해야하기 때문에 그 부분에 대해 더 파고들어야 하겠다.!!
웰씽킹_나는 경쟁력을 갖춘 FE개발자로 성장할 것이다.