『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 학습 기록 (7)

  

혼자 공부하는 바이브 코딩 with 클로드 코드 (7)


인프런 완독 챌린지 책 읽고 강좌 보고, 요약정리 + 실습 기록

Chapter 08 MCP로 클로드 코드의 한계 넘어서기

AI + MCP 연동을 통해서 다양한 개발 툴과 서비스에 연동할 수 있다는 걸 배움
그리고 MCP를 통해 자동화가 되는 부분이 상당하다는 걸 느낌
계정 연동이 필요한 MCP 서버들은 인증 절차가 한 번씩 있었다
API Key나 연결하기 위한 토큰 같은 걸 생성하고 설치할 때 요구하는 방식도 있었음
GitHub ID 또는 Google ID로 로그인 연동해 놓은 서비스가 대부분이라 쉽게 가입했음
(저 아이디들과 관련 Key들은 잘 관리해야겠다는 생각이 들었음)
제대로 활용하려면 MCP를 제공하는 서비스들에 대한 어느정도의 학습도 필요할 것으로 보임



Chapter 08 실습 (MCP 연동, 쇼핑 리스트 앱 만들기)

  • Notion 가입 + MCP 서버 설치
    • 메모, 문서 작성, 일정 관리, 프로젝트 협업, DB, 공개 웹사이트 등 다양한 기능을 하나로 통합한 서비스
Notion MCP 연동해서 글 작성하기

  • Sequential Thinking MCP 서버 설치 후 테스트
    • AI가 복잡한 문제를 단계별로 추론하도록 돕는 구조화된 사고 프레임워크 (앤트로픽 제공)
Notion MCP + Sequential Thinking MCP 이용해서 추론해서 글 작성하기

  • 쇼핑 리스트 앱을 만들고 MCP 서버를 통해 테스트, 버전 관리, 배포, 데이터베이스 연동까지 실습
    • Context7, Playwright, GitHub, Vercel, Supabase
    • 책에서 소개된 7가지 MCP 이외에도 유용한 MCP가 있을 것이기 때문에 진행하는 프로젝트에 맞는 MCP 서버 세팅을 잘할 필요가 있을 듯
MCP 연동을 통해 구현한 쇼핑 리스트 앱

Supabase DB 테이블

설치된 MCP 목록 조회 결과 (기존 사용중이던 MCP + 실습하면서 설치한 MCP)



Chapter 08 MCP로 클로드 코드의 한계 넘어서기

08-1 MCP 이해하고 클로드 코드와 연결하기

  • MCP(Model Context Protocol): AI 모델이 외부 데이터, 도구, 서비스와 연결될 때 사용하는 표준화된 통신 규약(앤트로픽에서 2024년 말에 제안하고 업계 표준이 됨)
  • 로컬 MCP, 원격 MCP가 있다
  • MCP 관련 콘솔 명령어
    • claude mcp list
      • 현재 연결된 MCP 목록과 연결 상태 확인
    • claude mcp remove [지울 MCP명]
      • MCP명에 해당하는 MCP를 제거
    • claude mcp add [명령어]
      • 새 MCP 서버를 등록
    • claude mcp get [MCP명]
      • 해당 MCP 상세 설정 조회
  • Notion: 메모, 문서 작성, 일정 관리, 프로젝트 협업, DB, 공개 웹사이트 등 다양한 기능을 하나로 통합한 서비스
  • Sequential Thinking MCP: AI가 복잡한 문제를 단계별로 추론하도록 돕는 구조화된 사고 프레임워크 (앤트로픽 제공)

08-2 MCP로 구현하는 완전 자동화 개발 환경

  • 자동화를 위한 MCP 예제
    • Context7: 항상 최신 문서를 참고하도록 돕는 지식 연결 도구
    • Playwright: 웹사이트를 자동 테스트하고 UI를 검증하는 브라우저 제어 도구
    • GitHub: 프로젝트 버전 관리와 자동 업로드를 위한 협업 도구

08-3 데이터베이스 연결해 진짜 서비스 만들기

  • Vercel: Git 저장소와 연동해서 자동 빌드/배포를 해주는 클라우드 플랫폼
  • Supabase: 클라우드 데이터베이스 플랫폼

댓글

댓글 쓰기

이 블로그의 인기 게시물

Unity3D 에서 당신의 Pixel Art 게임을 Pixel Perfect 하게 만들기

이미지
2D 게임 개발을 하던 중 도트 그래픽을 사용할 경우 Pixel Perfect 하게 하기 위한 작업이 필요하다는 것을 파악하고 잘 정리된 글을 찾아 번역기의 힘을 빌려 번역해봄…ㅎㅎ;; Making your Pixel Art Game look Pixel Perfect in Unity3D 원글 작성자 : ResistanceStdio 원글 작성일자 :  2018-03-26 Unity3D 에서 당신의 Pixel Art 게임을 Pixel Perfect 하게 만들기 얼마 전 게임을 Pixel Perfect 하게 만들기 위해 시간을 어느 정도 써야 한다고 언급했었죠. 아름다운 2D Pixel Art 게임을 어떤 해상도에서도 보기 좋게 하기 위해 이 작업을 해야만 합니다. 또한 우리는 오브젝트를 움직이거나 픽셀이 절반으로 내려앉는 것을 원치 않습니다. Unity는 기본적으로 Pixel Art를 완전하게 보여주지 않기 때문에 이곳 저곳을 바꾸거나 작은 수정사항을 구현하여 바꿀 필요가 있습니다. 하지만 걱정 마세요, 별로 어렵지 않습니다. Disclaimer (알려둘 사항) 모든 튜토리얼은 몇몇 소스를 기반으로 했지만 메인은 이 유용한 트위터 스레드 에 기반했습니다. 더 좋거나 최적화된 다른 방법이 있다는 것을 알고 있지만 이것이 내가 많은 연구 끝에 사용하는 방법입니다. 자 그럼 Pixel Perfect한 모습을 달성하기 위한 단계를 살펴 봅시다. 흐릿한(기본) 이미지에서 Pixel Perfect 로 Turn off Anti Aliasing (안티앨리어싱 끄기) 안티앨리어싱은 비디오게임들의 텍스처 테두리를 부드럽게 하기 위해 사용됩니다. 보통은 이것은 텍스처가 “너무 픽셀스럽게” 표시되지 않도록 하고 화면이 부드럽게 보이게 합니다. 여기 안티앨리어싱이 어떤 일을 하는지에 대한 예시가 하나 있습니다. 안티앨리어싱 예시 아래쪽 선이 부드럽고 흐릿합니다. 이것은 우리가 더 작은 해상도로 보게 되면 좀...
자세한 내용 보기

Unity Google Play Games Services 연동 오류로 인한 삽질 기록

이미지
3줄 요약 1. Unity - Google Play Games Services 연동 오류 발생(Unity 2018.2.1f1, GPGS Plugin for Unity 0.9.50) 2. 구글링해보니 AndroidManifest.xml 파일 자동 생성시 공백이 잘못들어감 3. 생성할때 사용하는 템플릿 파일(template-AndroidManifest.txt)을 수정하고 다시 해보니 정상 동작! 삽질 & 구글링 나름 튜토리얼을 보면서 잘 따라 했것만... Google Play Console 의 출시관리>사전 출시 보고서에 비정상 종료 로그가 뜨고, APK 파일을 받아서 깔아보아도 제대로 실행이 안되었다. 오류 로그는 아래와 같음 사전출시 보고서 오류 리포트 문제: at com.google.android.gms.common.internal.zzh.handleMessage(Unknown Source:275) FATAL EXCEPTION: main Process: com.m2kestudio.unity.clicker, PID: 12207 java.lang.IllegalStateException: A fatal developer error has occurred. Check the logs for further information. at com.google.android.gms.common.internal.zze.zzv(Unknown Source:78) at com.google.android.gms.common.internal.zzi.zzakg(Unknown Source:54) at com.google.android.gms.common.internal.zzh.handleMessage(Unknown Source:275) at android.os.Handler.dispatchMessage(Handler.java:106) at android.os.Looper.loop(Looper.java:19...
자세한 내용 보기

Aseprite 스프라이트 슬라이스해서 개별로 저장 하는방법 ( How to save sprite split in Aseprite )

이미지
Aseprite 스프라이트 슬라이스해서 개별로 저장  하는방법 ( How to save sprite split in Aseprite ) 0. 윈도우 환경예시 입니다. (Windows 10 64bit, Aseprite v1.2.25-x65) Slice Tool 1. 슬라이스 툴로 원하는 대로 슬라이스를 해놓고 저장 Bow_32x32.aseprite file (before) Bow_32x32.aseprite (after slice) 2. cmd 열고 파일이 저장된 폴더로 이동 3. 아래 명령어 실행 Aseprite Install  Path Example "C:\Program Files\Aseprite\Aseprite.exe" or "A:\Steam\steamapps\common\Aseprite\Aseprite.exe" (steam) 파일명이 Bow_32x32.aseprite 라고 가정함 (Assume the file name is Bow_32x32.aseprite) Command "A:\Program Files\Aseprite\Aseprite.exe" -b Bow_32x32.aseprite --save-as Bow_32x32_{slice}.png 0. This is a Windows environment example. 1. Use the Slice Tool and cut sprite. 2. Run cmd and move to the folder with the file you saved. 3. Run the Aseprite command below.
자세한 내용 보기