오늘도 공부

MCP(Model Context Protocol)란?MCP는 AI 에이전트와 코딩 어시스턴트가 애플리케이션과 상호작용할 수 있도록 하는 오픈 표준 프로토콜입니다. Next.js는 이를 통해 개발 중인 앱의 상태를 AI가 실시간으로 파악하고 도움을 줄 수 있게 합니다.두 가지 MCP 서버Next.js는 두 개의 MCP 서버를 함께 사용할 것을 권장합니다:1️⃣ Next.js MCP 서버 (내장)Next.js 16 이상에 기본 탑재되어 있으며, 개발 서버 내부에서 실행됩니다.주요 기능:실시간 앱 상태 접근 - 애플리케이션의 현재 런타임 정보 조회페이지 메타데이터 쿼리 - 라우트, 컴포넌트, 렌더링 세부정보에러 추적 - 빌드 에러, 런타임 에러, 개발 로그 조회Server Actions 검사 - 컴포넌트 계층..

🔧 내장 MCP 서버 툴 (5가지)Next.js 16 개발 서버에 기본 탑재되어 있으며, /_next/mcp 엔드포인트를 통해 접근합니다.1️⃣ get_errors기능: 현재 발생한 모든 에러 조회반환 정보:빌드 에러 (Build Errors)런타임 에러 (Runtime Errors)타입 에러 (Type Errors)브라우저 세션별 에러실전 예제:# AI 에이전트 사용"내 앱에 현재 어떤 에러가 있어?"# MCP 응답 예시{ "success": true, "port": 3000, "toolName": "get_errors", "result": { "content": [{ "type": "text", "text": "# Found errors in 1 browser sess..

📚 Discussion (토론/질문)Flutter 앱 아키텍처에 대해 미치고 있습니다. 실제 앱은 어떻게 구조화하시나요?설명: 실제 e-commerce 앱을 만드는 솔로 개발자가 다양한 아키텍처 접근 방식 사이에서 혼란을 겪고 있습니다. ViewModel이 여러 Repo를 직접 호출해도 되는지, 언제 도메인 레이어를 도입해야 할지, 기능 간 의존성은 어떻게 관리하는지 등 현실적인 고민들을 공유하고 조언을 구함.👍 좋아요: 45 ｜ 💬 댓글: 52Flutter가 두렵고 React는 편한데, 어떻게 해야 할까요?설명: 기존에 React에 익숙한 개발자가 Flutter 도입에 대해 망설이고 있는 상황을 공유하며, 커뮤니티에 Flutter의 장점과 장기적인 가치에 대한 의견을 묻는 글.👍 좋아요: 1 ｜..

Cursor와 클로드 코드를 사용하며 2500개 이상의 프롬프트를 작성했고, 개인 프로젝트부터 프로덕션 레벨 프로젝트까지 다양한 경험을 쌓았습니다. 이 과정에서 배운 모든 노하우를 한 곳에 모아 여러분과 공유하고자 합니다.1. 명확한 비전 정의하기구체적이고 상세한 비전으로 시작하세요. 입력이 모호하면 출력도 모호합니다. "쓰레기가 들어가면 쓰레기가 나온다"는 원칙을 항상 기억하세요.실전 예제❌ 나쁜 예:Todo 앱을 만들어줘✅ 좋은 예:Next.js 14 (App Router)를 사용한 Todo 앱을 만들어줘. 요구사항은 다음과 같아:기능:- 할 일 추가/수정/삭제- 완료 체크박스- 우선순위 설정 (높음/중간/낮음)- 카테고리별 필터링- 로컬스토리지에 데이터 저장UI/UX:- Tailwind CSS 사용..

📚 아키텍처 & 프로젝트 구조Flutter 앱 아키텍처, 어떻게 구성하는 게 현실적일까?설명: 이커머스 앱을 개발 중인 솔로 개발자가 현실적인 Flutter 구조 설계에 대해 고민을 나눔. 클린 아키텍처와 실전 코드베이스 간 괴리에 대해 다양한 질문을 던짐.👍 좋아요: 19 | 💬 댓글: 25Flutter 프로젝트가 커질 때, 어떻게 유지보수 가능한 구조로 만드나요?설명: 중형 규모 앱을 개발 중인 개발자가 프로젝트 확장 시 코드베이스가 엉키는 현상을 방지하기 위한 실제 전략을 묻는 글.👍 좋아요: 20 | 💬 댓글: 38Flutter에서는 문법보다 아키텍처가 중요하다설명: 코드보다는 구조가 장기 유지보수에 얼마나 중요한지에 대한 고찰.👍 좋아요: 50 | 💬 댓글: 11🧰 툴, 프레임워크..

고급 튜토리얼: PDF 양식 자동화 스킬 만들기목표이 튜토리얼에서는 실행 가능한 Python 스크립트와 검증 로직을 포함한 고급 스킬을 만들어봅니다.난이도⭐⭐⭐ 고급 - 실행 가능한 스크립트, 계획-검증-실행 패턴, 시각적 분석소요 시간약 60-90분단계 1: 문제 정의하기시나리오여러분은 매주 수백 개의 PDF 양식을 처리해야 합니다. 현재 프로세스:PDF 양식 열기스프레드시트에서 데이터 찾기수동으로 필드 채우기저장 및 다음 양식으로이 과정에서 발생하는 문제:😓 반복적이고 시간 소모적🐛 오타나 잘못된 필드 입력 오류🔍 어떤 필드를 채웠는지 추적 어려움📊 일괄 처리 불가능해결 방법Claude가 다음을 수행하도록 스킬을 만듭니다:PDF 양식 분석 (어떤 필드가 있는지)스프레드시트 데이터 매칭변경 계획..

중급 튜토리얼: API 문서화 스킬 만들기목표이 튜토리얼에서는 점진적 공개(Progressive Disclosure) 패턴을 사용하여 여러 파일로 구성된 스킬을 만들어봅니다.난이도⭐⭐ 중급 - 여러 파일 구조, 조건부 참조, 도메인별 구성소요 시간약 30-40분단계 1: 문제 정의하기시나리오여러분은 REST API 문서를 작성하는 일을 자주 합니다. API는 여러 도메인(사용자, 결제, 상품)으로 나뉘어 있고, 각 도메인마다 다른 스키마와 엔드포인트가 있습니다.현재 문제점:모든 API 정보를 하나의 파일에 넣으면 너무 길어짐 (1000+ 줄)Claude가 필요없는 도메인 정보까지 읽어서 토큰 낭비새로운 도메인을 추가하기 어려움해결 방법점진적 공개 패턴을 사용하여 Claude가 필요한 정보만 읽도록 구조화..

초급 튜토리얼: 간단한 블로그 글 작성 스킬 만들기목표이 튜토리얼에서는 블로그 글을 일관된 형식으로 작성하도록 돕는 간단한 스킬을 만들어봅니다.난이도⭐ 초급 - 코드 없음, 순수 마크다운 지침만 사용소요 시간약 15-20분단계 1: 문제 정의하기시나리오여러분은 기술 블로그를 운영하고 있습니다. 매번 블로그 글을 쓸 때마다 다음과 같은 지침을 Claude에게 반복해서 말하고 있습니다:"독자를 '여러분'이라고 칭해줘""각 섹션은 명확한 소제목으로 시작해줘""코드 예시는 항상 설명을 먼저 하고 그 다음에 보여줘""마지막에 핵심 요약을 3개 bullet point로 정리해줘"이런 지침을 스킬로 만들면 매번 반복하지 않아도 됩니다!단계 2: 스킬 디렉토리 생성하기먼저 스킬을 저장할 폴더를 만듭니다:blog-wri..

목차핵심 원칙스킬 구조효과적인 작성 패턴콘텐츠 가이드라인평가와 반복 개선실행 가능한 코드가 포함된 스킬체크리스트핵심 원칙1. 간결함이 핵심컨텍스트 윈도우는 공공재입니다. 스킬은 다음 요소들과 함께 컨텍스트를 공유합니다:시스템 프롬프트대화 기록다른 스킬의 메타데이터실제 요청 내용작성 시 항상 자문하세요:"Claude가 정말 이 설명을 필요로 할까?""Claude가 이미 알고 있다고 가정할 수 있을까?""이 단락이 토큰 비용을 정당화할까?"2. 적절한 자유도 설정작업의 취약성과 가변성에 맞춰 구체성 수준을 조정하세요.높은 자유도 (텍스트 기반 지침) - 다음 경우에 사용:여러 접근 방식이 유효한 경우결정이 맥락에 따라 달라지는 경우휴리스틱이 접근 방식을 안내하는 경우중간 자유도 (구조화된 가이드라인) - 다..

Advanced Claude Code Hooks: Controlling Sub-Agent Behavior | LTSCommerce - Bespoke PHP DevelopmentAdvanced Claude Code Hooks: Controlling Sub-Agent Behavior 24 October 2025 • 8 min read • AI Claude Code hooks are powerful automation tools that execute at specific points during AI coding sessions. While basic hooks can validate prompts or add contexltscommerce.dev원문을 번역한 내용입니다.개요Claude Code의 훅(ho..