JavaScript

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

JavaScript 에서는 변수를 선언하고 변수에 값을 할당하여 사용합니다. 변수 키워드 의 종류는 var, let, const 가 있습니다. var var 키워드 로 선언된 변수는 기존에 선언된 변수의 값을 덮어 쓰며(재 선언), 함수 스코프를 기준으로 동작합니다. 그렇기 때문에 변수의 중복 선언이 가능하며 변수에 할당된 값이 변할 수 있어서 오류를 추적 하기가 힘들어집니다. var 키워드 를 함수 외부에서 선언할 경우에는 전역 변수로 취급됩니다. let과 const 키워드는 var 키워드 와 다르게 재 선언이 불가능하고 블록스코프를 기준으로 동작합니다. let let 키워드 를 사용한 변수의 중복 선언은 불가능 하지만 재 할당은 가능합니다. const const 키워드는 선언과 초기화를 동시에 해야하..