Next/image 컴포넌트의 내부 동작 원리를 알아보자!
·
프론트엔드/React
동작원리 Next/image 컴포넌트는 최초 이미지 요청이 왔을 때, 이미지를 최적화한 후 캐싱합니다. 다시 말해 런타임 때 처음 요청이 들어오면 최적화된 이미지를 만들고 캐싱해두었다가 재사용합니다. 이미지 최적화 전후로 .next(dist)폴더의 변화 과정을 확인해 보았습니다. 예시 .next 폴더의 이미지 최적화 전후 비교 사진입니다. cache폴더 아래 images 폴더의 유무를 주목해야합니다. 왼쪽은 이미지 요청이 한번도 발생하지 않아, images폴더도 없고 최적화된 이미지도 없는 상태입니다. 오른쪽은 이미지 요청이 1회이상 발생해서 Next.JS가 이미지를 캐싱해둔 상태입니다. 이후 요청부터는 Next.JS는 images 폴더에 캐싱해둔 이미지를 재사용합니다. 로컬에서도 확인하는 방법은 아래와..