JavaScript/Next15 VIBE clone(3) 15 Theme1) 테마 컬러 교체 (globals.css)app/globals.css의 CSS 변수 블록만 갈아끼우면 전체 테마가 바뀝니다. 아래 예시는 노란/오렌지 톤(클로드풍). 마음에 드는 팔레트가 있다면 값만 바꿔 쓰세요./* === Theme tokens === */:root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; /* primary: warm yellow/orange */ --primary: 40 96% 50%; .. 2025. 9. 16. VIBE clone(2) 05 AI Jobs — AI 백그라운드 잡AI 제공자 선택(권장: OpenAI)과 요금/레이트리밋 특성 이해API 키 발급 → .env 설정Inngest Agent Kit 설치 및 AI 에이전트(Agent) 생성프론트 입력값 → tRPC mutation → Inngest 함수 → 에이전트 실행 흐름간단한 요약 에이전트와 코드 생성 에이전트 예제로 동작 확인1) 모델/프로바이더 선택 가이드(튜토리얼 관점)OpenAI(권장)장점: 안정성, 합리적인 레이트리밋(짧은 리셋), 코딩 성능 우수튜토리얼에서는 GPT-4.1을 주력으로 사용Anthropic(Claude 3.5/4)장점: 코딩 품질 매우 우수단점: 레이트리밋이 매우 엄격, 리셋까지 오래 걸려 학습/데모에 비적합xAI(Grok)지원은 되지만 경험이 적음(.. 2025. 9. 16. VIBE clone(1) 소개 & 데모단 한 문장만으로 다음 스타트업을 만든다고 상상해 보세요. Vibe는 그걸 가능하게 하는 AI 기반 앱 빌더입니다. 이 강의에서 여러분은 이걸 직접 만드는 법을 배우게 됩니다. 간단한 프롬프트를 입력하고 제출해 보죠.곧 보게 될 결과는 보통 Lovable, Replit, Bolt 같은 고급 툴에서 기대하는 수준입니다. 하지만 이 튜토리얼에서는 직접 구현하는 방법을 배웁니다. 결과물은 완전히 동작하는 Netflix 스타일의 홈 화면이며, 전적으로 AI가 생성합니다. 프리뷰에서 바로 전체 앱을 탐색할 수 있고, 레이아웃, 인터랙션, 모달 및 즐겨찾기까지 모두 정상 동작합니다. 단지 ‘Netflix처럼 보이는’ 수준이 아니라, 정말 그렇게 동작합니다.프리뷰 상단에는 라이브 URL이 있어 새 탭에서.. 2025. 9. 16. Prisma Next.js와 PrismaPart I: Prisma의 정의와 Next.js와의 시너지1.1. Prisma 정의: 차세대 ORM(Next-generation ORM)Prisma는 Node.js 및 TypeScript 애플리케이션을 위해 데이터베이스와의 상호작용을 근본적으로 단순화하도록 설계된 차세대 ORM(Object-Relational Mapper)입니다. 기존의 전통적인 ORM들이 직면했던 고질적인 문제, 즉 "객체-관계 임피던스 불일치(object-relational impedance mismatch)"를 해결하는 데 중점을 둡니다. 이 문제는 애플리케이션 개발자가 데이터를 객체(Object)의 형태로 사고하는 반면, 관계형 데이터베이스는 데이터를 테이블과 행의 형태로 저장하는 근본적인 차이에서 발.. 2025. 9. 13. tRPC, Next.js, TanStack Query 설정 가이드 tRPC, Next.js, TanStack Query를 활용한 타입-세이프 풀스택 애플리케이션 설정 가이드파트 I: tRPC 패러다임 - API 개발의 새로운 시대현대 웹 개발에서 타입스크립트는 프론트엔드와 백엔드 모두에서 표준으로 자리 잡았습니다. 그러나 이 두 세계가 만나는 API 경계에서는 종종 타입 안전성이 무너지는 '틈'이 발생합니다. 본 가이드는 이 문제를 해결하기 위해 등장한 tRPC(TypeScript Remote Procedure Call)의 개념을 심도 있게 분석하고, 이를 Next.js 및 TanStack Query와 결합하여 실제 프로덕션 환경에서 견고하고 확장 가능한 풀스택 애플리케이션을 구축하는 방법을 아주 상세하게 안내합니다.섹션 1: tRPC 소개: 타입-세이프의 간극을 해결.. 2025. 9. 11. Prismic 1. 언제 Prismic을 사용하면 좋을까?Prismic은 Headless CMS로, 정적인 웹사이트나 동적인 웹 애플리케이션에서 콘텐츠를 유연하게 관리할 때 적합해. 다음과 같은 경우에 특히 효과적이다.마케터나 콘텐츠 팀이 자주 콘텐츠를 수정하는 경우→ 개발자가 개입하지 않고, 비개발자가 직접 관리 페이지에서 콘텐츠를 수정할 수 있다.Next.js, Nuxt.js 등과 함께 정적인 페이지를 생성할 때 (SSG, ISR)→ 정적 생성(Static Site Generation)과 궁합이 좋아서 빠른 로딩 속도를 유지할 수 있다.다국어 지원이 필요한 경우→ 다국어 콘텐츠 관리를 손쉽게 할 수 있는 기능이 제공된다.반복적인 페이지 템플릿을 사용할 때→ 블로그, 제품 페이지, 랜딩 페이지 같은 템플릿화된 페이지.. 2025. 3. 6. 전역 상태 관리 라이브러리 소개 및 사용 시기(useContext, Zustand, Jotai, Recoil, Redux Toolkit, Nuqs) 라이브러리주요 특징상태 저장 방식성능 사용 난이도새로고침 후 유지 비동기 지원useContext + useReducer기본 내장, 간단함메모리 (React 상태)중간쉬움❌ 초기화됨❌ 직접 구현 필요Zustand가볍고 빠른 전역 상태 관리메모리 (React 상태)✅ 매우 빠름✅ 쉬움❌ 초기화됨✅ 가능 (비동기 지원)JotaiRecoil-like Atom 상태 관리메모리 (React 상태)✅ 빠름✅ 쉬움❌ 초기화됨✅ 가능 (비동기 지원)Recoil공식적으로 Facebook이 개발메모리 (React 상태)✅ 빠름⚠️ 중간❌ 초기화됨✅ 가능Redux Toolkit전통적인 상태 관리메모리 (Redux Store)🚀 최적화 가능⚠️ 중간❌ 초기화됨✅ 가능 (비동기 지원)NuqsURL을 상태처럼 사용URL Quer.. 2025. 3. 5. Upstash Upstash는 서버리스(Serverless) 환경에 최적화된 Redis 및 Kafka 기반 데이터베이스 서비스이다.Next.js, Vercel, AWS Lambda 등과 함께 저비용, 저지연, 고성능으로 사용 가능하다.언제 Upstash를 사용할까?"서버리스 환경에서 Redis가 필요할 때" → Upstash가 가장 좋은 선택"Vercel, Netlify, AWS Lambda에서 Redis를 간편하게 쓰고 싶을 때""비용을 절감하면서 빠른 Key-Value 저장이 필요할 때""Redis의 모든 기능(예: Pub/Sub, Streams)을 써야 한다면 Redis Cloud를 고려"비용 효율적이고 사용이 간편하며 Next.js와 완벽하게 호환된다Redis와 Kafka란? 더보기더보기더보기1. Redis란?.. 2025. 3. 5. Middleware 미들웨어 사용법 Next.js Middleware 완벽 가이드1. Middleware란?Middleware는 Next.js에서 요청(Request)이 특정 페이지(Route)나 API 핸들러에 도달하기 전에 **전처리(Preprocessing)**를 수행하는 서버 측 함수이다.Middleware의 역할사용자 인증: 로그인하지 않은 사용자를 로그인 페이지로 리디렉트A/B 테스트: 특정 트래픽을 랜덤하게 다른 페이지로 분배보안 강화: 요청을 필터링하거나 차단Locale 처리: 자동으로 언어별 페이지로 리디렉트쿠키 검사: 특정 쿠키 값을 기반으로 동작 결정Middleware 실행 흐름사용자가 요청을 보냄Middleware에서 요청을 가로채고 처리함 (request 객체 활용)NextResponse를 통해 다음 단계로 넘기거나.. 2025. 3. 5. 이전 1 2 다음
