[Harness Engineering] 도메인별 하네스 템플릿
REST API 백엔드, 프론트엔드 웹 애플리케이션, 데이터 파이프라인 세 가지 도메인에 맞춘 완결된 하네스 템플릿을 제공한다. 각 템플릿은 CLAUDE.md, 에이전트 정의, 스킬 파일, 의존성 규칙, 테스트 전략을 포함하며, 복사 후 프로젝트에 맞게 커스터마이징하여 사용할 수 있다. 하네스는 프레임워크가 아니라 패턴이며, 프로젝트와 함께 진화한다.
next.js
Supabase 완전 정복 시리즈 16편 — 실전: Todo/협업툴 (실시간 + 낙관적 업데이트 + Drag & Drop)
Supabase + dnd-kit + React useOptimistic으로 Kanban 협업툴을 Next.js App Router에서 구축. 낙관적 업데이트 패턴, Drag & Drop 순서 저장, Realtime 다중 사용자 동기화, RLS 멤버 접근 제어, 댓글 시스템까지 완전 구현한 Supabase 시리즈 완결편.
Supabase 완전 정복 시리즈 15편 — 실전: AI 챗봇 서비스 (RAG + 스트리밍 + 문서 업로드)
Supabase pgvector + OpenAI + Vercel AI SDK로 RAG 기반 AI 챗봇 서비스를 Next.js App Router에서 처음부터 끝까지 구축. 문서 청킹·임베딩·벡터 검색·스트리밍 응답·대화 히스토리·RLS 보안까지 완전 구현.
Supabase 완전 정복 시리즈 14편 — 실전: SaaS 대시보드 (Stripe 결제 + 플랜 관리 + 팀 기능)
Supabase Auth + Stripe Checkout + Stripe Webhook으로 3-tier SaaS 구독 시스템을 Next.js App Router로 구축하는 완전 가이드. 플랜별 기능 제한, Stripe Customer Portal, 팀 멤버 초대, 사용량 대시보드까지 완전 구현.
Supabase 완전 정복 시리즈 13편 — 실전: 실시간 채팅 앱 처음부터 끝까지
Supabase Realtime(Broadcast+Presence+Postgres Changes), Auth, Storage, RLS를 활용해 Next.js App Router로 실시간 채팅 앱을 처음부터 끝까지 구축하는 완전 가이드. 타이핑 인디케이터, 온라인 상태, 파일 첨부, 채널 관리까지 모두 포함.
Supabase 완전 정복 시리즈 12편 — Analytics Buckets & Logs: 대용량 분석 워크로드
Supabase Analytics Buckets(Apache Iceberg 기반 컬럼 지향 스토리지)와 Logs Explorer를 완벽 정리. OLTP vs OLAP 차이, PyIceberg로 데이터 적재, Postgres에서 Iceberg 쿼리, CDC 복제, edge_logs/postgres_logs/function_logs 활용법, Next.js 분석 대시보드 구현까지 수록.
Supabase 완전 정복 시리즈 11편 — 로컬 개발 환경 & CLI: 프로 개발자의 워크플로우
Supabase CLI로 로컬 개발 환경 구축, 마이그레이션 워크플로우, 시드 데이터 관리, TypeScript 타입 자동 생성, GitHub Actions CI/CD 파이프라인까지 완벽하게 정리한 가이드. Next.js App Router 기준의 실전 폴더 구조와 치트시트 포함.
Supabase 완전 정복 시리즈 9편 — Cron Jobs & Queues: 백그라운드 작업 자동화 완벽 가이드
Supabase pg_cron & pgmq로 스케줄 작업과 메시지 큐 기반 백그라운드 처리를 구현하는 완벽 가이드. 이메일 큐 워커, AI 장기 작업 큐, 웹훅 재시도 패턴을 Next.js App Router + TypeScript + Edge Functions로 상세하게 다룹니다.
Supabase 완전 정복 시리즈 8편 — AI & 벡터 검색: pgvector로 시맨틱 검색과 RAG 구현하기
Supabase pgvector로 벡터 임베딩 저장, HNSW 인덱스, 코사인 유사도 검색, RAG(검색 증강 생성) 파이프라인을 구현하는 완벽 가이드. OpenAI Embeddings, 하이브리드 검색(FTS+벡터), 자동 임베딩 갱신까지 Next.js TypeScript 코드로 다룹니다.
Supabase 완전 정복 시리즈 7편 — Edge Functions: Deno 기반 서버리스 함수 완벽 가이드
Supabase Edge Functions로 Deno 기반 서버리스 함수를 구현하는 완벽 가이드. Stripe 웹훅, OpenAI 프록시, 이메일 발송, Database Webhook 등 실전 패턴과 Next.js App Router 연동 방법을 TypeScript 코드로 상세히 다룹니다.
Supabase 완전 정복 시리즈 6편 — 스토리지(Storage) 완벽 가이드: 파일 업로드, 이미지 최적화, CDN
Supabase Storage로 파일 업로드, 이미지 변환(리사이징·WebP), Smart CDN 캐싱, RLS 접근 제어를 구현하는 방법을 완벽히 정리합니다. Next.js App Router + TypeScript 기준의 실전 코드와 커스텀 이미지 로더 설정까지 다룹니다.
Supabase 완전 정복 시리즈 5편 — 실시간 기능(Realtime) 완벽 가이드
Supabase Realtime의 Broadcast, Presence, Postgres Changes를 완벽히 이해하고, 실시간 채팅·온라인 사용자 추적·라이브 대시보드를 Next.js App Router + TypeScript로 구현합니다. 2025년 신기능 Broadcast from Database까지 다룹니다.
Supabase 완전 정복 시리즈 4편 — RLS(Row Level Security) 완벽 가이드
Supabase Row Level Security(RLS)의 작동 원리부터 USING/WITH CHECK 차이, 개인·팀·역할 기반 정책 패턴, 성능 최적화, 테스트 방법, 자주 하는 실수까지 실전 예제로 완벽히 정리합니다.
Supabase 완전 정복 시리즈 3편 — 인증(Auth) 완벽 가이드: 소셜 로그인, JWT, MFA, SSO
Supabase Auth의 JWT 동작 원리부터 이메일/소셜 로그인, Magic Link, MFA(TOTP), SAML SSO, OAuth 2.1 Identity Provider까지 완벽 정리합니다. Next.js App Router + TypeScript 기준 실전 코드와 보안 주의사항을 함께 다룹니다.
Supabase 완전 정복 시리즈 2편 — 데이터베이스 & 자동 API (REST/GraphQL)
Supabase PostgreSQL 데이터베이스와 자동 생성 REST/GraphQL API의 원리를 이해하고, Next.js App Router + TypeScript 환경에서 CRUD, 관계형 조회, 페이지네이션, RPC까지 실전 코드로 마스터합니다.
Supabase 완전 정복 시리즈 1편 — Supabase란 무엇인가? Firebase와 제대로 비교해보기
Supabase가 무엇인지, Firebase와 어떻게 다른지 기능·가격·코드 예제를 통해 완벽히 비교합니다. Next.js App Router + TypeScript 환경에서의 초기 세팅 방법도 함께 다룹니다.
실무 팁 — 현실적으로 테스트 유지하는 법
Next.js 테스트 시리즈의 마지막 편으로, 실무에서 테스트를 지속적으로 유지하기 위한 전략을 다룹니다. 테스트 우선순위 선정, 커버리지의 현실적 목표, 속도 관리, 스냅샷 테스트 활용법, TDD 맛보기, 흔한 실수와 주의점, 그리고 팀에 테스트를 점진적으로 도입하는 6단계 로드맵을 정리합니다.
GitHub Actions로 테스트 자동화하기
Next.js 프로젝트에 GitHub Actions를 설정해 정적 테스트, 단위/통합 테스트, E2E 테스트를 자동으로 실행하는 CI 파이프라인을 구축합니다. YAML 작성법부터 PR 머지 차단 설정, 환경변수 관리, 실행 최적화(경로 필터, 캐싱, 브라우저 제한)까지 다루고, Vercel·GitLab CI·Jenkins 등 다른 CI/CD 도구와의 비교도 포함합니다.
E2E 테스트 — Playwright로 사용자처럼 테스트하기
Next.js 프로젝트에 Playwright를 도입해 E2E 테스트를 작성하는 방법을 다룹니다. 설치 및 설정부터 로그인 플로우, 상품 검색과 장바구니 같은 실전 시나리오까지 단계별로 안내합니다. 자주 쓰는 API 정리, 실패 디버깅 도구(스크린샷, 트레이스, UI 모드), 그리고 어떤 시나리오에 E2E를 작성해야 하는지 선정 기준도 함께 제시합니다.
통합 테스트 — MSW로 API 모킹하기
Next.js 프로젝트에서 MSW(Mock Service Worker)를 활용해 통합 테스트를 작성하는 방법을 다룹니다. 단위 테스트와의 차이를 명확히 하고, 유저 프로필 조회와 로그인 폼 같은 실전 예제를 통해 컴포넌트-API 연동 테스트를 구현합니다. Next.js Route Handler 테스트와 핸들러 관리 전략도 함께 안내합니다.
단위 테스트 — Vitest로 첫 테스트 작성하기
Next.js 프로젝트에 Vitest를 설치하고 첫 번째 단위 테스트를 작성하는 과정을 안내합니다. 유틸 함수 테스트부터 React Testing Library를 활용한 컴포넌트 테스트까지 다루며, 테스트 케이스 선정 기준, 파일 위치 전략, 자주 쓰는 매처를 실무 관점에서 정리합니다.
정적 테스트 — 이미 하고 있었을지도 모릅니다
Next.js 프로젝트에서 정적 테스트를 제대로 활용하는 방법을 다룹니다. TypeScript 엄격 모드, ESLint, Prettier 설정법과 함께 파일 저장 시 자동 포맷팅, git commit 시 자동 검사(husky + lint-staged)까지 3중 안전장치를 구축하는 과정을 안내합니다.
테스트가 뭔데? — 4가지 테스트 유형 완전 정리
Next.js 웹 서비스를 만들었지만 테스트 개념이 없는 개발자를 위해, 소프트웨어 테스트의 4가지 유형(정적 테스트, 단위 테스트, 통합 테스트, E2E 테스트)을 정의하고 각각의 역할과 비용을 비교합니다. 테스트 피라미드를 기준으로 실무에서 어떤 비율로 가져가야 하는지 안내합니다.
Vercel Blob 시작하기: Next.js에서 파일 스토리지 연동하기
Vercel Blob을 Next.js 프로젝트에 연동하는 방법을 단계별로 설명합니다. Blob Store 생성부터 파일 업로드, 목록 조회, 메타데이터 관리까지 다룹니다.
[Next.js] Monorepo 구축 가이드: Turborepo + Vercel 완벽 정복
Next.js 프로젝트를 Monorepo로 구축하는 실전 가이드입니다. Turborepo를 활용하여 여러 웹 서비스의 공통 UI를 효율적으로 관리하고, Vercel에 자동 배포하는 전체 과정을 다룹니다. 프로젝트 생성부터 CI/CD 파이프라인 구축, 성능 최적화까지 실무에서 바로 적용 가능한 모든 내용을 단계별로 설명합니다.
2025년 무료 웹 호스팅 완벽 가이드: Next.js, WordPress, Python
2025년 최신 무료 웹 호스팅 플랫폼 완벽 가이드. Next.js, WordPress, Python 환경별로 Vercel, Netlify, Cloudflare Pages, WordPress.com, InfinityFree, Render, PythonAnywhere 등 주요 플랫폼의 특징, 제한사항, 사용 케이스를 비교 분석하고 프로젝트 유형별 최적의 선택 방법을 제시합니다.
[Next.js] Prisma 시작하기: 개념부터 기본 사용법까지
Next.js에서 Prisma ORM을 시작하는 완벽한 기초 가이드입니다. Prisma의 핵심 개념, migrate/push/generate 명령어의 차이와 사용법, Next.js 프로젝트 설정, 기본 CRUD 작업까지 초보자도 쉽게 따라할 수 있도록 설명합니다.
[Next.js] Session 관리 패턴
Next.js에서 확장 가능한 세션 관리 시스템을 구현하는 완전한 가이드입니다. JWT 기반 토큰 관리, 다중 디바이스 지원, 의심스러운 활동 감지, 세션 분석, 사용자 대시보드까지 엔터프라이즈급 세션 관리의 모든 측면을 다룹니다.
[Next.js] Multi-factor Authentication (MFA)
Next.js에서 Multi-factor Authentication(MFA) 시스템을 구현하는 완전한 가이드입니다. TOTP, SMS, WebAuthn, 백업 코드 등 다양한 인증 방식과 통합 관리, 사용자 친화적 UI 컴포넌트까지 실제 프로덕션에서 사용할 수 있는 포괄적인 솔루션을 제시합니다.
[Next.js] IP 기반 접근 제어
Next.js에서 IP 기반 접근 제어 시스템을 구현하는 완전한 가이드입니다. 클라이언트 IP 추출, 지리적 정보 조회, 접근 규칙 관리, 실시간 모니터링, 관리자 대시보드까지 프로덕션에서 사용할 수 있는 포괄적인 솔루션을 제시합니다.