ZERO100 참가팀 중 하나가 시설관리 앱을 만들고 있었다.
우리 프로젝트 PO가 Claude Code 사용법 강의할 때 기획서 기반으로 웹 프론트엔드 목업을 만들어둔 상태였다.
글로 다 설명하기 어려운 부분이 있어서 영상으로 남겨봤다. (클릭 하시오~~)
목업에서 실제 앱까지 전체 과정을 볼 수 있음.
아무튼 UI는 다 만들어져 있는데, 데이터는 전부 하드코딩. 버튼 눌러도 아무 일도 안 일어나는 그런 상태.
이걸 진짜 데이터가 저장되는 앱으로 만들어주기로 했다.
bkend는 MCP 서버를 제공해서 Claude Code랑 바로 연동된다. 문서대로 따라해봤다.
공식 문서(https://slashpage.com/bkend/36nj8v2wq4zyz25ykq9z) 보고 따라했다.
프로젝트 루트에 .mcp.json 파일 만들고:
json{ "mcpServers": { "mcp-bkend": { "type": "http", "url": "https://api-xxxxx.bkend.ai/mcp", "headers": { "X-Organization-Id": "여기에_Organization_ID_붙여넣기", "X-Api-Key": "여기에_API_키_붙여넣기" } } } }
여기서 첫 번째 삽질. 파일 추가하고 바로 되는 줄 알았는데 안 됨. Claude Code를 재시작해야 MCP가 연결된다. 문서에 있긴 한데 놓치기 쉬운 부분.
Claude한테 그냥 말했다.
"bkend-mcp를 활용하고 싶어."
그랬더니 목업 프로젝트 코드를 분석해서 필요한 기능들을 정리해줌. 그 다음에 bkend 컨텍스트 확인하고, 기존 프로젝트 없으니까 새로 만들겠다고 함.
분석 결과로 이런 엔티티가 필요하다고 정리해줌:
| 엔티티 | 설명 |
|---|---|
| Contract | 계약 관리 |
| Staff | 직원 (청소원/경비원) |
| Attendance | 근태 기록 |
| Site | 현장 (아파트) |
| Settlement | 정산/청구 |
| Alert | 알림 |
프로젝트 생성 → dev 환경 생성 → 6개 테이블 생성까지 쭉 진행함. 스키마도 알아서 설계해줌.
뚝딱거리더니 다 해버림. 샘플 데이터까지 등록해줌.
테이블 만들면 CRUD API가 자동 생성된다. 바로 호출해봤는데... 안 됨.
로컬에서 bkend API 직접 호출하면 CORS 에러. Vite 프록시 설정으로 해결:
javascript// vite.config.ts server: { proxy: { '/api': { target: 'https://api-enduser-dev.bkend.ai', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }
API 호출할 때 헤더 3개가 필수다:
javascriptconst headers = { 'Content-Type': 'application/json', 'X-Project-Id': 'your-project-id', 'X-Environment': 'dev', 'Authorization': 'Bearer {token}' };
하나라도 빠지면 에러남. 문서에 있는데 처음엔 놓침.
403 Forbidden 에러. 확인해보니 테이블 생성할 때 user 롤에 create 권한이 false로 되어 있었음.
Claude한테 말하니까 모든 테이블 권한 한번에 수정해줌:
user 롤에 create: false로 되어 있어서 그래요. 권한을 확인하고 수정할게요.
로그인이 안 됐다. 원인은 기존 목업 코드가 token 필드를 쓰고 있었는데, bkend API는 access_token을 반환함.
이것도 Claude가 찾아서 수정해줌.
데이터 목록 조회할 때 response.data.data.items로 접근했는데 안 됨. 실제로는 response.data.items임.
API 동작 확인하고, 페이지별로 연동 시작.
Claude가 물어봄:
"나머지 페이지들도 API 연동할까요? (계약, 직원, 근태 등)"
"다 해."
그랬더니 모든 페이지 순회하면서 mockData를 실제 API 호출로 교체함. 에러 처리, 로딩 상태까지 추가.
목업이 진짜 앱이 됐다. 하루도 안 걸림. 2~3시간 정도?
솔직히 백엔드 직접 만들었으면:
이거 다 하려면 며칠은 걸렸을 듯.
MCP 연동하니까 대화로 다 됨. "테이블 만들어줘" 하면 만들어주고, "권한 수정해줘" 하면 수정해주고.
다음에 또 쓸 때 참고하려고 정리:
.mcp.json 추가 후 Claude Code 재시작access_token, refresh_token 사용response.data.items (목록), response.data (단건)삽질 포인트 미리 알고 가면 훨씬 빠르게 끝낼 수 있을 듯.
댓글을 작성하려면 로그인이 필요합니다.
ZERO100 참가팀 중 하나가 시설관리 앱을 만들고 있었다.
우리 프로젝트 PO가 Claude Code 사용법 강의할 때 기획서 기반으로 웹 프론트엔드 목업을 만들어둔 상태였다.
글로 다 설명하기 어려운 부분이 있어서 영상으로 남겨봤다. (클릭 하시오~~)
목업에서 실제 앱까지 전체 과정을 볼 수 있음.
아무튼 UI는 다 만들어져 있는데, 데이터는 전부 하드코딩. 버튼 눌러도 아무 일도 안 일어나는 그런 상태.
이걸 진짜 데이터가 저장되는 앱으로 만들어주기로 했다.
bkend는 MCP 서버를 제공해서 Claude Code랑 바로 연동된다. 문서대로 따라해봤다.
공식 문서(https://slashpage.com/bkend/36nj8v2wq4zyz25ykq9z) 보고 따라했다.
프로젝트 루트에 .mcp.json 파일 만들고:
json{ "mcpServers": { "mcp-bkend": { "type": "http", "url": "https://api-xxxxx.bkend.ai/mcp", "headers": { "X-Organization-Id": "여기에_Organization_ID_붙여넣기", "X-Api-Key": "여기에_API_키_붙여넣기" } } } }
여기서 첫 번째 삽질. 파일 추가하고 바로 되는 줄 알았는데 안 됨. Claude Code를 재시작해야 MCP가 연결된다. 문서에 있긴 한데 놓치기 쉬운 부분.
Claude한테 그냥 말했다.
"bkend-mcp를 활용하고 싶어."
그랬더니 목업 프로젝트 코드를 분석해서 필요한 기능들을 정리해줌. 그 다음에 bkend 컨텍스트 확인하고, 기존 프로젝트 없으니까 새로 만들겠다고 함.
분석 결과로 이런 엔티티가 필요하다고 정리해줌:
| 엔티티 | 설명 |
|---|---|
| Contract | 계약 관리 |
| Staff | 직원 (청소원/경비원) |
| Attendance | 근태 기록 |
| Site | 현장 (아파트) |
| Settlement | 정산/청구 |
| Alert | 알림 |
프로젝트 생성 → dev 환경 생성 → 6개 테이블 생성까지 쭉 진행함. 스키마도 알아서 설계해줌.
뚝딱거리더니 다 해버림. 샘플 데이터까지 등록해줌.
테이블 만들면 CRUD API가 자동 생성된다. 바로 호출해봤는데... 안 됨.
로컬에서 bkend API 직접 호출하면 CORS 에러. Vite 프록시 설정으로 해결:
javascript// vite.config.ts server: { proxy: { '/api': { target: 'https://api-enduser-dev.bkend.ai', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }
API 호출할 때 헤더 3개가 필수다:
javascriptconst headers = { 'Content-Type': 'application/json', 'X-Project-Id': 'your-project-id', 'X-Environment': 'dev', 'Authorization': 'Bearer {token}' };
하나라도 빠지면 에러남. 문서에 있는데 처음엔 놓침.
403 Forbidden 에러. 확인해보니 테이블 생성할 때 user 롤에 create 권한이 false로 되어 있었음.
Claude한테 말하니까 모든 테이블 권한 한번에 수정해줌:
user 롤에 create: false로 되어 있어서 그래요. 권한을 확인하고 수정할게요.
로그인이 안 됐다. 원인은 기존 목업 코드가 token 필드를 쓰고 있었는데, bkend API는 access_token을 반환함.
이것도 Claude가 찾아서 수정해줌.
데이터 목록 조회할 때 response.data.data.items로 접근했는데 안 됨. 실제로는 response.data.items임.
API 동작 확인하고, 페이지별로 연동 시작.
Claude가 물어봄:
"나머지 페이지들도 API 연동할까요? (계약, 직원, 근태 등)"
"다 해."
그랬더니 모든 페이지 순회하면서 mockData를 실제 API 호출로 교체함. 에러 처리, 로딩 상태까지 추가.
목업이 진짜 앱이 됐다. 하루도 안 걸림. 2~3시간 정도?
솔직히 백엔드 직접 만들었으면:
이거 다 하려면 며칠은 걸렸을 듯.
MCP 연동하니까 대화로 다 됨. "테이블 만들어줘" 하면 만들어주고, "권한 수정해줘" 하면 수정해주고.
다음에 또 쓸 때 참고하려고 정리:
.mcp.json 추가 후 Claude Code 재시작access_token, refresh_token 사용response.data.items (목록), response.data (단건)삽질 포인트 미리 알고 가면 훨씬 빠르게 끝낼 수 있을 듯.
댓글을 작성하려면 로그인이 필요합니다.