251025 바이브코딩캠프- 오프라인

todo list 소스코드 다운받기

https://github.com/jkf87kc/simple-list-fun-backup

GitHub - jkf87kc/simple-list-fun-backup: backup

backup. Contribute to jkf87kc/simple-list-fun-backup development by creating an account on GitHub.

github.com

claudecode 설치

npm install -g @anthropic-ai/claude-code

•

node.js가 필요합니다

•

cursor, git 미리 설치

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"]
    }
  }
}

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를 사용해서 테스트하고 오류가 나면 콘솔 메세지를 보고 수정 반복해줘

github에 올리기

•

cursor의 git 기능을 이용해 github에 repository(저장소) 를 만들고 코드를 올려주세요

netlify에서 배포하기

•

github에 올려놓은 코드를 netlify에서 불러와서 배포합니다

•