방문자 댓글 받기

지금까지 이 블로그에 들어오는 데이터는 전부 내 손을 거쳤어요. 내가 쓴 글, 내가 넣은 데모 데이터. 믿을 수 있는 데이터죠.

오늘부터 아니에요. 방문자가 댓글을 남기게 할 거거든요. 모르는 사람의 입력이 내 데이터베이스에 들어온다는 뜻이에요.

식당 홀에 의견 카드함을 놓는 일이에요. 누구나 카드를 넣을 수 있어요. 대신 카드 크기는 정해져 있고, 함은 잠겨 있어서 남의 카드를 꺼내거나 바꿀 수는 없어요. 열되, 조건을 걸고 여는 것. 이게 오늘 배우는 기술이에요.

오늘 만들 것

글마다 댓글이 달리는 블로그.

그리고 페이지 만드는 사람과 앱 만드는 사람을 가르는 습관 하나: 남의 입력은 일단 의심한다.

준비물

• 시즌 5의 3강을 마친 상태 (로그인과 글쓰기가 있어요)
• 40분
• 폰 (마지막에 한 번 등장해요)

따라 하기

1. 카드함부터 설계해요

이번에도 코드보다 장부가 먼저예요.

글 상세 페이지(post.html)에 방문자 댓글을 붙일 거야. 로그인 없이
누구나 달 수 있게 한다.

1단계 — 먼저 comments 테이블 SQL만 보여 줘. 코드는 아직 고치지 마:
- id 자동 증가, post_id(posts 참조), nickname(최대 20자),
  body(최대 500자), created_at 기본값 now
- 글자 수 제한은 데이터베이스 제약(CHECK)으로도 걸어 줘
- RLS: 누구나 읽기 가능, 누구나 추가 가능, 수정과 삭제는 아무도 못 함

SQL 각 줄의 뜻을 한국어로 한 줄씩 설명해 줘.

설명에서 두 군데를 눈여겨보세요.

글자 수 제한이 SQL 안에 있어요(CHECK). 화면에서도 막겠지만, 장부 자체에도 새겨두는 거예요. 이유는 3강에서 배웠죠 — 화면은 우회할 수 있어요. 장부의 규칙은 못 지나가요.

수정·삭제는 아무도 못 해요. 댓글을 남긴 본인도요. 이상하게 들리지만, 로그인이 없으니 "본인"을 확인할 방법이 없어요. 확인할 수 없으면 아무도 못 하게 잠그는 것 — 이게 안전한 기본값이에요. (삭제가 필요하면 주인장인 내가 Table Editor에서 지우면 돼요.)

재미있는 디테일 하나. 밖에서 삭제를 시도하면 에러가 나는 게 아니라 조용히 아무 일도 안 일어나요. 정책은 허용된 게 없으면 그 요청이 볼 수 있는 줄 자체가 0개거든요. 도둑에게는 "잠겼다"는 안내조차 안 해주는 금고예요.

SQL을 SQL Editor에 붙여넣고 Run 하세요.

2. 왜 로그인 없이 받을까요

3강에서 글쓰기에는 출입증을 걸었으면서, 댓글은 왜 그냥 받을까요.

댓글에 로그인을 걸면 스팸은 줄어요. 대신 진짜 방문자의 대부분이 댓글을 포기해요. 가입까지 해서 남길 말은 많지 않거든요. 문턱과 참여는 맞바꾸는 관계예요.

우리는 참여 쪽을 골라요. 개인 블로그의 댓글 한 줄이 주는 기쁨이 스팸 지우는 수고보다 크니까요. 이건 정답이 아니라 선택이에요. 언젠가 스팸이 기쁨을 넘어서면 그때 문턱을 올리면 돼요.

3. 카드함을 달아요

comments 테이블을 만들었어. 이제 post.html에 댓글을 붙여 줘:

- 그 글의 댓글 목록(오래된 순) + 닉네임/내용 입력 폼
- 상태 세 가지를 전부 처리해 줘: 댓글이 0개일 때 "첫 댓글을 남겨
  주세요", 불러오는 중, 불러오기 실패
- 등록 버튼은 누르면 잠깐 비활성화(연타 방지), 성공하면 폼을 비우고
  목록 갱신, 실패하면 입력을 지우지 말고 오류 문구를 보여 줘
- 빈 값이면 보내지 말고, 글자 수 초과는 입력 중에 남은 글자 수로 보여 줘
- 사람 눈에 안 보이는 입력칸(허니팟)을 하나 숨겨 두고, 거기에 값이
  차 있으면 조용히 보내지 마 (봇 대비)
- 디자인은 지금 블로그와 같은 톤으로, 요란하지 않게

프롬프트가 길죠. 절반이 "잘 될 때" 이야기가 아니라 "안 될 때" 이야기예요. 빈 값, 초과, 실패, 연타, 봇. 1강에서 말한 그대로예요 — 없을 때와 안 될 때까지 적는 게 명세예요.

4. 진짜 사람처럼 써 봐요

내 글 하나를 열고 댓글을 달아보세요. 잘 되죠. 이제 심술궂은 방문자가 되어 봅니다.

• 빈 채로 등록을 눌러요 → 거부돼야 해요
• 아주 긴 글을 붙여넣어요 → 남은 글자 수가 마이너스가 되기 전에 막혀야 해요
• 등록을 빠르게 두 번 눌러요 → 댓글이 두 개 달리면 안 돼요

셋 중 하나라도 뚫리면 에이전트에게 그대로 말하세요. "빈 댓글이 등록돼. 막아 줘." 이렇게 직접 두들겨보는 게 검증이에요. 시즌 2에서 배운 "네 눈으로 확인하라"의 연장이죠 — 이번엔 내 눈으로, 심술까지 부려가면서요.

5. 허니팟 — 함정 하나

프롬프트에 "사람 눈에 안 보이는 입력칸"이 있었죠. 이게 허니팟(꿀단지)이에요.

스팸 봇은 화면을 안 봐요. 폼에 있는 칸을 전부 기계적으로 채우죠. 그래서 사람에게는 안 보이는 칸을 하나 심어두면, 그 칸이 채워진 제출은 봇이라는 뜻이에요. 조용히 버리면 돼요.

비밀 하나 알려드릴게요. 지금 읽고 있는 이 사이트의 질문 상자도 정확히 이 수법을 써요. 오늘 만든 게 장난감이 아니라 실전 기술이라는 뜻이에요.

6. 오늘의 순간 — 폰을 꺼내요

폰으로 내 블로그의 글을 열고 댓글을 하나 남기세요. 블로그가 아직 내 컴퓨터에만 떠 있다면, 에이전트에게 "같은 와이파이의 폰에서 열 수 있는 주소로 미리보기 서버를 띄워 줘"라고 하면 돼요.

그리고 PC의 Table Editor를 보세요. 폰에서 쓴 댓글이 표에 줄로 나타나 있어요.

폰과 PC, 기기 두 대가 같은 장부를 보고 있는 거예요. 데이터가 "내 컴퓨터 안"이 아니라 바깥의 창고에 산다는 것 — 2강에서 머리로 안 것을 오늘 손으로 확인했어요.

7. 저장점

git 저장점을 만들어 줘. 이름은 "방문자 댓글".

막혔을 때

댓글이 저장이 안 돼요. comments 테이블의 SQL을 Run 했는지부터요. 에러 문구를 에이전트에게 그대로 주세요. 정책 이름이 겹치면 에러가 나는데, 그것도 문구만 주면 고쳐줘요.

댓글이 다른 글에도 보여요. post_id로 거르는 부분이 빠진 거예요. "댓글 목록이 지금 글의 id로 필터링되는지 확인하고 고쳐 줘."

폰에서 접속이 안 돼요. 폰과 PC가 같은 와이파이인지 확인하세요. 그래도 안 되면 이 확인은 다음 강의로 미뤄도 돼요 — 배포하고 나면 어디서든 열리니까요.

스팸이 벌써 걱정돼요. 아직 안 와요. 주소를 아는 사람이 없거든요. 배포하고 시간이 지나면 올 수 있어요. 그때의 단계적 대응(글자 수 강화 → 검토 후 게시 → 문턱 올리기)은 오늘 만든 구조 위에 다 얹을 수 있어요. 미리 다 막으려고 오늘을 무겁게 만들지 마세요 — 필요가 먼저, 도구가 나중.

수정·삭제 버튼이 없어서 이상해요. 의도예요. 1단계 설명을 다시 읽어보세요. 내가 지워야 할 댓글이 생기면 Table Editor에서 그 줄을 지우면 돼요.

마무리 체크

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

• comments 테이블을 만들었어요 (글자 수 제한이 장부에도 있어요)
• 글마다 댓글 목록과 입력 폼이 붙었어요
• 심술 테스트 3종(빈 값·초과·연타)을 전부 통과했어요
• 허니팟이 뭔지 남에게 설명할 수 있어요
• 폰에서 단 댓글이 PC의 표에 나타났어요 ← 오늘의 순간
• git 저장점 "방문자 댓글"을 만들었어요

읽기, 쓰기, 로그인, 댓글. 블로그에 있어야 할 건 다 있어요. 없는 건 하나 — 주소예요.

아직 이 블로그는 내 컴퓨터 안에서만 살아요. 다음 강의가 마지막이에요. 개업합니다.