튜토리얼 · 5단계 / 6

데이터베이스 CRUD 5분 컷

입문데이터16초읽기 약 3분업데이트 2026-04-14

서버 없이 테이블 생성부터 조회·수정·삭제까지 한 번에 완성합니다.

이 튜토리얼에서 배울 내용

콘솔에서 테이블 생성

insert / select / update / delete

조건 필터링 (where)

React 컴포넌트 연동

데이터베이스 CRUD 5분 컷

보통 데이터를 저장하려면 서버를 만들고, 데이터베이스를 설치하고, API를 작성해야 합니다. ConnectBase를 사용하면 서버 없이 프론트엔드에서 직접 데이터를 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)할 수 있습니다.

완성된 기능

테이블 생성 및 스키마 정의
데이터 추가 (Create)
데이터 조회 (Read) + 필터링
데이터 수정 (Update)
데이터 삭제 (Delete)

사전 준비: 콘솔에서 테이블 만들기

코드를 작성하기 전에, ConnectBase 콘솔에서 데이터를 저장할 테이블을 먼저 만들어야 합니다.

ConnectBase 콘솔에 로그인합니다
왼쪽 메뉴에서 데이터베이스를 클릭합니다
새 테이블 생성 버튼을 클릭합니다
테이블 이름을 products로 입력합니다
아래와 같이 컬럼을 추가합니다:

컬럼 이름	타입	설명
name	string	상품 이름
price	number	가격
stock	number	재고 수량

테이블 생성 후 테이블 ID (UUID) 를 복사해두세요. SDK 호출 시 필요합니다.

💡 id 컬럼은 자동으로 생성되므로 직접 추가할 필요 없습니다. 데이터 row 의 id 와 테이블 ID 는 서로 다른 값입니다.

1. 프로젝트 설정

터미널에서 아래 명령어를 실행합니다:

bash

npm create vite@latest crud-app -- --template react-ts
cd crud-app
npm install connectbase-client

.env 파일을 만들고 Public Key 와 테이블 ID 를 입력합니다:

VITE_CONNECT_BASE_PUBLIC_KEY=cb_pk_여기에_퍼블릭키_입력
VITE_PRODUCTS_TABLE_ID=콘솔에서_복사한_테이블_UUID

2. SDK 설정

src/lib/connectbase.ts 파일을 만들어 SDK를 초기화합니다:

typescript

import { ConnectBase } from 'connectbase-client'

export const cb = new ConnectBase({
  publicKey: import.meta.env.VITE_CONNECT_BASE_PUBLIC_KEY
})

export const TABLE_ID = import.meta.env.VITE_PRODUCTS_TABLE_ID as string

3. CRUD 함수 만들기

데이터베이스 조작을 위한 함수들을 모아둡니다. SDK 는 createData / queryData / updateData / deleteData 4개의 동사를 제공합니다.

src/api/products.ts:

typescript

import { cb, TABLE_ID } from '../lib/connectbase'

// ✅ Create — 새 상품 추가
// createData(tableId, { data }) — 두 번째 인자의 data 필드 안에 row 값을 넣는다
export async function createProduct(data: {
  name: string
  price: number
  stock: number
}) {
  return cb.database.createData(TABLE_ID, { data })
}

// ✅ Read — 상품 목록 조회
// queryData(tableId, { where, limit, orderBy, offset })
export async function getProducts(minPrice?: number) {
  const response = await cb.database.queryData(TABLE_ID, {
    where: minPrice ? { price: { $gt: minPrice } } : undefined,
    limit: 50,
  })
  return response.data  // DataItem[] — 각 row 에 id 와 data 포함
}

// ✅ Update — 상품 정보 수정 (부분 업데이트 — 전달한 필드만 갱신)
export async function updateProduct(id: string, data: Partial<{
  name: string
  price: number
  stock: number
}>) {
  return cb.database.updateData(TABLE_ID, id, { data })
}

// ✅ Delete — 상품 삭제
export async function deleteProduct(id: string) {
  return cb.database.deleteData(TABLE_ID, id)
}

// ✅ Bonus — 조건 일치 데이터 일괄 삭제 (재고 0 인 상품 정리)
export async function cleanOutOfStock() {
  return cb.database.deleteWhere(TABLE_ID, { stock: 0 })
}

where 연산자: $eq / $ne / $gt / $gte / $lt / $lte / $in / $like / $regex. 평면 비교는 값만 넘기면 $eq 로 처리됩니다 ({ name: '키보드' }).

4. React 컴포넌트에서 사용하기

위에서 만든 함수들을 React 컴포넌트에서 호출합니다. 페이지가 열리면 상품 목록을 불러오고, 버튼으로 추가/삭제할 수 있습니다.

src/pages/ProductsPage.tsx:

tsx

import { useState, useEffect } from 'react'
import { getProducts, createProduct, deleteProduct } from '../api/products'

interface ProductRow {
  id: string
  data: { name: string; price: number; stock: number }
}

export function ProductsPage() {
  const [products, setProducts] = useState<ProductRow[]>([])

  // 컴포넌트가 처음 렌더링될 때 상품 목록을 불러옵니다
  useEffect(() => {
    getProducts().then(setProducts)
  }, [])

  const refresh = async () => setProducts(await getProducts())

  // "상품 추가" 버튼 클릭 시
  const handleAdd = async () => {
    await createProduct({ name: '새 상품', price: 10000, stock: 100 })
    await refresh()
  }

  // "삭제" 버튼 클릭 시
  const handleDelete = async (id: string) => {
    await deleteProduct(id)
    await refresh()
  }

  return (
    <div>
      <button onClick={handleAdd}>상품 추가</button>
      <ul>
        {products.map((p) => (
          <li key={p.id}>
            {p.data.name} - {p.data.price}원
            <button onClick={() => handleDelete(p.id)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  )
}