개발 메모장 개발 메모장

img

• Next.js Image 태그 height auto로 사용하기 (update 13 version)

  Next.js 2023. 8. 4. 16:11

  이 글은 next v13.4를 기반으로 작성되었습니다. Next 12 버전을 기반으로 height auto Image태그를 작성한 지 오래되지 않아 13 버전에서는 더욱 간단하게 사용할 수 있게 되어 소개하려고 한다. // AutoHeightImage.tsx import Image, { ImageProps } from 'next/image'; interface IAutoHeightImage extends Omit { width?: string | number; alt: string; } const AutoHeightImage = ({ width = '100%', alt = '', ...props }: IAutoHeightImage) => ( ); export default AutoHeightImage; ..

  Read More
• Next Image 똑똑하게 사용하기(feat. Vercel Deploy)

  Next.js 2022. 10. 24. 18:56

  1. 개요 웹 사이트를 제작할 때 로딩 속도와 퀄리티에 있어 가장 중요한 부분은 이미지라고 생각합니다. 너무 낮은 화질의 이미지를 사용할 경우 로딩 속도는 빨리질 수 있지만 사이트의 전체적인 퀄리티는 무척 낮아 보이는 문제가 발생하며, 이미지가 너무 높을 경우 이미지를 로딩하는데 긴 시간이 걸려 레이아웃 쉬프트가 발생하거나 사이트의 전체적인 로딩이 늦어질 수 있습니다. 그렇기 때문에 웹 사이트를 제작한 뒤 최적화를 진행할 때 가장 먼저 진행해야 되는 부분이 이미지를 최적하는 것이라고 생각합니다. 이번 글에서는 Next를 사용하는 데 있어 제가 이미지를 최적화하는 방법에 대해 소개하겠습니다. 2. Web에서 주로 사용하는 이미지 형식 JPEG : 가장 널리 사용하는 파일 형식으로 거의 모든 브라우저에서 ..

  Read More
• NextJS Image에서 fallback 활용하기

  Next.js 2021. 9. 16. 12:24

  NextJS@10 버전에서 나온 Image태그는 만족스러운 성능을 제공해 주지만 아쉬운 경우도 있습니다. 만약 내가 설정한 이미지가 존재하지 않을 때 대체 이미지를 보여주는 방법을 제공하지 않는다는 것이다. 나는 아래와 같은 방법을 활용하여 이미지가 존재하지 않을 때 이미지를 설정해 주었다. import React, { useState } from 'react'; import Image from 'next/image'; const ImageFallback = (props) => { const { src, fallbackSrc, ...others } = props; const [imgSrc, setImgSrc] = useState(false); const [oldSrc, setOldSrc] = useSta..

  Read More