TypeScript

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..

타입스크립트 제네릭제네릭이란?제네릭(Generics)은 타입스크립트에서 함수, 클래스, 인터페이스 등을 작성할 때 여러 타입에 대해 재사용 가능한 컴포넌트를 만들 수 있게 해주는 기능입니다. 제네릭을 사용하면 특정 타입에 종속되지 않고 다양한 타입에 대해 동작하는 컴포넌트를 만들 수 있습니다. 바로 예시코드를 보면서 익숙해져 보겠습니다.제네릭은 함수에서 인자를 받는 것 처럼 타입 인자를 받을 수 있습니다.// v---v 인자 식별자const eat = (food: FoodType) => {...}// ^-------^ 인자 타입 지정// v------v 타입 인자 식별자type EAT = (food: FoodType) => {...}타입 인자 식별자..

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('..