본문 바로가기

Programming32

[Next.js] Next.js의 Image 동작원리 딥 다이브 Next.js의 Image태그 이미지 최적화는 정말 편하고, 편하면서도 복잡하기도 하지만 우리가 명심해야할 것은Next.js의 이미지 최적화는 마법이 아니다. 추가적인 리소스를 사용하여 빠르게 보이게 하는 것이다. Next.js의 이미지 최적화를 이용하게 되면, 이미지를 다운 받을 때 변환도 하고, 저장도 해놓는다.유저가 웹 사이트에 접속 시 저장한 해당 이미지를 보여주도록 하는 것https://github.com/vercel/next.js/blob/canary/packages/next/src/server/image-optimizer.ts next.js/packages/next/src/server/image-optimizer.ts at canary · vercel/next.jsThe React Frame.. 2024. 10. 2.
[Next.js]Next.js의 ASSET 최적화 했을 때와 안했을 때의 time difference 1. Asset 최적화를 했을 때 import Image from "next/image"; Image              className="rounded-sm object-scale-down"              width={80}              height={80}              src={product.images}              alt={product.title}            />Nextconfig 내 remotePatterns등의 설정 /** @type {import('next').NextConfig} */const nextConfig = {  reactStrictMode: false,  images: {    remotePatterns: [      { .. 2024. 10. 2.
[Next.js] Loading UI 간단히  Loading UI에 대하여 학습한 내용을 간결하게 정리하고자 한다. 2. Loading UINext.js 14의 App Router에서 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 상태를 표시하는 기능 사용자가 웹 애플리케이션을 사용할 때 비동기 작업이 완료될 때까지 기다려야 하는 상황에서 유용2-1 Loading UI는 왜 중요한가? 1. 사용자 경험 개선 : 로딩 중인 상태를 명확히 표시하지 않으면 ,사용자 입장에서는 현재 어떤 상황이 일어나는지 알 겨를이 없기 때문에, 이는 웹사이트를 이용하는 클라이언트의 입장에서는 불안감과 , 사용자 경험을 하락시킨다.이러한 요인은 불필요한 클릭, 페이지 이탈 가능성을 높인다. 이러한 상황에 Loading UI 를 적절히 활용하게 될 경우 사용자 유.. 2024. 10. 1.
[Next.js] 4가지 주요 렌더링 기법 1. CSR(Client Side Rendering)2. SSG (Static Site Rendering)3. ISR (Incremental Static Regeneration)4. SSR (Server Side Rendering) 2024. 9. 30.
[Next.js] Page Router vs App Router 2024. 9. 28.
[Next.js]Next.js 1. Next.jsHigh-Quality 웹 어플리케이션을 만들 수 있는 웹을 위한 React Framework 2. Next.js의 장점1. SSR, SSG, ISG -> 사용자 입장에서 초기 로드 시간 단축 , 코드 스플리팅, 이미지 최적화까지 다 해줌2. Search Engine Optimization -> 서버 사이드 렌더링을 통해 웹 페이지가 초기 로드 시 완전히 렌더링 되므로,위와 일맥상통 하는 것이지만, 검색 엔진이 쉽게 콘텐츠를 인덱싱 할 수 있다. 정적 사이트 생성으로 미리 생성된 html파일을 제공하고, seo 성능 극대화3.개발자 경험 - 자동 코드 분할, 핫 리로딩, 타입스크립트 지원, API 라우트 지원 -> 백엔드와의 통합을 쉽게-> 환경 설정이 적다 4. 확장성과 유연성서버리스.. 2024. 9. 28.

티스토리툴바