Next.js Script 와 Image 컴포넌트

01_Script

서버 및 클라이언트 모두 자바스크립트 코드를 실행하고 데이터를 초기화 하는데 사용되는 컴포넌트

• 서버사이드 데이터 로딩 : 페이지가 서버에서 처음 렌더링 될 때 데이터초기화 하는데 사용

• 클라이언트 사이드 데이터 로딩 : 페이지가 클라이언트에서 로딩될 때 특정 작업 수행하도록 설정

• src : 로드할 스크립트의 파일 경로 지정

• strategy : 언제 로드하고 실행할지 스크립트의 로드 전략 설정
• afterInteractive : 스크립트의 기본전략으로 , 스크립트가 페이지 상호작용한 후에 실행 (초기페이지로딩, 폼 유효성검사 스크립트같은것.)
• beforeInteractive : 스크립트가 페이지 상호작용 가능한 상태 이전에 로드되고 실행 (hydration 이전)
• lazyOnload : 스크립트가 완전히 로드된 후에 실행 (페이지 초기로딩과 상관없는 페이지에 사용)
• worker(experimental) : Service Worker 와 같은 백그라운드 워커 스크립트를 로드하고 실행하는데 사용

• onLoad : 스크립트 파일이 브라우저에 성공적으로 로드되면 실행할 함수 지정
• 스크립트 파일에 추가적인 초기화 작업이 필요한 경우 onLoad 를 사용하여 수행
• beforeInteractive 와 사용 불가. (onReady 권장)

• onReady : 스크립트 파일이 브라우저에 로드되고 스크립트 내 모든 작업이 완료되고 페이지의 모든 요소에 대한 상호작용이 가능한 상태일때 실행할 함수 지정
• 스크립트가 완전히 초기화 되고 페이지의 모든 요소 초기화 + 상호작용 작업 완료된 후 호출

• onError : 스크립트 로드 중 오류발생 시 실행할 함수 지정

02_Image

이미지를 효율적이게 처리하고 최적화 하기 위한 Image 컴포넌트 제공

• 이미지를 최적화 : 페이지 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있다.

• 이미지 포맷 : WebP, JPEG, PNG 등 다양한 이미지 포맷 지원.

• 반응형 이미지 : 반응형 이미지 쉽게 생성 가능. 다양한 크기의 이미지를 제공하며 브라우저 창 크기에 따라 적절한 크기 자동설정 가능

• 레이아웃 속성 : 이미지의 레이아웃 속성을 통해 레이아웃이 제어 가능하다.
• intrinsic : 레이아웃 기본값으로 이미지의 원본 크기를 유지하면서 조정
• fixed : 지정된 너비와 높이로 이미지가 고정
• responsive : 반응형 이미지로 가로 비율을 유지하면서 너비만 지정

• 미리보기 이미지 : 이미지 로딩 전 미리보기 이미지를 생성하여 페이지 레이아웃이 변경되지 않고 사용자 경험을 향상시킨다.

• Lazy loading : 레이지 로딩을 자동으로 지원하여 화면에 나타날 때 이미지를 로드한다.
• 화면이 이미 나타난 상태에서 이미지를 로드하기 때문에 전체화면이 늦게뜰 일이 없다.
• ⇒ 페이지 초기 로딩성능을 향상시키고 대역폭을 절약한다.

• 효율적인 캐싱
• 이미지를 효율적으로 캐싱하여 이미지 로딩을 최적화
• 기본동작, 브라우저 자체 최적화, 서버 최적화 총 세가지의 캐싱 전략이 있다.

• 테마감지
• 테마(다크,라이트) 에 따라 이미지를 동적으로 선택할 수 있다.

• 애니메이션 이미지
• GIF 와 같은 애니메이션 이미지를 지원한다.
• 기본적으로 이미지를 자동으로 최적화 하고, 로딩할때도 애니메이션을 유지한다.

• loader : 이미지 로딩 방식을 지정하는 함수

• fill : 이미지를 자동으로 채울지 설정하는 속성

• sizes : 반응형 이미지의 크기 조절 ex - sizes=’(max-width:768px) 100vw’

• quality : 이미지 품질을 설정 (1-100 까지의 정수). 높으면 높을수록 느리다.

• priority : 이미지 로딩우선순위 설정

• placeholder : 이미지 로딩 중 표시할 미리보기 이미지 설정

• styles : 커스텀 css 스타일 지정하여 이미지에 스타일링 적용

• onLoadingComplete : 이미지 로딩이 완료된 후 호출되는 콜백함수 설정

• onLoad : 이미지 로딩이 시작될 때 호출되는 콜백 함수 설정

• onError : 이미지 로딩 중 오류 발생 시 호출되는 콜백함수 설정

• loading : 이미지 로딩전략 설정 (eager / lazy)

• blurDataURL : 이미지 로딩 중 미리보기 이미지로 사용할 데이터 URI 설정