fc7d3d14cf
- 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.
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
/**
|
|
* 케이스 3: getQuery로 쿼리 파라미터 읽기
|
|
*
|
|
* - URL: GET /api/03-search?keyword=nuxt&page=2&limit=10
|
|
* - getQuery(event): URL 쿼리 파라미터를 객체로 반환
|
|
* - 모든 값은 string 타입이므로 필요 시 변환 필요
|
|
*
|
|
* 테스트:
|
|
* fetch('/api/03-search?keyword=nuxt&page=2&limit=5')
|
|
*/
|
|
|
|
// 상품 더미 데이터
|
|
const PRODUCTS = [
|
|
{ id: 1, name: "Nuxt 4 강의", category: "education" },
|
|
{ id: 2, name: "Vue 3 튜토리얼", category: "education" },
|
|
{ id: 3, name: "TypeScript 핸드북", category: "book" },
|
|
{ id: 4, name: "Tailwind CSS 가이드", category: "book" },
|
|
{ id: 5, name: "Pinia 상태관리", category: "education" },
|
|
];
|
|
|
|
export default defineEventHandler((event) => {
|
|
// 쿼리 파라미터 전체를 객체로 가져옴
|
|
const query = getQuery(event);
|
|
|
|
const keyword = String(query.keyword ?? "");
|
|
const page = Number(query.page ?? 1);
|
|
const limit = Number(query.limit ?? 3);
|
|
|
|
// 키워드 필터링
|
|
const filtered = PRODUCTS.filter((p) =>
|
|
keyword ? p.name.includes(keyword) : true
|
|
);
|
|
|
|
// 페이지네이션
|
|
const start = (page - 1) * limit;
|
|
const items = filtered.slice(start, start + limit);
|
|
|
|
return {
|
|
keyword,
|
|
page,
|
|
limit,
|
|
total: filtered.length,
|
|
items,
|
|
};
|
|
});
|