Dev_Ryomi

1. Request WaterfallRequest Waterfall는 데이터 요청이 순차적으로 처리되며 발생하는 지연을 의미합니다.문제점:하나의 요청이 완료된 후에야 다음 요청이 시작되기 때문에 요청 처리 시간이 누적됩니다.특히, 여러 데이터를 의존적으로 가져와야 하는 경우 페이지 로드 속도에 큰 영향을 줍니다.예시:async function fetchData() { const user = await fetchUser(); const posts = await fetchPosts(user.id); return { user, posts };}위 코드에서는 fetchUser가 끝난 뒤에야 fetchPosts가 실행되므로 비효율적입니다.2. Static RenderingStatic Rendering은 빌드..

API 레이어API는 애플리케이션 코드와 데이터베이스 사이의 중개자 역할을 합니다. 다음과 같은 경우에 API 레이어를 활용할 수 있다:서드파티 서비스 사용 시: 외부 서비스에서 제공하는 API를 통해 데이터를 가져와야 할 때.클라이언트에서 데이터 페칭 시: 데이터베이스 비밀 정보를 클라이언트에 노출하지 않기 위해 서버에서 실행되는 API 레이어를 사용하여 데이터를 가져온다.Next.js에서는 Route Handlers를 사용하여 API 엔드포인트를 생성할 수 있다. 데이터베이스 쿼리풀스택 애플리케이션을 개발할 때는 데이터베이스와 직접 상호작용하는 로직이 필요하다. Postgres와 같은 관계형 데이터베이스의 경우, SQL이나 ORM을 통해 이를 수행할 수 있다. 다음과 같은 상황에서 데이터베이스 쿼리가..

정리searchParams vs useSearchParams 특징  searchParams  useSearchParams 사용 환경서버 컴포넌트클라이언트 컴포넌트선언 방식props로 자동 전달React Hook으로 import데이터 형태일반 객체URLSearchParams 객체사용 방법searchParams.categorysearchParams.get('category')변경 감지페이지 새로고침 시실시간 (자동 갱신)주 사용 목적초기 데이터 로딩, SEO동적 필터링, 실시간 업데이트 params vs usePathname 특징  params  usePathname 사용 환경서버 컴포넌트클라이언트 컴포넌트선언 방식props로 자동 전달React Hook으로 import반환 값동적 라우트 파라미터 객..

네비게이션 최적화가 필요한 이유전통적인 웹사이트에서는 태그를 사용하여 페이지 간 이동을 구현했다. 하지만 이 방식은 매번 전체 페이지를 새로고침하게 되므로 다음과 같은 문제가 발생한다.느린 페이지 전환 속도깜빡임 현상상태 초기화불필요한 서버 요청 Next.js의 Link 컴포넌트Next.js는 이러한 문제를 해결하기 위해 Link 컴포넌트를 제공한다.기본 특징클라이언트 사이드 네비게이션:페이지 간 이동이 브라우저 전체를 다시 로드하지 않고, 클라이언트 측에서 처리됩니다.빠른 페이지 전환으로 사용자 경험이 향상됩니다.자동 코드 스플리팅:Next.js는 각 페이지를 필요한 코드만 로드하도록 자동으로 최적화합니다.프리패치(prefetch)를 기본적으로 활성화하여 사용자가 링크에 접근하기 전에 이동할 페이지의..

들어가며Next.js 13부터 도입된 App Router는 새로운 Layout 시스템을 제공했다. 이는 페이지 간 공통 UI를 효율적으로 관리하고, 더 나은 사용자 경험을 제공하는데 도움을 준다. Layout의 기본 개념Layout은 여러 페이지에서 공유되는 UI 요소를 정의하는 특별한 컴포넌트다.따라서 페이지 이동시, 레이아웃은 리렌더링 되지 않고, 오직 페이지 컴포넌트만 업데이트 된다. 이를 부분 렌더링(partial rendering)이라고 한다. 기본 Layout 구조// app/layout.tsxexport default function RootLayout({ children,}: { children: React.ReactNode}) { return ( ..

들어가며: 이미지 최적화가 필요한 이유웹 성능에서 이미지는 가장 큰 비중을 차지하는 요소 중 하나이다. 최적화되지 않은 이미지는 다음과 같은 문제를 일으킬 수 있다 :느린 페이지 로딩 시간불필요한 대역폭 사용레이아웃 이동 (CLS)모바일 사용자 경험 저하 Next.js의 Image 컴포넌트Next.js는 성능과 사용자 경험을 향상시키기 위해 이미지 최적화(Image Optimization) 기능을 제공한다. 이는 이미지 파일의 크기를 줄이고, 다양한 기기와 화면 해상도에 맞는 이미지를 자동으로 생성하여 로드 시간을 줄이고 웹사이트를 더 빠르게 만든다.기능자동 크기 조정: 기기의 뷰포트 크기에 따라 이미지를 적절히 조정포맷 변환: 더 효율적인 포맷(WebP 등)으로 이미지를 자동 변환레이지 로딩(Lazy ..

들어가며: 웹 폰트 최적화가 필요한 이유웹 개발에서 폰트는 브랜딩과 사용자 경험에 중요한 역할을 한다. 하지만 최적화되지 않은 웹 폰트는 성능 저하와 사용자 경험 악화를 초래할 수 있다. 특히 웹 바이탈 측정 요소 중 하나인 Cumulative Layout Shift (CLS)와 관련된 문제는 매우 중요하다.Cumulative Layout Shift (CLS) 이해하기CLS란?- CLS는 Google의 Core Web Vitals 중 하나로, 페이지 로딩 중 발생하는 예기치 않은 레이아웃 변화를 측정하는 지표다.CLS가 중요한 이유사용자 경험갑작스러운 레이아웃 변화는 사용자의 불편을 초래잘못된 클릭이나 터치를 유발할 수 있음SEO 영향Google은 CLS를 검색 순위 요소로 고려낮은 CLS 점수는 더 낮..

들어가며Next.js 15 버전에서는 pnpm을 기본 패키지 매니저로 권장하고 있다. 이러한 변화의 배경과 각 패키지 매니저의 특징을 살펴보면서, 프로젝트에 가장 적합한 선택이 무엇인지 알아보자.패키지 매니저란?패키지 매니저는 프로젝트의 의존성을 관리하는 도구이다. Node.js 생태계에서는 주로 npm, yarn, pnpm이 사용되고 있으며, 각각의 도구는 고유한 특징과 장단점을 가지고 있다.1. npm (Node Package Manager)특징Node.js의 기본 패키지 매니저가장 오래되고 널리 사용됨v5 이상부터 package-lock.json을 도입해 종속성을 고정하여 일관성 있는 설치 보장장점별도 설치 불필요 (Node.js에 포함)넓은 생태계와 커뮤니티안정적인 성능단점속도는 개선됐지만 여전히..