실무개발·2026년 3월 14일
Vercel AI SDK: Next.js에서 스트리밍 AI 채팅 만들기
Vercel AI SDK를 써서 Next.js에서 스트리밍 AI 채팅을 만드는 방법을 정리했다. useChat 훅, Server Actions, 프로바이더 전환, 도구 통합까지 실제 코드로 한 번에 설명한다.
#Vercel AI SDK#Next.js#Streaming#AI Chat
개발과 기술에 대한 이야기를 기록합니다.
Vercel AI SDK를 써서 Next.js에서 스트리밍 AI 채팅을 만드는 방법을 정리했다. useChat 훅, Server Actions, 프로바이더 전환, 도구 통합까지 실제 코드로 한 번에 설명한다.
AI Agent를 만들 때 반복적으로 등장하는 핵심 패턴 세 가지—Tool Use, ReAct, Chain of Thought—를 실제 TypeScript 코드와 함께 정리했다. 이 패턴을 이해하면 Agent 설계가 훨씬 명확해진다.
SaaS에 결제를 붙이려고 Stripe을 연동했다. 결제 코드는 다른 코드와 차원이 다른 긴장감이 있었다. Checkout Session부터 Webhook까지 실전 경험.
기초 프롬프팅을 넘어서 실제로 신뢰할 수 있는 구조화된 출력을 얻는 방법. 시스템/유저/어시스턴트 역할 설계, Few-shot, CoT, JSON 모드, Function Calling, Zod + AI SDK로 타입 안전한 LLM 응답을 만드는 완전 가이드.
실시간 알림을 구현하려고 WebSocket을 공부했다. HTTP 폴링부터 Supabase Realtime까지, 실시간 통신의 선택지와 실전 패턴을 정리했다.
LLM은 학습 데이터 밖의 지식을 모른다. RAG가 이 문제를 어떻게 해결하는지, 문서 수집부터 청킹, 임베딩, 벡터 저장, 검색, 생성까지 전체 파이프라인을 Python과 TypeScript 예제로 구축한다.
API는 한번 공개하면 마음대로 바꾸지 못한다. 클라이언트를 깨트리지 않으면서 API를 진화시키는 버저닝 전략 4가지를 비교하고, GitHub·Stripe·Twilio의 실제 선택을 분석한다.
매일 수동으로 데이터를 정리하다가 지쳤다. 서버리스 환경에서 크론잡과 백그라운드 작업을 구성하면서 배운 것들.
서비스를 운영하면서 유저가 어디서 이탈하는지, 어떤 기능을 쓰는지 전혀 몰랐다. PostHog를 붙이고 데이터 기반으로 결정하기 시작한 경험.
단일 모델이 복잡해질수록 읽기와 쓰기가 서로 발목을 잡는다. CQRS가 그 문제를 어떻게 해결하는지, 단순한 분리부터 이벤트 소싱까지 TypeScript 예제로 완벽 정리.
결제 플로우의 상태를 if문과 boolean 플래그로 관리하다 버그 지옥에 빠졌다. XState의 상태 머신으로 불가능한 상태를 원천 차단한 경험.
"기술 부채"라는 말을 들은 비개발자 관리자는 왜 항상 고개를 갸우뚱할까? 기술 부채를 비즈니스 언어로 번역하고, 리팩토링을 투자로 포지셔닝하고, 이해관계자를 설득하는 실전 프레임워크를 정리했어.
회원가입 확인 이메일을 보내야 하는데 HTML 이메일이 지옥이었다. React Email로 컴포넌트처럼 이메일을 만들고 Resend로 보내는 방법을 정리했다.
REST API와 수동 타입 관리의 한계를 Zod 스키마 검증과 tRPC로 해결하는 방법을 정리했어. 라우터 설정부터 클라이언트 타입 추론, Zod 에러 처리, REST 마이그레이션까지 실전 예제로 커버해.
요청-응답 방식의 동기 통신이 마이크로서비스에서 어떤 문제를 일으키는지, 그리고 이벤트 기반 아키텍처가 그걸 어떻게 해결하는지 파헤쳐봐. Kafka, RabbitMQ, SQS 비교부터 이벤트 소싱, 최종 일관성 개념까지 Node.js 예제와 함께 정리했어.
3개월 전에 만든 내 API를 보고 이게 뭔지 몰랐다. 일관된 REST API를 설계하기 위한 네이밍, 버전 관리, 페이지네이션 패턴을 정리했다.
헥사고날 아키텍처는 비즈니스 로직을 외부 세계로부터 철저히 격리시키는 설계 패턴이야. 포트(Port)와 어댑터(Adapter) 개념을 통해 의존성 방향을 뒤집고, 어떤 DB나 프레임워크가 들어와도 흔들리지 않는 코어를 만드는 방법을 TypeScript 예제로 풀어봤어.
REST API를 만들 때마다 프론트엔드와 백엔드의 타입이 어긋났다. tRPC를 도입하고 API 명세서 없이 타입이 자동으로 맞춰지는 경험을 했다.
내 서비스를 키보드만으로 써보려다 탭이 엉뚱한 곳으로 날아갔다. 웹 접근성을 실제로 개선하면서 배운 것들을 정리했다.
Uncle Bob의 Clean Architecture를 프론트엔드에 그대로 적용하면 과도한 복잡도가 생긴다. 실전에서 통하는 수준으로 다듬은 프론트엔드 레이어 분리 전략을 정리했다.
