데이터에 생명 붙이기

지난 강의 끝에서 이상한 점을 발견했죠. 블로그인데 글쓰기가 없어요. 글이 data.js라는 코드 파일 안에 박혀 있으니까요.

쇼윈도에 모형 음식을 새로 놓으려면 유리를 열고 손으로 바꿔야 해요. 지금 우리 블로그가 그래요. 오늘은 쇼윈도 뒤에 진짜 창고를 들입니다. 글을 코드에서 꺼내서 장부에 옮겨요. 장부는 가게 문을 닫아도, 컴퓨터를 꺼도 남아요.

그 장부의 이름이 데이터베이스예요. 무서운 단어인데, 오늘이 끝나면 스프레드시트 비슷하게 생긴 화면 하나로 기억될 거예요.

오늘 만들 것

글이 데이터베이스에서 오는 블로그. 그리고 내 데이터를 표로 보는 눈.

미리 말할게요. 여기가 이 시즌에서 제일 어려운 고비예요. 오늘 처음으로 내 컴퓨터 밖에 무언가를 만들거든요. 화면이 낯설어서 어렵게 느껴질 뿐, 실제로 하는 일은 표 하나 만들기예요. 낯섦과 어려움을 구분하세요.

준비물

• 시즌 5의 1강을 마친 상태 (my-blog 뼈대가 있어요)
• 40분
• 이메일 주소 하나 (Supabase 가입용)

따라 하기

1. 창고를 계약해요

supabase.com에 가서 가입하세요. GitHub 계정으로 가입하면 제일 빨라요 — 시즌 1에서 만든 그 계정이요.

가입하면 프로젝트를 만들라고 해요. 채울 건 세 칸이에요.

• 프로젝트 이름: my-blog
• 데이터베이스 비밀번호: Generate a password를 눌러 만들어지는 걸 쓰고, 어디 적어두세요
• 리전(Region): Northeast Asia (Seoul) — 목록에 서울이 진짜로 있어요

아래 Security 항목에 체크박스 몇 개가 보일 텐데 그대로 두세요 (특히 "Enable Data API"는 켜져 있어야 해요 — 우리 블로그가 쓸 문이에요). 무료이고, 카드 등록도 없어요. 프로젝트가 준비되는 데 1~2분 걸려요.

왜 서버를 직접 안 세우냐고요? 입문의 자료실에서 로그인을 서비스에 맡겼던 것과 같은 논리예요. 데이터베이스를 밑바닥부터 세우고 지키는 건 전문 업체의 일이고, 우리는 만들 것에 집중해요. 직접 세우지 않고 빌려 씁니다.

2. 장부의 칸을 설계해요

에이전트에게 설계를 시키는데, 오늘은 코드를 고치는 게 아니라 SQL이라는 주문서를 받아낼 거예요.

내 블로그를 Supabase 데이터베이스에 연결할 준비를 할 거야.
아직 내 코드는 고치지 마.

posts 테이블을 만드는 SQL을 써 줘:
- id: 자동 증가하는 번호(기본 키)
- title, summary, content: 텍스트
- created_at: 만든 시각, 기본값은 지금 시각
- RLS(행 수준 보안)를 켜고, "누구나 읽을 수 있다"는 정책만 추가해 줘.
  쓰기 정책은 아직 만들지 마 — 다음 강의에서 로그인과 함께 붙일 거야.

SQL을 보여주면서 각 줄이 무슨 뜻인지 한국어로 한 줄씩 설명해 줘.
나는 그걸 Supabase 대시보드의 SQL Editor에 붙여넣을 거야.

에이전트가 SQL과 설명을 줘요. 설명을 읽어보세요. "테이블을 만든다", "누구나 읽게 한다" — 그게 전부예요.

3. 주문서를 넣어요

Supabase 대시보드 왼쪽 메뉴에서 SQL Editor를 여세요. 에이전트가 준 SQL을 통째로 붙여넣고 Run을 누릅니다.

"Success"가 뜨면 끝이에요. 방금 데이터베이스에 표를 하나 만들었어요.

왼쪽 메뉴의 Table Editor를 열어보세요. posts라는 표가 있죠. 칸(title, summary, content...)은 있는데 줄은 비어 있어요. 새 장부예요.

4. 장부에 첫 줄을 적어요

Table Editor에서 posts 표를 열고, 위쪽의 Insert → Insert row를 누르세요. 1강 때 data.js에 있던 데모 글 하나를 옮겨 적어보세요. title, summary, content만 채우면 돼요. id와 created_at은 알아서 채워집니다.

세 편 다 옮기세요. 복사-붙여넣기예요. 귀찮게 느껴진다면 정확히 맞는 감각이에요 — 글쓰기 화면은 다음 강의에서 만들어요. 오늘은 장부에 직접 적는 날이에요.

5. 블로그를 장부에 연결해요

이제 코드 차례예요. 연결에는 주소와 열쇠가 필요해요. 대시보드 위쪽의 Connect 버튼을 누르면 "Connect to your project" 창에 둘 다 보여요.

• Project URL — 내 창고의 주소 (https://….supabase.co)
• Publishable key — 공개용 열쇠. sb_publishable_로 시작해요

키는 Project Settings → API Keys에서도 볼 수 있어요. 그 화면에 이런 문장이 적혀 있어요 — "Publishable keys can be safely shared publicly" (공개돼도 안전한 키). 왜 안전한지는 7단계에서요.

주의: 같은 화면 아래에 Secret keys(sb_secret_로 시작)도 있어요. 그건 절대 복사하지 마세요. 왜 그런지는 5강에서 다뤄요.

이제 내 블로그가 data.js 대신 Supabase에서 글을 읽어오게 바꿔 줘.

- 내 프로젝트 주소: [Project URL 붙여넣기]
- 공개 키: [Publishable 키(sb_publishable_...) 붙여넣기]

조건:
- supabase-js는 CDN <script> 태그로 불러와 (npm 금지)
- index.html의 글 목록과 post.html의 글 상세가 posts 테이블에서
  읽어오게. 최신순 정렬 유지
- 글을 불러오는 동안 "글을 불러오는 중…" 표시를 잠깐 보여 줘
- 데이터베이스 연결이 실패하면 "글을 불러오지 못했어요. 잠시 후
  다시 열어 주세요."를 보여 줘 (빈 화면 금지)
- data.js는 지우지 말고 data.js.bak으로 이름만 바꿔 둬
- 다 되면, 뭘 바꿨는지 파일별로 한 줄씩만 알려 줘

6. 오늘의 순간

브라우저에서 index.html을 새로고침하세요. 글이 보이죠. 어제와 똑같아 보이는데, 이 글들은 이제 코드가 아니라 창고에서 와요.

증명해 볼게요. 화면을 나란히 놓으세요. 왼쪽에 내 블로그, 오른쪽에 Supabase Table Editor.

1. Table Editor에서 글 하나의 title 칸을 더블클릭해서 고쳐요. 뒤에 "(고침)"이라고 붙여보세요.
2. 저장하고, 왼쪽 블로그를 새로고침해요.

사이트가 바뀌었어요. 코드는 한 글자도 안 건드렸는데요.

이게 오늘 전부예요. 표가 곧 사이트예요. 데이터베이스는 무서운 게 아니라, 사이트가 읽는 스프레드시트예요.

7. 열쇠 이야기 하나만

방금 공개 키를 코드에 붙여넣었죠. "키를 코드에 넣어도 되나?" 싶었을 거예요. 좋은 불안이에요.

이 키는 공개용이에요. 이 키로 할 수 있는 일은 우리가 3단계에서 정한 정책 — "누구나 읽을 수 있다" — 뿐이거든요. 문을 지키는 건 열쇠가 아니라 정책이에요. 다음 강의에서 이 정책에 "쓰기"를 추가하면서 이 문장의 진짜 의미를 보게 돼요.

8. 저장점

git 저장점을 만들어 줘. 이름은 "데이터베이스 연결".

막혔을 때

가입했는데 프로젝트 화면이 낯설어요. 다들 그래요. 오늘 쓰는 건 딱 셋이에요: 왼쪽 메뉴의 SQL Editor와 Table Editor, 그리고 위쪽의 Connect 버튼. 나머지는 무시하세요.

SQL을 붙여넣었는데 에러가 나요. 에러 문구를 그대로 복사해서 에이전트에게 주세요. "Supabase SQL Editor에서 이 에러가 났어. 고친 SQL을 다시 써 줘."

블로그에 "글을 불러오지 못했어요"가 떠요. 십중팔구 주소나 키의 복사 실수예요. 앞뒤 공백 없이 다시 복사해서 "주소와 키를 이걸로 바꿔 줘"라고 시키세요. 그래도 안 되면: "브라우저 개발자 도구의 콘솔 에러를 보고 원인을 찾아 줘."

표를 고쳤는데 사이트가 안 바뀌어요. Table Editor에서 저장(체크 표시)을 눌렀는지 확인하고, 브라우저를 강력 새로고침(Ctrl+Shift+R)하세요.

공개 키가 어느 건지 모르겠어요. sb_publishable_로 시작하는 쪽이에요. sb_secret_으로 시작하는 건 절대 아니에요. 화면에 두 종류가 나란히 있어서 헷갈리기 쉬워요 — 접두어를 읽으세요. (오래된 안내 글에는 anon이라는 옛 이름으로 나오기도 해요. 같은 역할의 키예요.)

이거 무료 맞아요? 무료예요. 하나만 알아두세요. 무료 프로젝트는 일주일쯤 아무도 안 쓰면 절전 모드로 들어가요. 죽은 게 아니라 자는 거예요. 대시보드에서 Resume project를 누르면 깨어나요. 5강에서 자세히 다뤄요.

마무리 체크

나가기 전에 하나씩 확인해요:

• Supabase 프로젝트를 만들었어요 (무료, 카드 없이)
• 에이전트가 써준 SQL로 posts 테이블을 만들었어요
• 데모 글 3편을 Table Editor에서 직접 넣었어요
• 블로그가 data.js 대신 데이터베이스에서 글을 읽어요
• 표에서 한 칸 고쳤더니 사이트가 바뀌었어요 ← 오늘의 순간
• git 저장점 "데이터베이스 연결"을 만들었어요

이제 글이 코드 밖에 살아요. 그런데 글을 쓰려면 아직 Supabase 화면에 들어가서 표에 적어야 해요. 내 블로그에 글쓰기 버튼이 있으면 좋겠죠.

문제는, 글쓰기 버튼은 아무나 누르면 안 된다는 거예요. 다음 강의에서 출입증을 만듭니다.