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의 미들웨어와 ...

NestJS 기본 구조 NestJS는 기본적으로 MVC 패턴을 기반으로 한 모듈형 아키텍처를 제공합니다. src/ └── user/ ├── user.controller.ts // 요청 진입점 ├── user.service.ts // 비즈니스 로직 ├── user.module.ts ...

NestJS에서의 에러 처리 방식에 대해 알아보자. HttpException NestJS에서 제공하는 기본적인 예외 클래스입니다. HTTP 상태 코드와 함께 사용자 지정 응답을 반환할 수 있습니다. 기본 구조 new HttpException(response: string | object, status: HttpStat...

generate 명령어 nest generate OR nest g 명령어를 사용해 여러가지 리소스나 모듈을 자동 생성할 수 있습니다. 주요 명령어 module nest generate module [module-name] # 또는 축약형 nest g mo [module-name] control...