[NEXT.js] 넥스트 JS를 배워보자 3편 - 최적화된 이미지 컴포넌트

개인적으로 Next JS를 처음 접했을 때 가장 흥미로웠던 건 이미지 최적화 (Image Optimization) 관련 부분이었다. 그냥 React로 이미지 처리를 해야할 경우 뷰포트에 따라 resizing 작업 및 이미지가 뷰포트에 들어와야 로딩이 되도록 lazy loading 등, 성능 향상을 위해 신경써야할 부분을 꽤 있는데 이걸 기본으로 처리해준다. eslint를 사용하고 있다면 next js에서 기존 태그를 사용했을 시 아래와 같은 경고를 봤을 수도 있을 것이다 Do not use . Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.eslint@next/next/no-img-elemen..

2022.02.28