[혼공바] 6주차 _ 혼자 공부하는 바이브 코딩 with 클로드 코드

---

■ 6주 차 미션

주차별 진도에 따라 주어진 숙제와 한 주간 공부한 내용을 정리하여 블로그에 기록 (전체 공개)

---

✅ 6주 차 : Ch 08. MCP로 클로드 코드의 한계 넘어서기

 

• 📘공부한 내용
  • MCP: AI 모델이 외부 데이터, 도구, 서비스와 연결될 때 사용하는 표준화된 통신 규약
  • 클라이언트 서버 모델: 네트워크에서 정보를 요청하고 응답하는 구조 (클라이언트는 서버를 요청, 서버는 서비스를 제공)
  • 로컬 MCP: MCP 중개 프로그램을 내 컴퓨터 안에서 직접 실행하는 방식
  • 원격 MCP: MCP 중개 프로그램을 인터넷상 외부 서버에서 실행하는 방식
  • 인증: 접속하려는 사람이 정말 허가된 사용자인지 확인하는 절차
  • --(이중 하이픈): 클로드 코드의 옵션과 인자를 나누는 기준 (이 기호를 기준으로 앞에는 클로드 코드 옵션이, 뒤에는 MCP 서버 실행 명령이 위치)

---

• • 테스트: 코드가 의도한 대로 실행되는지, 오류가 없는지를 확인하는 과정
  • 버전 관리: 코드의 변경 이력을 기록하고, 필요할 때 이전 상태로 되돌리기가 가능
  • Context7: 클로드 코드가 항상 최신 문서를 참고하도록 돕는 지식 연결 도구
  • Playwright: 웹 사이트를 자동으로 테스트하고 UI를 검증하는 브라우저 제어 도구
  • Github: 코드 버전 관리 플랫폼
      . add(추가): 깃허브에 업로드할 파일들을 선택해서 준비 공간에 추가하는 과정
      . commit(커밋): 원격 저장소에 추가된 파일이 확정되면 이를 전송 바로 전 단계인 로컬 저장소에 저장하는 과정
      . push(푸시): 로컬 저장소에 커밋된 파일을 원격 저장소로 업로드하는 과정소프트웨어 개발팀의 구성과 역할 

---

• • Vercel: 작성한 코드를 깃허브에 올리면 자동으로 빌드, 배포해주는 클라우드 플랫폼
      . 배포: 내 애플리케이션을 외부의 인터넷에 연결된 제3의 서버에 올리는 과정
  • 로컬 스토리지: 저장된 데이터가 다른 컴퓨터나 브라우저에는 공유되지 않고 브라우저 캐시를 지우거나 기기를 바꾸면 사라짐
  • 클라우드 스토리지: 어디서나 동일한 데이터를 불러올 수 있는 중앙 서버 역할을 수행
  • Supabase: 데이터베이스 구축을 자동화해 주는 클라우드 데이터베이스 플랫폼
      . 테이블: 데이터를 표 형태로 저장한 구조 ( 데이터베이스 ≒ 엑셀 | 테이블 ≒ 엑셀 시트 )버전 관리: 코드의 변경 이력을 기록하고, 필요할 때 이전 상태로 되돌리기가 가능

 

 

• 🚶기본 미션(필수)
  • PROJECT 10. AI 공감 다이어리 앱 만들고 캡처하기  

좌. 초기버전 ❘ 우. 수정버전

 

 

□ 이번 미션도 Gemini CLI를 활용

  - 클로드와 친해지기 위해 시작했는데, 제미나이와 절친이 됐어요. >_<

    . 초기 버전을 책의 디자인처럼 바꾸고 동일하게 동작시키기 위해 정말 많은 대화를 나눴습니다.

 

 

• 🏃추가 미션(선택)
  • PROJECT 15. 쇼핑 리스트 앱 만들고 캡처하기
  • Supabase에 앱 연동하고 데이터베이스 테이블 캡처하기

 

□ 쇼핑 리스트 앱 주소

https://vibe-kappa-seven.vercel.app/

 

 

□ Supabase 데이터베이스 테이블

 

 

□ 쇼핑 리스트 앱 만들기

  - 시스템 구조

    . 프론트엔드 (HTML/JS): API Key를 숨기기 위해 직접 Supabase와 통신하지 않고, 내부 서버(api/items.js)와 통신

    . 백엔드 (Vercel Serverless Function): api/items.js 파일로, Supabase와 통신하며 삭제/수정 시 비밀번호를 검사하는 역할
    . 데이터베이스 (Supabase): 실제 데이터가 저장되는 공간

  - 보안 설정 내용

    . API Key 은닉: SUPABASE_URL과 SUPABASE_KEY를 Vercel 환경 변수에 저장하여 외부 노출을 차단
    . 관리자 암호 보호: ADMIN_PASSWORD 환경 변수를 설정하여, 삭제나 상태 변경 시 팝업창에 암호를 입력해야만 작동
    . RLS(Row Level Security) 정책: Supabase DB에서 ALL 권한을 허용하여 서버(api/items.js)에서 데이터에 접근하도록 수정

  - 주요 기능

    . GET: 목록 불러오기 (누구나 가능)

    . POST: 새 항목 추가 (누구나 가능)
    . PATCH / DELETE: 항목 수정 및 삭제 (비밀번호 입력 필수)

 

 

□ Gemini CLI에서 MCP 설정

  - 환경 설정 파일에 아래 내용 추가

    . 보통 다음 경로에 존재 ( ~/.gemini/settings.json 또는 윈도우의 경우 C:\Users\계정명\.gemini\settings.json )

    . 자신의 API_KEY를 입력

  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "$YOUR_Context7_API_KEY"
      }
    },
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    },
    "github": {
      "httpUrl": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer $YOUR_GITHUB_MCP_PAT"
      }
    }
  }

 

  - CLI 실행 후, mcp 사용여부 확인

    . 프롬프트 창 위에 사용 가능한 갯수가 표시(3 MCP servers)되고,  /mcp 명령을 통해서 세부 내용 확인이 가능

      → 프롬프트에 사용할 MCP 이름을 명시: context7 ... , playwright ...

        예) Playwright MCP를 사용해서 이 쇼핑 리스트 앱의 모든 기능을 자동으로 테스트해 줘. 아이템 추가, 삭제, 체크 기능이 제대로 작동하는지 확인해 줘.

 

 

 

---