들어가며... 기본 html의 img태그와 달리 Next.js에서는 Image 태그가 별도로 존재하는데 lazy loading, 사이즈 최적화 , layout shift 등 다양한 기능을 제공한다. lmg 태그와 image 태그를 사용했을 때의 차이를 비교해보려고 한다. 사용방법 1) Image 를 import 해서 가져온다. 2) src에 절대경로/상대경로를 넣어준다. 3)width, height, alt 속성을 넣어준다(필수!) import Image from "next/image"; export default function Home() { return ( ); } Next의 Image태그의 성능! Image 태그 사용 시 이미지의 포맷을 wbep로 바꿔 주는데 이로 인해 이미지 크기가 줄어들어 불..
🌈 들어가며... 나는 프로젝트를 주로 react + node.js 로 구성해서 진행했다. 터미널에서 두개를 열어서 각각 셋팅을 해줬는데 번거롭기도 하고 충돌도 자주 나더라... 그런데 Next를 사용하면 한 프레임워크 안에서 다 해결할 수 있다고 한다! 그래서 사용해볼 겸 셋팅과 Next의 장점을 알아볼까한다. ☀️ Next.js 란? Next.js는 Vercel이 개발한 오픈소스 react 프레임워크이다. 풀스택 웹 애플리케이션을 구축하기 위해서 사용된다. 웹사이트 개발 시 프레임워크 없이 React 라이브러리로만 사용할 수 있지만 코드 분할, 라우팅, 데이터 처리 등과 같은 추가적인 처리가 필요하다.(최적화를 위해서 더더욱) Next를 사용하면 간편하게 사용가능. 출처 : https://nextjs..
