OPEN HYPER STEP
← 목록으로 (실전 프로젝트)
REAL-PROJECT · 8 / 9
real-project
CHAPTER 8 / 9
읽기 약 2
FUNCTION

커뮤니티 서비스 만들기


핵심 개념

대표 서비스: 에브리타임, 디스코드. 스택: Next.js + Supabase Realtime. 게시판 CRUD부터 실시간 댓글까지.

본문

// Supabase 실시간 구독 import { createClient } from "@supabase/supabase-js";

const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! );

// 실시간 댓글 구독 const channel = supabase .channel("comments") .on("postgres_changes", { event: "INSERT", schema: "public", table: "comments", }, (payload) => { setComments(prev => [...prev, payload.new]); }) .subscribe();

// 게시판 테이블 설계 // posts: id, title, content, user_id, created_at // comments: id, post_id, content, user_id, created_at


🛠️ 이 챕터의 실습 방법

Vercel 무료 배포 (5분)

  1. https://vercel.com 가입 (GitHub 로그인)
  2. 'Add New Project' → GitHub 저장소 선택
  3. 'Deploy' 클릭 → 1~2분 후 배포 완료
  4. 제공된 URL(예: my-project.vercel.app)로 접속 확인

GitHub Actions CI/CD 설정

프로젝트 루트에 워크플로우 파일 생성

mkdir -p .github/workflows

.github/workflows/ci.yml 파일 생성:

name: CI on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 - run: npm ci - run: npm run build

모니터링 설정 (무료)


AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
무료 모델

Gemini 2.5 Flash(무료) + Claude Sonnet 4.6(무료) + Grok 4.1(무료)

'커뮤니티 서비스 만들기'를 0원으로 시작하고 싶어.
Gemini(무료)로 기존 서비스 분석 + Claude(무료)로 핵심 코드 생성 +
Vercel·Supabase 무료 티어로 배포까지 끝내는 플랜을 짜줘.
소자본 모델

Claude API + Cursor $20/mo + Make.com — 월 10~30만원

'커뮤니티 서비스 만들기'에 월 20만원을 투자할 수 있어.
Claude API(코드) + Make.com(자동화) + Stripe(결제) 조합으로
수익 구조까지 포함한 아키텍처를 월 비용 분배안과 함께 설계해줘.
프로덕션 모델

Claude Opus + CrewAI + LangGraph — 월 100만원+

'커뮤니티 서비스 만들기'를 프로덕션으로 스케일업하려 해.
CrewAI(개발+테스트+배포 에이전트 팀) + LangSmith(모니터링) +
K8s(오토스케일링) 엔터프라이즈 아키텍처를 월 100만원 예산으로 설계해줘.
스택 프롬프트

0원→$20/mo→$100/mo 단계별 스택 비교

'커뮤니티 서비스 만들기'를 만들 때 1인 개발자에게 최적의 스택을 알려줘.
예산 0원→20만원→100만원 단계별로
프론트+백+DB+AI+배포 전체 스택과 전환 시점을 설계해줘.

⭐ 이것만 기억하세요
커뮤니티 서비스 만들기 이 3가지만 확실히 잡으세요
1.커뮤니티는 CRUD + 실시간 + 인증 + 알림이 모두 결합돼서 종합 역량을 증명하는 최적의 포트폴리오입니다
2.게시판 CRUD + 댓글 + 좋아요 + 실시간 알림 + 사용자 프로필을 하나의 서비스에 통합합니다
3.다음 챕터에서 결제가 포함된 커머스 서비스를 직접 만듭니다

공유하기
진행도 8 / 9