Next.js
최적화된 이미지 넣는 법
일반 이미지 넣는 법 1. public폴더에 이미지 추가 2. 태그 사용 최적화 이미지 넣는 법 1. public폴더에 이미지 추가 2. import 추가 import Image from 'next/image' 3. 컴포넌트 사용 (장점) 1. lazy loading => 로딩속도 최적화 2. 사이즈 최적화 3. layout shift 방지 => 레이아웃 어긋남 방지 (단점) 1. width, height 옵션이 필수임 => fill="true" 넣고, 부모 가 width, height를 대신 넣어도 됨. => 절대경로가 아닌 import 방식으로 이미지를 가져오면 안 써도 됨. import test from "./test.png" => 하지만, 이미지가 많은 경우 하나하나 import 하기 번거롭다. ..
