[6주 차] MCP 연동 『혼자 공부하는 바이브 코딩 with 클로드 코드』

개요

• 벌써 이번 챌린지의 마지막이 다가왔습니다.
• 회고 글을 별도로 작성할 예정이니 이번 글에선 과제에만 집중하겠습니다.
• 이번 글에선 5주 차처럼 API를 연동해 감정 분석 다이어리를 만들고,
• 나아가 MCP와 데이터 베이스를 연동해 쇼핑 리스트앱을 만들어 보았습니다.

감정 분석 다이어리

• 감정 분석 다이어리란? 
• 간단하게 일기를 작성하면 AI가 나의 감정을 분석하여 결과로 보여줍니다.

• 이번 프로젝트에서 사용할 AI 모델입니다. 업스테이지의 솔라 프로 3
• 강의에선 딥시크 3.1로 진행했는데 현재는 3.2만 공개되어 있으며, 미세하게 요금을 청구하더라고요!
• 항상 API를 똑같이 제공하는 건 아니니 공개된 AI들 중에서 새로 교체해 보았습니다.

• UI는 이런 식으로 만들어졌고, 이 상태로 마음 나누기 버튼을 눌러보았는데.
• 404 HTTP 에러가 등장했습니다. (사실 여기서 모델을 교체했어요.)
• 퇴사한 직원한테 일을 시키면 문제가 생기는 게 당연하겠죠 😅

• 모델을 바꿔서 재시도.

• 와우 제대로 작동합니다!

• 이런 식으로 일기 기록도 남겨지네요.
• 생각보다 너무 예쁘게 만들어진 것 같아요!

쇼핑 리스트 앱 만들기

• 이제 쇼핑 리스트 앱을 만들 건데, 정확히 어떤 애플리케이션일까요?
• 말 그대로 쇼핑할 때 어떤 물건을 살지 간단히 적어두는 리스트 앱입니다.

• 정말 간단하게 단일 html 파일로 아이템을 입력하면 리스트에 추가되고,
• 체크와 삭제할 수 있는 기능이 담겨있습니다.

• 이번 시간엔 여러 가지 MCP를 연동해 보았는데, 그중 웹 자동 테스트 도구인 playwright를 사용하는 모습입니다.
• 자동으로 창을 띄우고 하나씩 해보는 게 진짜 신기했어요 👽 
• 이제 이걸 github, vercel에 deploy 하여 외부에서도 사용할 수 있게 만들었습니다.
  • github는 git 저장소 공유 플랫폼, vercel은 deploy용 클라우드 플랫폼이에요.
  • github에 내 프로그램을 올리면 vercel이 해당 프로그램을 다른 사람도 이용할 수 있게 배포해 주는 역할이에요.
• 그런데 이런 식으로 사용하면 로컬 데이터만. 즉, 나의 데이터만 볼 수 있습니다.
• 남들과 목록을 공유하고 싶은데.. 어떻게 해야 할까요?

DB 연동하기

목록 데이터가 로컬에만 남기 때문에 타인과 공유 불가 → 데이터를 공유하면 해결.

• 이런 생각으로 데이터베이스를 사용합니다.
• 데이터베이스는 말 그대로 데이터를 모아두는 공간인데요.
• 강의에선 Supabase라는 데이터 베이스 플랫폼을 이용해 DB를 구성합니다.

• 이번 앱은 shopping_items라는 테이블에 id, name, checked, created_at 4가지 컬럼 정보를 저장합니다.
• 테이블..? 컬럼..? 이게 무슨 말일까요???

초 간단 데이터베이스 개념

• 데이터베이스에선 보통 이 데이터가 테이블이라는 형태로 표현되는데요.
• 여러 가지 속성 값을 모아둔 데이터가 하나의 테이블, 이런 테이블이 여러 개 모인 게 바로 데이터 베이스입니다.
• 이해를 위해 테이블을 시각화해 보자면.

id	name	checked	created_at
1	사과	false	2026.02.10
2	우유	false	2026.02.10

• 이런 식으로 구성되며 이 표가 shopping_items인 거예요.
• 만약에 구매 리스트에 로그인 기능을 추가한다고 하면 user라는 테이블을 생성해 쇼핑 앱이라는 DB에 user와 shopping_items가 공존하게 됩니다.

• DB를 연동했는데 뭐가 달라진 거지? 싶은데..

• 이렇게 다른 서버에 입력한 데이터가 모여 이제 여러 사람과 원격으로 리스트를 공유할 수 있게 되었습니다.

🎉마무리

• 드디어 6주 간의 챌린지를 마무리했습니다!!
• 자주 사용하는 LLM을 시작으로 API, MCP, DB까지 아주 알차게 사용해 본 것 같아요.
• 이번 글의 마무리는 여기까지 하고, 회고 글로 이어집니다!