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

1. todo list 소스코드 다운받기

[https://github.com/jkf87kc/simple-list-fun-backup](https://github.com/jkf87kc/simple-list-fun-backup) 

[GitHub - jkf87kc/simple-list-fun-backup: backup](https://github.com/jkf87kc/simple-list-fun-backup)

1. claudecode 설치

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

- [node.js](https://nodejs.org/ko/download)가 필요합니다

- [cursor](http://cursor.com/), [git](https://git-scm.com/install/) 미리 설치

1. 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"]
    }
  }
}
```

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

1. github에 올리기

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

1. netlify에서 배포하기

- github에 올려놓은 코드를 [netlify](https://app.netlify.com/)에서 불러와서 배포합니다

- 환경변수를 설정합니다

    - serverless function으로 하는 방법 (llm api키가 있는 경우)

`인증을 서버리스 펑션에서 해야할것 같아. 기능 만들어줘` 

    - 스캔을 끄는 방법(netlify.toml) - firebase 키만 있는 경우 

`netlify에 올릴거야. .env파일 키 감지 제외하도록 netlify.toml 파일 만들어줘` 

Tip. github-netlify 배포가 너무 어려워요. 더 쉬운 방법이 있나요?

- firebase mcp를 쓰면 hosting이 가능합니다(단 코드를 수정하기가.. 조금 불편해요)

`firebase cli로 tools deploy를 이용해서 firebase에 배포해줘``  ` 

![Image](https://upload.cafenono.com/image/slashpageHome/20251025/072848_Ih28AUxbNx1gCpfVTp?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20251025/072832_BRpmjUAj2EnLwrBksw?q=80&s=1280x180&t=outside&f=webp)

# 배포 성공하신분들 여기에 링크 올려주세요

[https://slashpage.com/conanssam/943zqpmqrdngg2wnvy87](https://slashpage.com/conanssam/943zqpmqrdngg2wnvy87)

For the site tree, see the [root Markdown](https://slashpage.com/conanssam.md).