프론트엔드 개발에서 중요한 최적화 요소 중 하나는 이미지 최적화이다.이미지는 일반적인 웹사이트에서 페이지 용량의 상당 부분을 차지하며, LCP(Largest Contentful Paint) 성능에 큰 영향을 주는 요소 중 하나이다. Next.js에서는 이미지 최적화를 위해 Image 컴포넌트를 제공한다.Image 컴포넌트는 HTML 요소를 확장하여 자동 이미지 최적화 기능을 제공하며, 단 코드 몇 줄만으로 이미지를 최적화 시켜주는 내장 기능이다. 이번 포스팅에서는 Next.js에서 이미지 최적화의 필요성과 방법에 대해 작성하고자 한다. 01. 이미지 최적화의 필요성이미지는 웹페이지에서 가장 큰 용량을 차지하는 요소 중 하나이다.이미지를 제대로 최적화하지 않으면 페이지 로딩 속도 및 성능에 부정적인 영향..
01. LayoutNext.js 14에서 Layout은 앱 전체 구조를 구성하는 중요한 요소로, 여러 페이지에서 공통적으로 사용되는 UI 요소를 한 번에 관리할 수 있게 해준다. 특히 Next.js의 App Router에서 레이아웃 기능이 강화되었으며, 페이지 간 전환시에도 지속적으로 유지되는 구조이다. #1. Navbar와 같은 공통된 Layout일반적으로 Navbar, Footer, 전역 스타일과 같은 요소들은 모든 페이지에서 공통적으로 적용되어야 한다. 하지만 이때 공통된 요소들을 모든 Page.tsx에 import하는 것은 매우 비효율적이다. 페이지 수가 적다면 어느정도는 가능하지만 만약 100페이지 이상된다면 해당 요소들을 모든 페이지에서 불러와야 하는 문제점이 발생한다. 이를 해결하기 위해 공..
Front-End/Next.js 2024. 11. 14. 14:50
프론트엔드 개발에서 중요한 최적화 요소 중 하나는 이미지 최적화이다.이미지는 일반적인 웹사이트에서 페이지 용량의 상당 부분을 차지하며, LCP(Largest Contentful Paint) 성능에 큰 영향을 주는 요소 중 하나이다. Next.js에서는 이미지 최적화를 위해 Image 컴포넌트를 제공한다.Image 컴포넌트는 HTML 요소를 확장하여 자동 이미지 최적화 기능을 제공하며, 단 코드 몇 줄만으로 이미지를 최적화 시켜주는 내장 기능이다. 이번 포스팅에서는 Next.js에서 이미지 최적화의 필요성과 방법에 대해 작성하고자 한다. 01. 이미지 최적화의 필요성이미지는 웹페이지에서 가장 큰 용량을 차지하는 요소 중 하나이다.이미지를 제대로 최적화하지 않으면 페이지 로딩 속도 및 성능에 부정적인 영향..
Front-End/Next.js 2024. 10. 9. 23:29
01. LayoutNext.js 14에서 Layout은 앱 전체 구조를 구성하는 중요한 요소로, 여러 페이지에서 공통적으로 사용되는 UI 요소를 한 번에 관리할 수 있게 해준다. 특히 Next.js의 App Router에서 레이아웃 기능이 강화되었으며, 페이지 간 전환시에도 지속적으로 유지되는 구조이다. #1. Navbar와 같은 공통된 Layout일반적으로 Navbar, Footer, 전역 스타일과 같은 요소들은 모든 페이지에서 공통적으로 적용되어야 한다. 하지만 이때 공통된 요소들을 모든 Page.tsx에 import하는 것은 매우 비효율적이다. 페이지 수가 적다면 어느정도는 가능하지만 만약 100페이지 이상된다면 해당 요소들을 모든 페이지에서 불러와야 하는 문제점이 발생한다. 이를 해결하기 위해 공..