바이브 코딩으로
나만의 홈페이지 만들기

# Cloudflare가 랜덤으로 배정 (계정마다 다름)

1차: xxx.ns.cloudflare.com

2차: yyy.ns.cloudflare.com

# STEP 14에서 추가할 Vercel용 레코드

A @ 76.76.21.21 (루트 도메인)

CNAME www cname.vercel-dns.com (www 서브도메인)

# STEP 3에서 추가될 R2용 레코드 (자동 생성됨)

CNAME cdn <자동 설정> (이미지 CDN)

Access Key ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Secret Access Key: yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Endpoint (S3 API): https://<ACCOUNT_ID>.r2.cloudflarestorage.com

R2_ACCOUNT_ID=xxxxxxxxxxxxxxxx

R2_ACCESS_KEY_ID=xxxxxxxxxxxxxxxx

R2_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxx

R2_BUCKET_NAME=myproject-assets

R2_PUBLIC_URL=https://cdn.myproject.com

TURSO_DATABASE_URL=libsql://myproject-db-username.turso.io

TURSO_AUTH_TOKEN=eyJhxxxxxxxxxxxxxxxxxxxxxxxx

turso db shell myproject-db

# SQLite 쉘이 열립니다

.tables # 테이블 목록 확인

SELECT * FROM users; # 쿼리 실행

.quit # 종료

프로젝트_루트/

├── .cursor/

│ └── rules/

│ ├── project-overview.mdc

│ ├── tech-stack.mdc

│ └── coding-conventions.mdc

└── ... (나머지 프로젝트 파일)

# 예시: tech-stack.mdc

---

description: "기술 스택 및 의존성 가이드"

globs: "**/*.ts, **/*.tsx"

alwaysApply: true

---

# 기술 스택

- Framework: Next.js 16 (App Router)

- Language: TypeScript

- Styling: Tailwind CSS v4

- Database: Turso (libSQL) — raw SQL만 사용, ORM 금지

- Storage: Cloudflare R2 (S3 호환 API)

- Deployment: Vercel

# 코딩 규칙

- 모든 컴포넌트는 TypeScript로 작성

- 서버 컴포넌트 우선 (클라이언트 최소화)

- DB 쿼리는 @libsql/client로 raw SQL 실행

- 보안: API Key, Token 등은 환경변수로 관리

# project-overview.mdc

---

description: "프로젝트 전체 구조와 아키텍처 개요"

alwaysApply: true

---

# 프로젝트 아키텍처

## 인프라

- 도메인: Iteasy (myproject.com)

- DNS/CDN: Cloudflare (Free)

- 파일 저장: Cloudflare R2 (cdn.myproject.com)

- 데이터베이스: Turso (libSQL, nrt 리전)

- 배포: Vercel (Hobby)

## 디렉토리 구조

app/ → Next.js App Router 페이지들

lib/ → 유틸리티, DB 연결, R2 클라이언트

components/ → 공통 UI 컴포넌트

public/ → 정적 파일 (favicon, robots.txt 등)

---

description: "데이터베이스 관련 규칙"

globs: ["**/lib/db*", "**/api/**/*.ts"]

alwaysApply: false

---

# 데이터베이스 규칙

- ORM 사용하지 않는다. @libsql/client, raw SQL만

- DB 클라이언트는 lib/db.ts의 getDb() 싱글톤

- 스키마는 ensureMigration()에서 CREATE TABLE IF NOT EXISTS

- 쿼리 결과: row as unknown as { column: type }

- 날짜: SQLite datetime('now') 또는 ISO 문자열

// .cursor/mcp.json

{ "mcpServers": { "user-site-mb-db-v1": { "command": "node", "args": ["mcp-server-turso.js"], "cwd": "${workspaceFolder}", "env": { "TURSO_DATABASE_URL": "<본인 Turso URL>", "TURSO_AUTH_TOKEN": "<본인 Turso 인증 토큰>" } } } }

# Cursor Agent Mode (Ctrl+I)에 입력할 프롬프트:

"Next.js 16 (App Router)와 TypeScript, Tailwind CSS v4로 새 프로젝트를 생성해 주세요.
npx create-next-app@latest ./ 명령어를 사용하되, 대화형 프롬프트 없이 자동으로 진행해 주세요.
TypeScript, ESLint, Tailwind CSS, App Router를 사용하고, src/ 디렉토리는 사용하지 않습니다.
import alias는 @/*를 사용합니다."

myproject/

├── app/

│ ├── layout.tsx # 루트 레이아웃

│ ├── page.tsx # 메인 페이지

│ └── globals.css # 전역 스타일

├── public/ # 정적 파일

├── .gitignore

├── next.config.ts # Next.js 설정

├── package.json

├── tailwind.config.ts # Tailwind 설정

└── tsconfig.json

npm run dev

# → http://localhost:3000 에서 확인

npm install @libsql/client

// lib/db.ts

import { createClient, Client } from '@libsql/client';

let client: Client | null = null;

export function getDb(): Client {

if (!client) {

client = createClient({

url: process.env.TURSO_DATABASE_URL!,

authToken: process.env.TURSO_AUTH_TOKEN,

});

}

return client;

}

// lib/db.ts (계속)

let migrated = false;

export async function ensureMigration() {

if (migrated) return;

const db = getDb();

await db.execute(`

CREATE TABLE IF NOT EXISTS posts (

id INTEGER PRIMARY KEY AUTOINCREMENT,

title TEXT NOT NULL,

content TEXT,

created_at DATETIME DEFAULT CURRENT_TIMESTAMP

)

`);

migrated = true;

}

// app/api/posts/route.ts

import { getDb, ensureMigration } from '@/lib/db';

import { NextResponse } from 'next/server';

export async function GET() {

await ensureMigration();

const db = getDb();

const result = await db.execute(

'SELECT * FROM posts ORDER BY created_at DESC'

);

return NextResponse.json(result.rows);

}

npm install @aws-sdk/client-s3

// lib/r2.ts

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

const r2 = new S3Client({

region: 'auto',

endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,

credentials: {

accessKeyId: process.env.R2_ACCESS_KEY_ID!,

secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,

},

});

// app/api/upload/route.ts

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

import { NextRequest, NextResponse } from 'next/server';

const r2 = new S3Client({ /* 위와 동일 */ });

export async function POST(req: NextRequest) {

const formData = await req.formData();

const file = formData.get('file') as File;

if (!file) {

return NextResponse.json(

{ error: 'No file' }, { status: 400 }

);

}

const buffer = Buffer.from(await file.arrayBuffer());

const key = `uploads/${Date.now()}-${file.name}`;

await r2.send(new PutObjectCommand({

Bucket: process.env.R2_BUCKET_NAME!,

Key: key,

Body: buffer,

ContentType: file.type,

}));

const url = `${process.env.R2_PUBLIC_URL}/${key}`;

return NextResponse.json({ url });

}

# 1. Git 초기화 (이미 되어 있을 수 있음)

git init

# 2. 모든 파일을 스테이징

git add .

# 3. 첫 번째 커밋

git commit -m "초기 프로젝트 설정: Next.js + Turso + R2"

# 4. 메인 브랜치 이름 설정

git branch -M main

# 5. GitHub 원격 저장소 연결

git remote add origin https://github.com/본인계정/myproject.git

# 6. 코드 푸시

git push -u origin main

# 🚨 환경변수 (절대 커밋하면 안 됨!)

.env

.env.local

.env.production

# 의존성

node_modules/

# 빌드 결과물

.next/

out/

# OS 파일

.DS_Store

Thumbs.db

# Turso 로컬 DB

*.db

*.db-journal

# 🚨 Cursor MCP 설정 (토큰 포함 시)

.cursor/mcp.json

# 기능 개발 완료 후

git add .

git commit -m "feat: 블로그 게시글 CRUD 구현"

git push

# Turso

TURSO_DATABASE_URL = libsql://myproject-db-username.turso.io

TURSO_AUTH_TOKEN = eyJhxxxxxxxxxx

# R2

R2_ACCOUNT_ID = xxxxxxxxxx

R2_ACCESS_KEY_ID = xxxxxxxxxx

R2_SECRET_ACCESS_KEY = xxxxxxxxxx

R2_BUCKET_NAME = myproject-assets

R2_PUBLIC_URL = https://cdn.myproject.com

# 보안 & 관리자

JWT_SECRET = (openssl rand -base64 32 로 생성)

ADMIN_USERNAME = admin

ADMIN_PASSWORD = (프로덕션용 강한 비밀번호)

# ═══════════════ .env (프로덕션) ═══════════════

# Turso Database

TURSO_DATABASE_URL=libsql://myproject-db-username.turso.io

TURSO_AUTH_TOKEN=eyJhxxxxxxxxxxxxxxxx

# Cloudflare R2

R2_ACCOUNT_ID=your_cloudflare_account_id

R2_ACCESS_KEY_ID=your_r2_access_key_id

R2_SECRET_ACCESS_KEY=your_r2_secret_access_key

R2_BUCKET_NAME=myproject-assets

R2_PUBLIC_URL=https://cdn.myproject.com

# 보안

JWT_SECRET=랜덤32자이상의영문숫자특수문자조합

ADMIN_PASSWORD=관리자비밀번호

# 사이트 설정

NEXT_PUBLIC_SITE_URL=https://myproject.com

ADMIN_USERNAME=admin

ADMIN_PASSWORD=mySecureP@ssw0rd2026!

CREATE TABLE IF NOT EXISTS admins (

id TEXT PRIMARY KEY,

username TEXT UNIQUE NOT NULL,

password_hash TEXT NOT NULL,

role TEXT DEFAULT 'editor',

is_active INTEGER DEFAULT 1,

created_by TEXT,

created_at DATETIME DEFAULT CURRENT_TIMESTAMP,

last_login DATETIME

);