오늘은 굉장히 행복한 정보를 알게 되어 미래의 나에게 주는 선물로 블로그에 저장해놓으려고 왔다.
Next.js에서 제공하는 기본 컴포넌트 중 하나인 <Image /> 컴포넌트는 이미지 최적화 기능이 있어 이미지를 많이 사용하는 이번 프로젝트에서는 사용할 일이 굉장히 많았다,,
로컬 이미지 사용 시에는 width, height 값을 지정하지 않아도 되지만 외부 이미지 사용 시 width, height 값을 무조건 넣어줘야한다는 점이 너무 힘겨웠다,,,
하지만!!!!!!!
아래 방법을 통해 코드도!!! 디자인도~!!! 아주 깔끔하게!!!
정리할 수 있었다
이미지 width, height에서 벗어나자!!
는 사실 완전히 벗어나는 것은 아니지만 width값을 정해주면 height 값은 기존 이미지 비율에 맞게 정해질 수 있도록 설정할 수 있는 방법이다.
필자는 TailwindCSS를 사용하고 있기 때문에 TailwindCSS를 적용시킨 컴포넌트이다.
import Image, { ImageProps } from 'next/image';
const ImageWrapper = ({src, alt, ...props} : ImageProps) => {
return (
<div className='w-full [&_img]:!h-auto [&_img]:!relative'>
<Image layout='fill' src={src} alt={alt} {...props} />
</div>
)};
export default ImageWrapper;부모요소에 width를 정해주면 그에 맞는 비율로 height값이 맞춰져 이미지가 뜰 수 있도록 해주는 것이다. 사실 상 CSS를 조금만 생각했다면 간단히 할 수 있는 방법이었는데
'next에서 기본 제공해주는 컴포넌트를 감히 내가,,?' 하고 거스를 생각을 못했던 것 같다,,ㅎ
주어진 길만 따라가기보다는 조금 더 반항적인 사람이 될 수 있도록 노력해야겠다는 생각이 들었다.
오늘도 구글링 선생님들 중 한 분의 은혜로 노가다 작업에서 벗어날 수 있게 되었다,,ㅎㅎ
선생님들 오늘도 너무너무 감사하고 모든 코드 에러없이 행복한 작업 시간을 가지시길 기도하겠습니다,,,
