Next.js 14 + NestJS 10 풀스택 아키텍처 설계

프로젝트 구조

portfolio-project/
├── apps/
│   ├── web/     # Next.js 14 (App Router)
│   └── api/     # NestJS 10
├── packages/
│   ├── shared/  # 공유 타입
│   └── ui/      # UI 컴포넌트
└── pnpm-workspace.yaml

기술 선택 이유

Frontend: Next.js 14 App Router

• **Server Components**: 초기 로딩 성능 최적화
• **ISR**: 정적 생성 + 동적 업데이트 하이브리드
• **Streaming**: Suspense 기반 점진적 렌더링

// Server Component — 데이터 fetch가 서버에서 발생
export default async function ProjectsPage() {
  const projects = await getProjects();
  return <ProjectGrid projects={projects} />;
}

Backend: NestJS 10

• **모듈 아키텍처**: 기능별 독립 모듈로 관심사 분리
• **TypeORM**: PostgreSQL과의 타입 안전 ORM
• **Guard/Interceptor**: 인증, 캐싱, 로깅의 횡단 관심사 처리

@Controller("projects")
@UseGuards(JwtAuthGuard, RolesGuard)
export class ProjectController {
  @Get()
  @Public()
  async findAll(@Query() query: GetProjectsQueryDto) {
    return this.projectService.findAll(query);
  }
}

공유 패키지: packages/shared

Frontend와 Backend가 동일한 타입을 사용하여 API 계약 불일치를 방지합니다.

성능 최적화

| 전략 | 적용 위치 | 효과 |

|------|----------|------|

| Redis 캐싱 | API 응답 | p95 < 50ms |

| ISR | 프로젝트/블로그 페이지 | TTFB 최소화 |

| Image Optimization | next/image | WebP/AVIF 자동 변환 |

배운 점

모노레포 구조는 초기 설정 비용이 있지만, 타입 공유와 일관된 개발 경험 측면에서 큰 이점이 있습니다.