Tailwind CSS를 사용해 Grid 시스템을 적용해보자. 열/행 개수 지정 grid-cols-n : 가로로 item들을 n개씩 배치합니다. grid-rows-n : 세로로 item들을 n개씩 배치합니다. 셀 병합 col-span-n : 요소가 가로 n개의 i...

Tailwind CSS Tailwind는 유틸리티 퍼스트 (Utility-First) CSS 프레임워크로, 빠르게 UI를 구성할 수 있도록 도와줍니다. 유틸리티 퍼스트 (Utility-First) 작고 단일한 역할을 가진 CSS 클래스들을 조합해서 스타일링하는 방식 기본 구조 Tailwind는 HTML 태그의 c...

Suspense Suspense는 비동기 컴포넌트가 로딩될 동안 대체 UI(fallback)를 지정하는 컴포넌트입니다. App Router에서는 주로 서버 컴포넌트가 데이터를 가져오는 동안 사용합니다. <Suspense fallback={<div>로딩 중...</div>}> <UserProfile /&gt...

Skeleton UI Skeleton UI는 로딩 중일 때 보여주는 실제 컨텐츠의 윤곽선이나 형태를 흉내 낸 UI를 말합니다. 사용자에게 “여기에 뭔가 뜰 거구나!” 하는 기대감을 줄 수 있습니다. 로딩이 빨라진 건 아니지만, 지각상 속도(perceived speed)를 높여줍니다. 기본 예시 // app/page.tsx import { ...

App Router에서 사용하는 axios와 fetch에 대해 알아보자. fetch App Router의 서버 컴포넌트에서 fetch를 사용할 경우, 단순히 데이터를 가져오는 도구를 넘어서, Next.js의 렌더링 엔진과 깊게 통합된 고급 기능을 제공합니다. 자동 캐싱 Next.js는 기본적으로 응답을 SSG 방식처럼 캐싱합니다. 이로...

Next의 레이아웃에 대해 알아보자. 폴더구조 app/ ├── layout.tsx # 전체 레이아웃 ├── page.tsx # 홈 (/) ├── dashboard/ │ ├── layout.tsx # 중첩 레이아웃 │ ├── page.tsx ...

App Router Next.js 13 이상에서 도입된 새로운 라우팅 방식으로, 기존의 pages 디렉토리 기반 라우팅(Pages Router) 대신 app 디렉토리를 사용합니다. 파일 시스템 기반 라우팅은 유지하면서, 더 나은 레이아웃 구성, 서버 컴포넌트, 로딩 상태 등 다양한 기능을 제공합니다. React Server Components...

App Router 기반 Next.js에서 에러 처리하는 방법에 대해 알아보자. 에러 처리 error.tsx 파일을 통해 라우트 단위로 에러 처리를 할 수 있습니다. App Router는 클라이언트 컴포넌트에서만 Error Boundary를 지원하기 때문에 클라이언트 컴포넌트만 가능 (‘use client’) 디렉토리 구조 app/ p...

Next.js에 대해 알아보자. Next.js Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. UI는 React Components로 구성하며, Next.js를 사용해 추가 기능과 최적화를 제공합니다. 내부적으로 Next.js는 번들링, 컴파일링 등 React에 필요한 도구를 추상화하고 자동으로 구성합니다...

Nest에서 Guard 와 Pipe의 역할을 알아보자. 가드 Guard 요청이 컨트롤러의 핸들러에 도달하기 전에 특정 조건을 만족하는지 검사하고, 해당 요청을 처리할지 말지를 결정하는 미들웨어와 비슷한 역할을 합니다. 주로 인증 및 권한 부여 (Authorization) 에 사용됩니다. NestJS의 가드는 Express의 미들웨어와 ...