next/image

·Next.js
📍 왜 next/image 와 를 비교하게 되었을까?`Next/image` 를 사용하는 것이 좋다고는 많이 들어봤지만, 실제로 어떤 식으로 최적화가 이루어지고 어떻게 동작하는 지에 대해서는 깊이 이해하지 못한 채 사용했던 것 같다.이미지의 수가 많을 때 어떤 식으로 최적화해야 하는지 궁금했고, `next/image` 와 `` 태그를 비교하여 각각의 장단점과 성능 차이를 명확히 이해하는 것이 중요하다고 느껴졌다.이번 포스팅에서는 두 방법의 성능 차이점에 대해서 알아보고자 한다. 📍 랜덤하게 불러온 더미 이미지 예시 홈 화면에서 위의 사진과 같이 여러개의 사진을 보여주고 있습니다.React Query의 `useInfiniteQuery` 를 사용하여 무한 스크롤을 적용했으며, 이로 인해 클라이언트 컴포넌..
·Next.js
📍 문제 상황Supabase storage에 담겨있는 이미지를 불러오기 위해 `` 를 작성하여 실행하였더니위의 사진과 같은 에러가 발생하였습니다.Next.js 에서 `next/image` 를 사용해서 외부에서 호스팅되는 이미지를 렌더링하려면 `next.config.js` 또는 `next.config.mjs` 파일에 외부 경로를 등록해주어야 한다고 합니다. 📍 next.config.mjs 에 외부 이미지 등록하기Next.js 프로젝트의 `next.config.js` 또는 `next.config.mjs` 파일을 연 후, `images` 속성을 추가하여 외부 호스트를 지정합니다.아래 예시는 Supabase Storage 에서 이미지를 불러오기 위한 설정입니다.외부 이미지 URL 패턴을 `remotePatt..
수방방
'next/image' 태그의 글 목록