251129 제2회 바이브코딩캠프- 오프라인
1.
aistudio에서 vibe code genAI 사용해서 프로토 만들기
•
무조건 ai를 사용하는 앱이 나옴
•
파일로 다운로드 받기 또는 github연결
cursor 대체제로 antigravity 추천
•
완전무료(아직까지는)
•
walkthrough를 이용해서 작업 내용을 따라갈수 있음
•
workflow를 이용해서 반복작업을 자동화/ 재현률 올릴수 있음
•
chrome을 자동화해서 제어할수 있음
•
나노바나나를 불러와서 이미지 생성이 가능함
•
단점
•
extension이 빈약함
•
가끔 에러 발생
•
적은 사용량(자주 리밋에 걸림)
•
램을 많이 먹음 agent manager, code editor 두개를 띄우다 보니
2.
claudecode 설치
npm install -g @anthropic-ai/claude-code
•
node.js가 필요합니다
•
•
claudecode allow 자동으로 시키는 방법(bypass모드)
claude —dangerously-skip-permissons
3.
git clone, claudecode 설치, mcp 설치
chrome mcp:
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
firebase mcp:
claude mcp add firebase npx -- -y firebase-tools@latest mcp
또는
MCP 설치해줘 [주소]또는
//.mcp.json
//chrome-mcp, firebase-mcp를 사용합니다
//미리 firebase 계정 생성이 필요합니다(기능에 따라 결제수단 등록도 필요)
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
},
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}mcp를 전역(어떤 프로젝트에서나 사용하도록)으로 설치하는 방법
•
claude mcp add —scope user 해당 mcp
•
chrome mcp:
◦
claude mcp add -scope user chrome-devtools npx chrome-devtools-mcp@latest
•
firebase mcp:
◦
claude mcp add —scope user firebase npx -- -y firebase-tools@latest mcp
4.
claudecode에게 다음과 같이 요청하기
//프롬프트
firebase mcp를 사용해서 todolist 앱을 만들어주세요 [소스코드]
•
firebase mcp로 작업이후 부족한 부분을 보충하세요(auth, db rules, index 등등)
•
chrome mcp를 이용해서 테스트- 오류 수정 (디버깅)을 요청하세요
chrome mcp를 사용해서 테스트하고 오류가 나면 콘솔 메세지를 보고 수정 반복해줘5.
github에 올리기
•
cursor/antigravity의 git 기능을 이용해 github에 repository(저장소) 를 만들고 코드를 올려주세요
6.
netlify에서 배포하기
•
•
환경변수를 설정합니다
◦
serverless function으로 하는 방법 (llm api키가 있는 경우)
인증을 서버리스 펑션에서 해야할것 같아. 기능 만들어줘
◦
스캔을 끄는 방법(netlify.toml) - firebase 키만 있는 경우
netlify에 올릴거야. .env파일 키 감지 제외하도록 netlify.toml 파일 만들어줘
Tip. github-netlify 배포가 너무 어려워요. 더 쉬운 방법이 있나요?
•
firebase mcp를 쓰면 hosting이 가능합니다(단 코드를 수정하기가.. 조금 불편해요)
firebase cli로 tools deploy를 이용해서 firebase에 배포해줘
배포 성공하신분들 여기에 링크 올려주세요
배포 성공
skill 편
•
https://github.com/anthropics/skills
◦
/plugin marketplace add anthropics/skills
◦
pip install skill-seekers
◦
기존 mcp, docs 등을 skill로 변환해주는 도구
skill 여러개를 조합할수 있음
•
https://github.com/jkf87/doc-research-generator
◦
조사→ 보고서 → 도표 생성 → ms docs 문서로 생성
◦
workflow(antigravity): https://github.com/jkf87/antigravity-workflow-ppt
▪
PPT 생성