React

Next.js에서 로딩 상태를 관리하는 7가지 방법Next.js 애플리케이션을 개발하다 보면 데이터 페칭, 페이지 전환, 폼 제출 등 다양한 상황에서 로딩 상태를 처리해야 합니다. 사용자 경험을 높이기 위해 적절한 로딩 UI를 보여주는 것은 필수입니다.이 글에서는 Next.js(App Router 기준)에서 로딩 상태를 관리하는 7가지 방법을 상황별로 정리해보겠습니다.1. loading.tsx — 라우트 레벨 로딩 UI가장 간단하고 Next.js스러운 방법입니다. 라우트 폴더에 loading.tsx 파일을 생성하면, 해당 페이지가 렌더링되는 동안 자동으로 로딩 UI가 표시됩니다.// app/dashboard/loading.tsxexport default function Loading() { return..

Next.js 프로젝트에서 브라우저 환경에 의존적인 라이브러리를 통합할 때 (ex. window 객체 사용) 여러 가지 문제가 생길 수 있습니다.문제 상황처음에는 클라이언트 사이드 라이브러리를 다음과 같이 직접 import 했습니다import SomeClientLibrary from 'some-client-library'이 방식은 브라우저에서 라이브러리를 표시할 수 있었지만, 다음과 같은 서버 사이드 렌더링(SSR) 관련 오류가 발생했습니다:⨯ ReferenceError: window is not defined첫 번째 시도: Dynamic Import첫 번째로는 Next.js의 dynamic import를 사용해보았습니다const DynamicComponent = dynamic(() => import('..