개요
이 매뉴얼은 여러분이 만든 과학 탐구 시뮬레이션에 ‘기억하는 능력(저장 기능)’을 부여하는 과정을 다룹니다. 프론트엔드사용자의 눈에 보이는 화면(웹페이지의 디자인과 버튼 등)을 담당하는 영역., 백엔드사용자 눈에 보이지 않는 서버에서 계산을 처리하고 데이터를 전달하는 영역., 그리고 데이터베이스데이터를 영구적으로 저장하고 보관하는 클라우드 창고.를 하나로 연결해 봅시다.
chat Phase 1. AI 프롬프트 작성 (Vibe 코딩)
먼저 Visual Studio Code를 열고 파일(File)->폴더 열기(Open Folders)에 들어가서 자신이 작업 공간으로 쓸 폴더(아무 폴더)를 여세요.
구분선(====)을 기준으로 위쪽은 여러분의 기획을 적는 곳, 아래쪽은 서버리스개발자가 직접 서버 컴퓨터를 관리할 필요 없이, 코드만 올리면 자동으로 실행되는 클라우드 환경. 환경을 위한 고정 템플릿입니다. 복사하여 AI에게 전달하세요.
storage Phase 2. 데이터베이스 (Cloudflare KV)
1 KV 네임스페이스 메뉴 진입
Cloudflare의 대시보드 좌측 메뉴에서 [스토리지 및 데이터베이스] > [Workers KV]를 클릭하고, 우측 상단의 [Create Instance] 버튼을 누릅니다.
2 네임스페이스 이름 생성
AI가 생성한 코드에서 알려준 KV 이름을 입력하고 [추가]를 클릭합니다.
api Phase 3. 백엔드 (Cloudflare Workers) 생성
1 애플리케이션 생성 진입
좌측 [컴퓨트] > [Workers 및 Pages]를 클릭하고 우측 상단의 [응용 프로그램 생성]을 클릭합니다.
2 템플릿 선택
[Hello World로 시작하십시오!]를 찾아 클릭합니다.
3 배포 실행
우측 하단의 [배포] 버튼을 누릅니다.
4 API_BASE 주소 복사 및 코드 편집
화면 좌측 상단에 뜬 Worker의 고유 주소(https://...)를 복사해둡니다. 이후 우측 상단의 [코드 편집]을 클릭합니다.
5 코드 붙여넣기 및 배포
기존 코드를 지우고 AI가 짜준 workers.js 코드를 붙여넣습니다. 이후 우측 상단 [배포]를 클릭합니다.
6 바인딩 탭 진입 (가장 중요)
뒤로가기하여 Worker 화면으로 돌아온 뒤, [설정] > [바인딩] 탭을 클릭하고 [+ 바인딩 추가]를 누릅니다.
7 바인딩 메뉴 선택
메뉴 중에서 [KV 네임스페이스]를 선택합니다.
8 변수 이름 및 대상 연결
변수 이름 칸에 AI가 알려준 변수명을 대소문자/철자 하나 틀리지 않고 입력합니다. 아래 드롭다운에서 아까 만든 DB를 선택합니다.
9 바인딩 완료
정상적으로 추가되었다면 목록에 표시됩니다.
web Phase 4. 프론트엔드 (Cloudflare Pages) 생성
edit_document 내 컴퓨터에서 main.js 주소 수정
업로드하기 전, Phase 3의 4단계에서 복사해둔 Workers의 주소를 main.js의 API_BASE 변수에 넣고 저장하세요. (https:// 반드시 포함)
⚠️ 주소 형태 주의사항 (매우 중요)
- API_BASE는 반드시
https://[임의의주소].[아이디].workers.dev와 같은 형식이어야 합니다. pages.dev가 포함된 주소는 Pages(프론트엔드) 주소이므로 절대 넣지 마세요!- 주소 맨 마지막에 슬래시(
/)가 들어가면 에러가 발생하므로 지워주세요.
⚠️ 주의: API_BASE 외에 다른 이름의 변수나 코드는 절대 변경하면 안 됩니다.
💡 수정한 후에는 Visual Studio Code에서 반드시 Ctrl + S 키보드 단축키를 누르거나 메뉴의 파일(File) -> 저장(Save)을 눌러 명시적으로 저장해야 반영됩니다.
1 애플리케이션 생성 진입
대시보드 좌측 [컴퓨트] > [Workers 및 Pages] 메뉴에서 우측 상단 [응용 프로그램 생성]을 클릭합니다.
2 Pages 탭 이동
[Pages] 탭을 선택합니다.
3 파일 끌어서 놓기 선택
[파일 끌어서 놓기] 방식의 [시작] 버튼을 누릅니다.
4 프로젝트 이름 생성
프로젝트 이름(이름이 곧 접속 주소가 됩니다)을 적고 [프로젝트 생성]을 클릭합니다.
5 폴더 통째로 업로드
주소를 수정한 main.js와 HTML, CSS 파일이 모두 들어있는 내 컴퓨터의 폴더를 통째로 점선 박스 안으로 드래그합니다.
6 사이트 배포
파일 업로드가 끝나면 하단의 [사이트 배포] 버튼을 누릅니다.
7 배포 완료
성공 화면에 나타난 고유 URL을 통해 완성된 사이트에 접속합니다!
update Phase 5. 백엔드(Workers) 재배포
1 Worker 화면 진입 및 코드 편집
대시보드에서 생성했던 Worker 화면으로 들어가 우측 상단의 [코드 편집]을 누릅니다.
2 코드 재작성 및 배포
수정된 새로운 코드를 붙여넣고 우측 상단의 [배포]를 클릭합니다.
draw Phase 6. 프론트엔드(Pages) 재배포
1 배포 생성
대시보드의 해당 Pages 프로젝트를 선택한 후, 우측 상단이나 하단 메뉴에서 [배포 생성]을 클릭합니다.
2 폴더 다시 업로드
수정한 파일이 들어있는 폴더 전체를 통째로 다시 점선 영역에 끌어다 놓습니다.
3 재배포 완료
새롭게 반영된 결과물로 업데이트가 완료됩니다.
warning 에러 해결 가이드 (Troubleshooting)
Q1. 화면에 "API_BASE 주소를... 변경하지 않았습니다" 라고 떠요.
원인: 프론트엔드(Pages)가 백엔드(Workers) 서버 주소를 모르는 상태입니다. 기본 템플릿 값("https://여기에_워커_주소_입력")이 그대로 남아있을 확률이 큽니다.
💡 해결 방법:
- 컴퓨터에 있는
main.js파일의API_BASE변수값을 본인의 Workers 주소로 변경했는지 확인하세요. - Visual Studio Code에서 수정한 뒤
Ctrl + S를 누르거나 파일->저장을 클릭하여 확실히 저장하셨나요? (저장되지 않은 채로 업로드하면 옛날 파일이 올라갑니다.) - 혹시
API_BASE외에 다른 변수명이나 코드를 건드린 건 없는지 점검해 보세요. - 주소 형식을 다시 한 번 확인하세요:
pages.dev를 넣었거나 주소 맨 끝에/가 포함되었다면 오류가 발생합니다. (반드시workers.dev로 끝나야 합니다) - 확인이 끝났다면 다시 Phase 6의 방법에 따라 프론트엔드를 배포하세요.
Q2. 백엔드 코드를 잘못 짰거나 DB 바인딩을 빼먹은 거 같아요.
원인: Workers 코드에 오류가 있거나 KV DB가 제대로 연결되지 않아 데이터를 저장하거나 불러올 수 없는 상태입니다.
💡 해결 방법:
AI가 고쳐준 새로운 Workers 코드가 있다면 Phase 5의 방법대로 백엔드를 재배포하세요. 만약 KV와 Workers를 바인딩하지 않았다면 Phase 3의 6~9 단계로 돌아가 DB를 연결하세요.