글을 저장하고 다시 불러오는 기능 연결하기

글 한 편은 여러 칸으로 나뉘어 저장됩니다

관리자에서 입력한 제목, 슬러그, 카테고리, 본문은 posts라는 표의 각 칸에 들어갑니다. 여기에 글을 구분하는 id, 초안인지 공개인지 나타내는 status, 예약 시간과 수정 시간도 함께 저장됩니다. 화면을 그릴 때는 이 표에서 필요한 글을 가져와 제목과 문단으로 바꿉니다. 따라서 화면 파일을 복사하는 것만으로 저장된 글까지 복사되는 것은 아닙니다. 코드와 데이터가 서로 역할을 나누고 있습니다.

예제에는 운영 설정을 담는 settings, AI 초안을 만들 글감을 담는 topics, 예약 작업의 결과를 담는 jobs, API 사용량을 담는 usage도 있습니다. 처음부터 표의 모든 항목을 외울 필요는 없습니다. 글이 사라졌다면 posts와 접속 환경을, 사이트 이름이 다르다면 settings를, 초안 생성이 멈췄다면 topics와 jobs를 확인한다는 정도로 연결해 두세요. 서로 다른 정보를 한 칸에 몰아넣지 않기 때문에 문제를 나누어 볼 수 있습니다.

schema.sql 은 이 표들을 만드는 설명서입니다. CREATE TABLE이라는 표현은 표를 만든다는 뜻입니다. 예제는 이미 같은 표가 있으면 다시 만들지 않도록 되어 있습니다. 그렇다고 모든 SQL 명령이 안전하게 반복되는 것은 아닙니다. 인터넷에서 받은 DELETE, DROP, UPDATE 명령을 뜻을 모른 채 실행하면 데이터가 바뀌거나 지워질 수 있습니다. 지금은 제공된 초기 표 만들기 명령과 읽기 확인만 사용합니다.

수정본과 공개본, 사진을 다른 표에 보관합니다

posts에는 최신 수정본, live_posts에는 마지막 공개본, media에는 관리자에서 추가한 사진이 들어갑니다. 이 때문에 글을 수정하다 멈춰도 방문자가 읽던 본문이 사라지지 않습니다. 이전 v1.0 파일로 실습했다면 자료를 내려받은 뒤 새 schema.sql을 적용하고 배포합니다. 이 스키마는 기존 표를 지우지 않고 필요한 표와 기존 공개 글의 복사본을 추가합니다.

로컬 데이터가 남아 있는지 먼저 확인합니다

4회차에서 실행한 npm run db:local 은 내 PC의 시험용 표를 준비합니다. 로컬 관리자에서 케이블 정리 글을 저장하고 페이지를 새로 고쳐 보세요. 저장된 글 목록에 같은 제목이 있으면 브라우저 입력칸에만 남아 있는 상태는 아닙니다. 이어서 개발 서버를 Ctrl+C로 종료하고 같은 폴더에서 npm run dev 를 다시 실행합니다. 같은 로컬 주소의 관리자에서 글을 다시 볼 수 있는지 확인합니다.

브라우저 탭을 닫는 것, 서버 실행을 종료하는 것, 저장 데이터 파일을 삭제하는 것은 서로 다릅니다. 앞의 두 동작은 저장된 D1 데이터를 지우는 명령이 아닙니다. 반면 프로젝트의 로컬 상태 폴더를 정리하면 시험 데이터도 사라질 수 있습니다. 디스크 공간을 비운다는 이유로 프로젝트 안의 폴더를 무작정 삭제하지 않습니다. 기존 글을 보관하려면 관리자 자료 내려받기로 내용을 먼저 저장해 둡니다.

다른 이름으로 복사한 프로젝트에서 서버를 실행했을 때 글이 없을 수 있습니다. 실행 파일이 같아도 새 폴더의 로컬 저장 공간을 사용하는 상황입니다. 이때 원래 폴더로 돌아가면 이전 글을 확인할 수 있는지 봅니다. 글이 안 보인다는 현상만으로 데이터가 삭제되었다고 판단하지 마세요. 터미널 경로, 접속 포트, 실행 중인 프로젝트를 함께 확인하면 불필요한 복구 작업을 줄일 수 있습니다.

내 Cloudflare 계정에 저장 공간을 만듭니다

원격 실습을 선택했다면 프로젝트 터미널에서 npx wrangler login 을 실행합니다. 브라우저가 열리면 사용할 내 Cloudflare 계정을 확인하고 도구의 접근을 허용합니다. 여러 계정을 쓰는 경우 업무용 계정이나 다른 사람의 계정으로 잘못 들어가지 않았는지 봅니다. 로그인 결과는 계정 연결을 확인하는 단계이며 사이트 공개나 결제를 자동으로 완료하는 단계가 아닙니다.