Next.js
-
Next.js + Tailwind CSS v4 + shadcn/ui 테마 시스템 구축 가이드실제 경험과 인사이트를 AI와 함께 정리한 글 2025. 12. 22. 14:29
작성일: 2025년 12월 22일카테고리: Frontend, Next.js, Tailwind CSS키워드: Next.js, Tailwind CSS v4, shadcn/ui, next-themes, Dark Mode, CSS Variables요약shadcn/ui의 zinc 테마를 next-themes로 확장할 때 테마 전환이 동작하지 않는 문제가 발생한다. 근본 원인은 text-zinc-400 같은 하드코딩된 Tailwind 색상 클래스가 CSS 변수를 참조하지 않기 때문이다. 이 글에서는 올바른 테마 시스템 설정 방법과 자주 하는 실수, 그리고 색상 사용 가이드를 정리한다.문제 상황: 왜 테마가 깨지는가?전형적인 시나리오shadcn/ui로 Next.js 프로젝트 초기화 (zinc 테마 선택)next-th..
-
Claude Opus 4.5 vs Gemini 3.0 Pro vs Gemini 2.5 Pro vs GPT-5.1 Codex Max: 프론트엔드 설계문서 비교실제 경험과 인사이트를 AI와 함께 정리한 글 2025. 11. 27. 00:05
작성일: 2025년 11월 26일카테고리: AI, Frontend, Architecture키워드: Claude Opus 4.5, Gemini 3.0, GPT-5.1, Feature-Sliced Design, Next.js, AI 코딩요약Gemini 3.0, GPT-5.1 Codex Max, Claude Opus 4.5가 연이어 출시된 직후, 동일한 프롬프트로 프론트엔드 설계문서 작성 능력을 비교했습니다. 동료가 공유한 LinkedIn 글에서 "디자인 영역에서 Gemini 3.0이 압승"이라는 평가를 보고 Gemini Ultra를 결제하여 직접 테스트해봤습니다. 실무 개발자 관점에서 복잡한 B2B SaaS 프론트엔드 설계문서 작성 테스트를 진행한 결과, Claude Opus 4.5가 문서 구조, 기술적 깊..
-
AI Agent를 위한 Frontend 개발 가이드: AGETNTS.md 로 Next.js + shadcn/ui 프로젝트 구조 설계실제 경험과 인사이트를 AI와 함께 정리한 글 2025. 11. 24. 13:59
AI Agent를 위한 Frontend 개발 가이드: AGENTS.md로 Next.js + shadcn/ui 프로젝트 구조 설계작성일: 2025년 11월 24일카테고리: Frontend, AI, Architecture키워드: Next.js, React, AI Agent, AGENTS.md, CLAUDE.md, shadcn/ui, TanStack Query, Zustand요약AI 코딩 어시스턴트(Claude, Copilot 등)와 협업할 때 프로젝트 구조를 명확히 문서화하면 AI가 일관된 코드를 생성합니다. 이 글에서는 Next.js 16 + shadcn/ui 기반 프로젝트에서 AI Agent가 따라야 할 아키텍처 패턴, 네이밍 컨벤션, 데이터 흐름을 정의하는 방법을 공유합니다. 실제 B2B API Gat..