Files
nuxt4-deep/server/middleware/09-logger.ts
hyeonggil fc7d3d14cf Add initial Nuxt 4 project setup with essential configurations
- Created .gitignore to exclude build outputs, logs, and environment files.
- Added nuxt.config.ts for project configuration, enabling Tailwind CSS and Pinia modules.
- Initialized package.json with scripts for development and production, and added necessary dependencies.
- Generated pnpm-lock.yaml for dependency management.
- Created README.md with setup instructions and development guidelines.
- Implemented server API examples in server/api/ directory, demonstrating various use cases.
- Added middleware for logging requests and responses.
- Included example Vue components and pages for server API interaction.
- Established basic project structure for Nuxt 4 application development.
2026-04-08 23:59:29 +09:00

35 lines
1.2 KiB
TypeScript

/**
* 케이스 9: 서버 미들웨어 (server/middleware/)
*
* - 모든 요청에 자동 실행 (순서: 파일명 알파벳 순)
* - event.context에 데이터 저장 → 이후 핸들러에서 접근 가능
* - return 없이 종료하면 다음 핸들러로 계속 진행
* - 응답을 반환하면 요청 처리 중단 (인증 게이트웨이 패턴)
*
* 주의: 특정 경로에만 적용하려면 getRequestURL()로 필터링
*/
export default defineEventHandler((event) => {
const start = Date.now();
const method = event.method;
const url = getRequestURL(event).pathname;
// /api/ 경로만 로깅
if (url.startsWith("/api/")) {
console.log(`[요청] ${method} ${url}`);
// event.context에 커스텀 데이터 저장 (이후 핸들러에서 접근)
event.context.requestedAt = new Date().toISOString();
event.context.startTime = start;
// 훅: 응답 완료 후 실행
event.node.res.on("finish", () => {
const duration = Date.now() - start;
const status = event.node.res.statusCode;
console.log(`[응답] ${method} ${url}${status} (${duration}ms)`);
});
}
// return 없음 → 다음 핸들러로 진행
});