유저 빡치게 하는 법 = 이미지 무한 로딩시키기

👩‍💻 알게된것

1. Next의 이미지 최적화

• next에서는 이미지와 같은 static assets들을 public 디렉토리에 넣는다.
• next에서는 서드 파티 라이브러리를 사용할 필요 없이 이미지 최적화를 디폴트로 지원해준다.
• build시 이미지를 최적화 하는게 아니라, 사용자의 요청이 있을때 on-demand로 이미지를 최적화한다. (기본이 Lazy loading)
  • Lazy loading : viewport에 들어오기 전까지 이미지의 로딩을 지연시키는 것

import Image from 'next/image'
import profilePic from '../public/me.png'

<Image
     src="/me.png"
     alt="Picture of the author"
     width={500}
     height={500}
      />

이런식으로 next에서 제공하는 Image Component를 이용하면 손쉽게 resizing과 optimizing이 가능하다! 완전 신기...
제공하는 모든 props는 여기에서 확인.