251025 바이브코딩캠프- 오프라인
1.
todo list 소스코드 다운받기
2.
claudecode 설치
npm install -g @anthropic-ai/claude-code
•
node.js가 필요합니다
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"]
}
}
}4.
claudecode에게 다음과 같이 요청하기
//프롬프트
firebase mcp를 사용해서 todolist 앱을 만들어주세요 [소스코드]
부록. allow-list
//setting.local.json
//yes 누르기 귀찮으신분들을 위한 allow 리스트입니다
{
"permissions": {
"allow": [
"*",
"mcp__firebase__firebase_create_app",
"mcp__firebase__firebase_get_sdk_config",
"Bash(npm install:*)",
"Bash(sudo chown:*)",
"Bash(npm run dev:*)",
"mcp__firebase__firebase_get_security_rules",
"Bash(npx firebase deploy:*)",
"Bash(npx:*)"
]
},
"enableAllProjectMcpServers": true,
"enabledMcpjsonServers": [
"chrome-devtools"
]
}
•
firebase mcp로 작업이후 부족한 부분을 보충하세요(auth, db rules, index 등등)
•
chrome mcp를 이용해서 테스트- 오류 수정 (디버깅)을 요청하세요
chrome mcp를 사용해서 테스트하고 오류가 나면 콘솔 메세지를 보고 수정 반복해줘5.
github에 올리기
•
cursor의 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에 배포해줘
배포 성공하신분들 여기에 링크 올려주세요
배포 성공
