반응형
소개
Next.js에서 데이터베이스 API를 구현할 때는 타입 안전성과 효율적인 쿼리 작성이 중요합니다. 이번 글에서는 SQLite 데이터베이스를 사용하여 볼링공 정보를 제공하는 API를 TypeScript로 구현하는 방법을 알아보겠습니다.
API 라우트 구현
Next.js의 API 라우트는 pages/api 디렉토리에 위치합니다.
// src/pages/api/bowling-balls.ts
import { NextApiRequest, NextApiResponse } from 'next';
import sqlite3 from 'sqlite3';
import { open } from 'sqlite';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const db = await open({
filename: './bowling_balls.db',
driver: sqlite3.Database
});
// 쿼리 파라미터 추출
const { manufacturer, performance_level, is_active } = req.query;
// ... 쿼리 로직
}
SQL 쿼리 작성
복잡한 조인과 서브쿼리를 사용하여 필요한 데이터를 한 번에 조회합니다.
let query = `
SELECT
b.ball_id,
b.model_name,
m.name as manufacturer,
c.name as core_name,
(
SELECT json_group_array(
json_object(
'weight', csp.weight,
'rg', csp.rg,
'differential', csp.differential
)
)
FROM core_specifications csp
WHERE csp.core_id = c.core_id
) as specs
FROM bowling_balls b
JOIN manufacturers m ON b.manufacturer_id = m.manufacturer_id
JOIN cores c ON b.core_id = c.core_id
`;
타입 정의
프론트엔드와의 타입 일관성을 위해 인터페이스를 정의합니다.
// src/types/bowling.ts
export interface BowlingBall {
ball_id: number;
model_name: string;
manufacturer: string;
core_name: string;
specs: CoreSpec[];
images: BallImage[];
}
export interface CoreSpec {
weight: number;
rg: number;
differential?: number;
}
결과 데이터 가공
데이터베이스에서 조회한 결과를 프론트엔드에서 사용하기 좋은 형태로 변환합니다.
const processedBalls = balls.map(ball => ({
...ball,
specs: JSON.parse(ball.specs || '[]'),
images: ball.image_paths
? ball.image_paths.split(',').map((path: string, index: number) => ({
path,
type: ball.image_types.split(',')[index]
}))
: []
}));
필터링과 정렬
사용자의 요구사항에 맞게 데이터를 필터링하고 정렬합니다.
if (manufacturer) {
query += ` AND m.name = ?`;
params.push(manufacturer);
}
query += `
ORDER BY
CASE WHEN b.is_active = 1 THEN 0 ELSE 1 END,
b.release_date DESC
`;
결론
TypeScript와 SQLite를 사용한 API 구현은 타입 안전성과 데이터 일관성을 보장하면서도 효율적인 쿼리 실행이 가능합니다. 적절한 인터페이스 정의와 데이터 가공을 통해 프론트엔드 개발자가 사용하기 좋은 API를 만들 수 있습니다.
'TypeScript' 카테고리의 다른 글
[Next.js 실전] Image 컴포넌트로 웹 성능 최적화하기 (0) | 2024.11.18 |
---|---|
[React 최적화] 메모이제이션 완벽 가이드 - useMemo, useCallback, React.memo 실전 활용법 (0) | 2024.11.17 |
React에서 Tailwind CSS 활용하기 (1) | 2024.11.15 |
React 프로젝트 구조 및 VSCode 확장 프로그램 추천 (4) | 2024.11.14 |
tsconfig.json : compilerOptions 살펴보기 (2) | 2024.11.10 |