인덱스

Server Component

서버 컴포넌트는 Next.js App Router에서 기본값으로 서버에서 렌더링되는 React 컴포넌트이다. 데이터 조회, 파일 기반 콘텐츠 읽기, 초기 HTML 생성처럼 브라우저에 보내기 전에 처리할 일을 맡기 좋고, 클라이언트 JavaScript 번들을 줄이는 데 도움이 된다. 다만 클릭 이벤트나 useState 같은 브라우저 상호작용은 직접 사용할 수 없으므로, 바이브 코딩에서는 AI에게 '데이터를 읽는 서버 컴포넌트'와 '사용자가 조작하는 클라이언트 컴포넌트'를 나눠 달라고 지시하는 것이 중요하다.

ORM (Object-Relational Mapping)

데이터베이스 테이블을 프로그래밍 언어의 객체(Object)로 매핑(Mapping)하여, SQL 쿼리를 직접 작성하지 않고 프로그래밍 언어의 메서드로 데이터베이스를 조작할 수 있게 하는 기술이다. 비유하면, ORM은 '영어와 한국어 사이의 통역사'처럼, 애플리케이션 코드와 SQL 사이를 번역해주는 중간 계층이다. 바이브 코딩에서 AI가 DB 코드를 생성할 때 ORM을 사용하면 타입 안전한 쿼리가 보장되므로 환각(Hallucination)으로 인한 잘못된 SQL 생성 위험이 크게 줄어든다. Prisma(스키마 우선 접근, 자동 타입 생성), Drizzle(TypeScript 네이티브, 경량), Sequelize(성숙한 Node.js ORM), TypeORM(데코레이터 기반) 등이 대표적이다. AI에게 'Prisma로 사용자 스키마 만들어줘'라고 하면 schema.prisma 파일(모델 정의)과 마이그레이션 코드(DB 구조 변경)를 생성한다. Prisma와 Drizzle은 TypeScript와의 통합이 뛰어나 AI가 타입 오류 없는 DB 코드를 생성하는 데 특히 유리하다.

Schema

데이터베이스의 구조적 정의(설계도)로, 테이블 이름, 컬럼(필드)의 이름과 타입, 테이블 간 관계(외래 키), 제약 조건(NOT NULL, UNIQUE 등), 인덱스 등을 명시한다. 건축의 '청사진(blueprint)'처럼, 스키마는 데이터가 어떤 형태로 저장되고 관계를 맺는지를 정의한다. 바이브 코딩에서 스키마의 중요성은 특별히 크다: AI가 코드를 정확히 생성하려면 DB 스키마를 컨텍스트로 제공하는 것이 필수적이다. 스키마 없이 '사용자 데이터를 가져오는 API를 만들어줘'라고 하면 AI가 존재하지 않는 컬럼명을 사용하거나 잘못된 관계를 가정한 코드를 생성할 수 있다(환각의 전형적 사례). CLAUDE.md나 .cursorrules에 DB 스키마 정보를 포함시키면 AI가 정확한 컬럼명과 타입을 사용하는 쿼리/코드를 생성한다. Prisma의 schema.prisma 파일이나 SQL CREATE TABLE 문이 스키마 정의의 대표적 형태이며, Supabase는 대시보드에서 시각적으로 스키마를 관리할 수 있다.