- 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.
35 lines
1.2 KiB
TypeScript
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 없음 → 다음 핸들러로 진행
|
|
});
|