데이터베이스 API 구현하기 : SQLite와 타입 안전성

2024. 11. 17. 10:02·TypeScript
반응형

소개

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 실전 활용법  (1) 2024.11.17
React에서 Tailwind CSS 활용하기  (1) 2024.11.15
React 프로젝트 구조 및 VSCode 확장 프로그램 추천  (4) 2024.11.14
tsconfig.json : compilerOptions 살펴보기  (2) 2024.11.10
'TypeScript' 카테고리의 다른 글
  • [Next.js 실전] Image 컴포넌트로 웹 성능 최적화하기
  • [React 최적화] 메모이제이션 완벽 가이드 - useMemo, useCallback, React.memo 실전 활용법
  • React에서 Tailwind CSS 활용하기
  • React 프로젝트 구조 및 VSCode 확장 프로그램 추천
코샵
코샵
나의 코딩 일기장
    반응형
  • 코샵
    끄적끄적 코딩 공방
    코샵
    • 분류 전체보기 (725) N
      • 스마트팜 (0)
      • 상품 추천 (223)
      • MongoDB (4)
      • 하드웨어 (17) N
      • 일기장 (4)
      • 파이썬 (130)
        • Basic (41)
        • OpenCV (8)
        • Pandas (15)
        • PyQT (3)
        • SBC(Single Board Computer) (1)
        • 크롤링 (14)
        • Fast API (29)
        • Package (6)
      • Unity (138)
        • Tip (41)
        • Project (1)
        • Design Pattern (8)
        • Firebase (6)
        • Asset (2)
      • Linux (4)
      • C# (97)
        • Algorithm (11)
        • Window (7)
      • TypeScript (51)
        • CSS (10)
      • Git (11)
      • SQL (5)
      • Flutter (10)
        • Tip (1)
      • System (1)
      • BaekJoon (6)
      • Portfolio (2)
      • MacOS (1)
      • 유틸리티 (1)
      • 서비스 (6)
      • 자동화 (3)
      • Hobby (10)
        • 물생활 (10)
        • 식집사 (0)
  • 인기 글

  • 태그

    cv2
    리스트
    C#
    긴유통기한우유
    스크립트 실행 순서
    카페24리뷰
    learntocode
    믈레코비타멸균우유
    programming101
    유니티
    Python
    리뷰이관
    programmerlife
    셀레니움
    스마트스토어리뷰
    상품 리뷰 크롤링
    rtsp
    ipcamera
    devlife
    리뷰관리
    라떼우유
    unity
    카페24리뷰이관
    codingtips
    appdevelopment
    파이썬
    list
    쇼핑몰리뷰
    codingcommunity
    스크립트 실행
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
코샵
데이터베이스 API 구현하기 : SQLite와 타입 안전성
상단으로

티스토리툴바