[Next.js] Image 컴포넌트로 배경 처리하기

오늘은 Image 컴포넌트를 이용해 배경 처리를 하는 방법을 알아보겠습니다. Next의 Image 컴포넌트를 사용하지 않고 css의 background-image 속성을 사용해 배경 처리를 해줄 수도 있지만 이럴 경우 resizing을 별도로 처리해줘야 하기 때문에 이미지 최적화를 자체적으로 지원하는 Image 컴포넌트를 사용해서 배경 처리를 해주도록 하겠습니다. Image 컴포넌트에 관한 포스트를 아직 읽지 않았다면 아래 링크를 참고해주세요. [NEXT.js] 넥스트 JS를 배워보자 3편 - 최적화된 이미지 컴포넌트 개인적으로 Next JS를 처음 접했을 때 가장 흥미로웠던 건 이미지 최적화 (Image Optimization) 관련 부분이었다. 그냥 React로 이미지 처리를 해야할 경우 뷰포트에 따..

2022.04.10