혼자 공부하는 바이브 코딩 with 클로드 코드』- 6주차 미션

 

https://www.inflearn.com/challenge/6-week-course-self-s/dashboard?cid=342648

[지금 무료][6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 챌린지 |

 

---

어느덧 마지막 미션!

필수 미션은 저번주 5주차 미션에 이미 올린 관계로 오늘은 추가미션만 진행해보도록 하겠다

 

 

MCP 서버의 종류

1. 로컬 MCP

2. 원격 MCP

설치 방법이 다름!

Terminal 상에서

로컬 MCP: claude mcp add[이름] -s local - [실행 명령]

원격 MCP: claude mcp add --transport http [이름] [서버 URL]

 

<원격 MCP를 사용해서 노션 연동>

 

프롬프트는 아래 깃허브 링크 참고~!

https://github.com/taehojo/vibecoding/blob/master/PROMPTS.md#04%EC%9E%A5-%ED%81%B4%EB%A1%9C%EB%93%9C-%EC%BD%94%EB%93%9C-%EC%8B%A4%EC%A0%84-%ED%99%9C%EC%9A%A9

vibecoding/PROMPTS.md at master · taehojo/vibecoding

 

클로드 코드의 업데이트, 변경 사항을 검색하고 요약해 줘. 그 결과를 노션 MCP를 이용해 노션에 저장해 줘.

개인 노션 페이지에 생성 완료

 

<Sequential Thinking MCP>

PowerShell과 Cmd에서 실행하는 경우의 명령어가 다름에 유의!

 

Windows PowerShell에서 실행하는 경우: claude mcp add sequential-thinking -s local -- npx @modelcontextprotocol/server-sequential-thinking@latest

 

Windows 명령 프롬프트(cmd)에서 실행하는 경우: claude mcp add sequential-thinking -s local -- cmd /c npx -y @modelcontextprotocol/server-sequential-thinking@latest

 

내 웹 포트폴리오 방문자의 체류 시간을 지금의 2배로 늘리고 싶어. 두 가지 문서를 작성해.
1. 이 목표를 달성할 방법을 구상해서 노션 MCP를 이용해 ‘체류 시간 늘리기’로 저장해 줘.
2. Sequential Thinking MCP를 이용해서 이 목표를 달성할 방법을 체계적으로 구상하고 노션 MCP를 이용해 ‘체류 시간 늘리기 – 체계적 구상’으로 저장해 줘

 

 

 

---

<자동화를 위한 MCP>

 

구글에서 Context7MCP 검색 후 깃허브 링크 들어가기

https://github.com/upstash/context7

GitHub - upstash/context7: Context7 Platform -- Up-to-date code documentation for LLMs and AI code editors

 

노란색으로 표시된 Manual Installation 클릭

Claude Code 클릭

API 키가 필요하기 때문에 

https://context7.com/ 회원가입 후 API 키 생성

 

Remote Server Connection을 사용할 것이기 때문에

claude mcp add --scope user --header "Authorization: Bearer YOUR_API_KEY" --transport http context7 https://mcp.context7.com/mcp

저 주황색 하이라이트 부분에 복사한 API key 붙여넣기

 

 

이제 playwright mcp 깃허브 주소에 들어가서

https://github.com/microsoft/playwright-mcp

GitHub - microsoft/playwright-mcp: Playwright MCP server

로컬 MCP 주소 복사

---

추가 미션

<쇼핑리스트 앱 만들기>

 

쇼핑 리스트 앱을 만들어 줘. 아이템 추가, 삭제, 체크 기능이 있는 간단한 웹 UI로 로컬 브라우저에서 실행되게 해 줘

Context7 MCP를 이용해서 쇼핑 리스트앱이 최신 버전의 코드를 사용했는지 점검해줘.

 

 

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

내가 직접 입력하지 않아도 자동으로 체크리스트에서 삭제한 것을 확인할 수 있다

---

 

이제 깃허브 MCP

https://github.com/github/github-mcp-server

GitHub - github/github-mcp-server: GitHub's official MCP Server

 

Claude Applications 클

 

깃허브에서 API키 먼저 생성하기

Settings- Developer Settings- Personal access tokens - Tokens(classic)

 

 

현재 폴더에 만들어진 쇼핑 리스트 앱을 깃허브에 저장하고 싶어. github mcp를 사용해서 shopping-listapp이라는 저장소를 만들고 업로드해 줘.

 

깃허브와도 연동 완료!

---

<배포와 데이터베이스 연동>

https://vercel.com/

Agentic Infrastructure - Vercel

Personal로 가입하기

 

바로 Deploy하니까 나는 에러가 뜨는데 그 원인을 추적하니 아래와 같음

리포 메인 페이지에 파일 목록이 쭉 뜨는데, 거기서 index.html이 바로 보이는지 확인

• 루트에 바로 index.html이 보이면 → 폴더 없이 최상위에 있는 것
• index.html은 안 보이고 public, src, dist 같은 폴더만 보이면 → 그 폴더를 클릭해서 안에 index.html이 있는지 확인

 

 

https://shopping-list-peach-eta.vercel.app/

 

로컬 스토리지를 이용하지 않는 경우 로컬에서의 내용을 확인할 수 없으므로, 클라우드 데이터베이스와 연동하는 과정이 필요

https://supabase.com/

Supabase | The Postgres Development Platform

Supabase는 무료 플랜을 사용하고 있기에, 2가지 제약이 존재

1> 프로젝트 최대 2개까지

2> 데이터 변경 없이 7일 간 유지 시,"Resume"을 이후에 누르지 않으면 데이터 접근 x

 

 

 

Supabase mcp를 이용해서 우리의 쇼핑 리스트 앱을 데이터베이스와 연동해 줘. shopping_items라는 테이블을 만들고, 현재 로컬 스토리지에 저장되던 데이터를 Supabase 데이터베이스에 저장하도록 코드를 수정해 줘. 수정이 완료되면 깃허브에 commit하고 push해 줘.