정적 사이트의 한계와 데이터 보존의 필요성
Cloudflare(KV, Workers 등)를 활용한 백엔드 및 DB 구축 개념 학습
(지금까지의 저장 방식)
(오늘 배울 클라우드 데이터베이스)
모두가 모일 수 있는 완벽한 가게(웹사이트)를 열려면 세 가지 역할이 필요해요.
손님들이 보고 만지는 인테리어와 메뉴판이에요. 우리가 짠 HTML, CSS를 보여주는 역할을 합니다.
손님의 주문을 받아서 창고에 물건을 넣거나, 꺼내다 주는 친절한 점원이에요. 보이지 않게 일하는 규칙(코드)이죠!
물건이 절대로 잃어버리지 않게 차곡차곡 쌓아놓는 비밀 창고입니다. 전 세계 어디서든 꺼낼 수 있어요.
1. 사용자 (손님)
"내 쪽지 저장해줘!" 클릭
화면(Pages)
요청 보내기
2. Workers (점원/백엔드)
"알겠습니다! 예쁘게 상자(JSON)에 포장할게요."
저장/꺼내기
3. KV (창고/데이터베이스)
이름표를 붙여서 안전하게 보관 및 꺼내주기 완료!
Key(열쇠/이름표)만 알면,
안에 들어있는 Value(물건/데이터)를
언제든 통째로 넣고 뺄 수 있어요.
📦 { "이름": "짱구", "쪽지": "안녕!" }
사물함에 물건(데이터)을 넣을 때는 그냥 마구잡이로 넣을 수 없어요.
반드시 JSON이라는 규격에 맞는 '포장 상자(문자열)'에 글씨로 예쁘게 적어서 넣고 꺼내야 해요.
친구들과 배포된 주소로 접속해서 데이터가 어떻게 실시간으로 모이는지 확인해봐요!
"안녕! 나 오늘 기분 완전 좋아! 우리 빨리 완성해보자~"
- 코딩왕 짱구 -
다음 장의 '마법의 프롬프트'를 복사해서 AI에게 주고 index.html, main.js, workers.js 코드를 받아요. (이때 AI가 지정해준 KV 네임스페이스 이름을 꼭 기억하세요!)
Cloudflare 대시보드에서 방금 기억한 이름으로 KV(창고)를 생성해요. 그리고 Workers(점원)를 생성하여 workers.js 코드를 넣고 먼저 배포한 후, 마지막에 KV를 연결(바인딩)합니다.
main.js 파일의 API_BASE 주소를 방금 만든 Workers 주소로 변경해요. 그 다음 index.html과 main.js를 Pages(간판)에 업로드하면 끝!
원하는 기능 맨 뒤에 아래 내용을 드래그해서 마법 주문처럼 꼭 붙여주세요!
1. 내가 만들고 싶은 것 (예시)
이 프로젝트는 프론트엔드(Cloudflare Pages)와 백엔드(Cloudflare Workers)가 완전히 분리되어 실행되는 구조다. [백엔드 (Workers) 작성 규칙] - 백엔드 코드는 반드시 `workers.js`라는 하나의 파일로 작성해라. - 이 코드는 내가 Cloudflare 대시보드에서 'Hello World' 워커를 새로 만든 후, 웹상의 에디터에 그대로 복사해서 붙여넣을 용도다. - 데이터베이스(KV) 바인딩 변수명은 내 웹사이트의 성격에 맞춰서 네가 직접 정해라. - 만약 KV 바인딩이 안 되어 있어서 에러가 날 경우, 원인을 바로 알 수 있도록 "KV 바인딩이 설정되지 않았습니다. Cloudflare 대시보드에서 KV 네임스페이스를 생성하고 변수명을 [네가정한변수명]으로 올바르게 연결해 주세요."라는 친절한 경고 메시지를 화면에 출력하도록 예외 처리를 해라. [프론트엔드 (Pages) 작성 규칙] - 프론트엔드 자바스크립트 로직은 `main.js` 파일에 작성해라. - HTML, CSS, main.js 파일들은 하나의 폴더로 묶어서 Cloudflare Pages에 폴더째로 업로드할 것이다. - `main.js` 파일 최상단에는 `const API_BASE = "https://여기에_워커_주소_입력";` 변수를 선언해라. - 데이터를 불러오거나 저장하기 위해 fetch()를 사용할 때는 반드시 이 `API_BASE` 변수를 사용하여 주소를 연결해라. - 만약 `API_BASE` 값이 기본값("https://여기에_워커_주소_입력") 그대로라면, 화면에 'API_BASE 주소를 본인의 실제 Workers 주소로 변경하지 않았습니다. main.js 파일을 수정하고 다시 배포해주세요.'라는 에러 메시지가 명확하게 표시되도록 프론트엔드 예외 처리를 해라. - LocalStorage, IndexedDB, 브라우저 파일 저장 기능은 절대 사용하지 마라. - 메인 페이지는 `index.html`로 만들어라. [데이터 저장 규칙 (KV)] - 이 환경은 서버리스이므로 파일 시스템(txt, json 등)에 데이터를 저장할 수 없다. - 모든 데이터는 Cloudflare KV에 저장한다. - KV는 Key-Value 구조로만 접근하며, Value는 반드시 JSON 문자열 형태로 변환하여 저장해라. [답변 제공 규칙: 매우 중요] - 프로그래밍이나 데이터베이스를 전혀 모르는 완전 초보자에게 설명하듯 아주 쉽고 친절하게 답변해라. - 완성된 코드를 제공할 때, 다음 두 가지를 아주 강력하게 강조해서 설명해라: 1) Cloudflare Workers 설정에서 바인딩할 때, 변수 이름을 네가 코딩에 사용한 그 이름으로 똑같이 설정해야 한다는 사실. 2) 배포 후 `main.js` 파일의 `API_BASE` 값을 실제 내 Workers 주소로 반드시 수정해야 한다는 사실.
LocalStorage의 한계를 넘어, 클라우드 서버에 데이터를 올려 친구들과 공유할 수 있게 되었습니다.
포장 박스(JSON 문자열)에 통째로 담아 이름표(Key)를 붙여서 보관하는 마법의 창고를 배웠습니다.
복잡한 코드는 몰라도 괜찮아요. 프론트, 백엔드 구조를 AI에게 똑바로 설명하면 알아서 척척 짜줍니다!
오늘 배운 클라우드 구조(Pages + Workers + KV)를 활용해서,
세상에 하나뿐인 유용한 게시판을 만들어보세요!
수업 중 QR을 찍고 스마트 기기로 의견을 올리면, 앞에 띄워둔 화면에 실시간으로 포스트잇이 붙는 담벼락
학생들이 이름과 과제 링크(또는 텍스트)를 입력하면, 선생님만 볼 수 있게 차곡차곡 데이터가 쌓이는 시스템
누가 썼는지 모르게 반 친구들을 칭찬하는 글을 남기면, 예쁜 하트 모양으로 칭찬이 실시간으로 올라오는 웹사이트
궁금한 질문을 올리고 다른 친구들이 '나도 궁금해!' 버튼(좋아요)을 누르면, 인기 질문이 위로 자동으로 올라가는 게시판