앵그리비버's IT를 부탁해

클로드 코드(Claude Code) & MCP 연동으로 웹서비스 제작부터 자동 테스트, 깃허브 업로드까지 한 번에 끝내기!안녕하세요, 앵그리비버입니다! 🦫✨조금 늦은 감이 있지만 책을 따라 말로만 듣던 클로드 코드(Claude Code) 터미널 환경에 직접 다양한 MCP를 연동해서 프론트엔드 앱 개발부터 테스트, 배포까지 풀코스로 경험해보았습니다.결론부터 말씀드리면... "와, 진짜 쉽다...!" 소리가 절로 나왔습니다. 과정들을 스크린샷과 함께 친절하게 풀어볼게요!1단계: Context7 & Playwright MCP 설정하기가장 먼저 최신 라이브러리 문서와 유용한 컨텍스트를 클로드에게 제공하기 위해 Context7 API Key를 발급받고 로컬 클로드 코드 환경에 연동했습니다.claude mcp a..

Claude Code에 노션(Notion) MCP 연동하기!안녕하세요, 앵그리비버입니다! 👋MCP 연결을 안하고 클로드 코드를 사용하는 분은 없겠지만 책의 마지막 챕터를 정리해봅니다. Claude Code와 MCP(Model Context Protocol) 연결인데요! 너무 쉬워서 이렇게 까지 쉬우면 안 사용할 이유가 없지 않나 싶네요.결론부터 말씀드리면... 생각보다(?), 생각만큼(?) 참 쉽습니다~! 🎉스마트하게 터미널 명령 한 줄로 노션을 연결하고, 클릭 몇 번 만에 로그인 인증까지 끝내는 과정을 스크린샷과 함께 알려드릴게요!1단계: 터미널에서 노션 MCP 서버 등록하기Claude Code를 실행 전에 터미널에서 바로 CLI 명령어로 노션 MCP 서버 URL을 등록해 줍니다.claude mcp..

클로드 코드 서브 에이전트로 뚝딱! AI PDF 요약 웹 제작안녕하세요, 앵그리비버입니다! 🦫✨지난 포스팅에 이어서 에이전트를 활용한 **'바이브 코딩(Vibe Coding)'**입니다. 바로 "PDF 문서를 업로드하면 AI가 핵심을 바로 요약해 주는 웹 서비스" 만들기입니다!🤖 역할 분담으로 스마트하게: 서브 에이전트이번 프로젝트에서는 클로드 코드에 역할을 부여해 '팀 프로젝트' 형태로 진행했습니다. 마치 회사에서 개발 팀을 운영하는 것과 유사한 방식이죠. 터미널 스크린샷을 보시면 제가 입력한 역할들은 다음과 같습니다:product-prd-manager: 요구사항 정의서(PRD) 및 기능 명세서 작성backend-architect: PDF 파일 업로드 및 텍스트 추출 로직 구현llm-integrat..

클로드 코드 에이전트(Agents) 기능으로 웹 서비스 만들어보기 💻안녕하세요! 앵그리비버입니다.책에서 소개한대로 클로드 코드(Claude Code)를 이용해 실제 동작하는 '마음 일기' 웹 서비스를 제작하는 과정을 스크린샷과 함께 한 단계씩 따라해볼 수 있도록 정리해봤습니다!터미널 화면부터 실제 브라우저 출력 화면까지 순서대로 설명해드릴 테니 천천히 따라와보세요.STEP 1. 클로드 코드 실행 및 서브에이전트 설정첫 번째 스크린샷을 보시면, 터미널(Terminal) 환경에서 Claude Code v2.1.79를 실행한 모습입니다. 여기까지는 이미 너무 여러번 해봤죠.프로젝트 폴더(~/Documents/GitHub/vibe_claude/Study-05)로 이동한 뒤 클로드 코드를 켭니다.입력창에 /ag..

🤖 클로드 코드(Claude Code) 서브 에이전트 기능으로 '냉장고를 부탁해' 앱 업데이트!안녕하세요! 앵그리비버입니다. 🦫✨지난 포스팅에 이어서 **클로드 코드(Claude Code)** 열심히 따라해보고 글을 남겨봅니다. 지난주에는 바이브코딩으로 만들었던 '냉장고를 부탁해' 앱을 업데이트하려고 합니다. 책에서 알려준대로 클로드 코드의 서브 에이전트(Sub-Agents) 기능을 활용해 진행해 봤습니다.생각보다 결과가 신기합니다. 말로만 듣던 그놈의 에이전트가 어떻게 동작하는지 한 번 해봤습니다.💡 왜 서브 에이전트(Agent)를 써야 할까요?혼자서 모든 작업을 처리하는 단일 AI보다, 특정 역할에 특화된 전문가 에이전트를 여러 개 만들어서 협업시키는 게 훨씬 정확하고 빠르기 때문입니다.책에서 ..

[바이브코딩] 클로드 코드(Claude Code)로 '냉장고 레시피 추천 Web' 뚝딱 만들어봤습니다!안녕하세요! 앵그리비버's IT를 부탁해의 앵그리비버입니다. 🦫✨요즘 개발자 커뮤니티에서 가장 핫한 키워드가 뭔지 아시나요? 바로 **'바이브 코딩(Vibe Coding)'**과 **'클로드 코드(Claude Code)'**입니다! 명령만 몇 줄 던져주면 알아서 기획서(PRD)를 나누고, 백엔드 서버부터 프론트엔드 UI까지 한 번에 뚝딱 만들어준다니... 저도 궁금해서 가만히 있을 수 없었죠.그래서 지난주에 터미널을 열고 **"냉장고 사진을 올리면 AI가 재료를 인식해서 레시피를 추천해주는 웹 서비스"**를 직접 만들어봤습니다! 결론부터 말씀드리면? 생각보다 너무 빠르고 똑똑합니다... 약간 무섭기도 ..