Part 5. 데이터베이스 기초

5.6

읽기 12분 · 동영상 12분

5-6. 입력 폼 만들기

방문자가 직접 데이터를 저장하게 하기

지금까지는 Supabase 대시보드에서 직접 데이터를 넣었습니다.

하지만 실제 서비스에서는 방문자가 폼을 작성하면 자동으로 저장되어야 합니다.

이번에는 문의 폼을 만들고, 제출하면 Supabase에 저장되는 기능을 완성해봅시다.

AI에게 요청하기

다음과 같이 AI에게 요청하세요:

"문의 폼을 만들어줘. 이름, 이메일, 메시지 입력란이 있고, 제출하면 Supabase의 inquiries 테이블에 저장되게 해줘. 저장 성공하면 '문의가 접수되었습니다' 메시지를 보여줘"

폼의 구조

AI가 만들어주는 폼은 이런 구조입니다:


┌─────────────────────────────┐
│  문의하기                     │
│                              │
│  이름                         │
│  ┌──────────────────────┐    │
│  │ 홍길동                │    │
│  └──────────────────────┘    │
│                              │
│  이메일                       │
│  ┌──────────────────────┐    │
│  │ hong@email.com       │    │
│  └──────────────────────┘    │
│                              │
│  문의 내용                    │
│  ┌──────────────────────┐    │
│  │ 예약은 어떻게 하나요?  │    │
│  │                      │    │
│  └──────────────────────┘    │
│                              │
│  ┌──────────┐                │
│  │  보내기   │                │
│  └──────────┘                │
└─────────────────────────────┘

동작 원리

폼이 작동하는 과정을 단계별로 살펴봅시다:

단계 무슨 일이 일어나나요?
1 방문자가 이름, 이메일, 메시지를 입력합니다
2 "보내기" 버튼을 클릭합니다
3 웹사이트가 Supabase에 데이터를 전송합니다
4 Supabase가 inquiries 테이블에 새 행을 추가합니다
5 "문의가 접수되었습니다" 메시지가 화면에 나타납니다

이 모든 과정이 1~2초 안에 자동으로 이루어집니다!

직접 테스트해보기

  1. npm run dev로 개발 서버를 실행합니다
  2. 웹 브라우저에서 폼 페이지로 이동합니다
  3. 테스트 데이터를 입력하고 "보내기" 를 클릭합니다
  4. 성공 메시지가 나타나는지 확인합니다
  5. Supabase 대시보드로 이동합니다
  6. Table Editor → inquiries 테이블을 확인합니다

방금 입력한 데이터가 테이블에 나타나면 완벽하게 성공한 것입니다!

이 순간이 바로 "내 웹사이트가 진짜 작동한다!"고 느끼는 순간입니다.

직접 만든 폼에서 데이터가 데이터베이스에 저장되는 것을 확인하면 정말 뿌듯합니다.

폼을 더 좋게 만들기

기본 폼이 작동하면, AI에게 추가 요청을 해봅시다:

"폼에 유효성 검사를 추가해줘. 이름과 이메일은 필수로 입력하게 하고, 이메일 형식이 맞는지 확인해줘"

"보내기 버튼을 누르면 로딩 중 표시를 해줘. 전송 완료되면 입력란을 비워줘"

개선 사항 설명
필수 항목 표시 비어있으면 "이름을 입력해주세요" 메시지
이메일 형식 확인 @ 없으면 "올바른 이메일을 입력해주세요"
로딩 표시 보내는 중에 버튼이 "전송 중..." 으로 변경
입력란 초기화 전송 성공 후 모든 칸이 비워짐

자주 생기는 문제들

문제 원인 해결 방법
"Failed to fetch" 에러 Supabase 연결 실패 .env.local의 URL과 키 확인
데이터가 저장 안 됨 테이블 이름 오타 테이블 이름이 정확히 inquiries인지 확인
페이지가 안 열림 서버가 꺼져 있음 npm run dev 실행 확인
CORS 에러 접근 권한 문제 Supabase에서 RLS(Row Level Security) 설정 확인

CORS 에러가 나면 AI에게 이렇게 요청하세요:

"Supabase에서 CORS 에러가 나요. inquiries 테이블의 RLS 설정을 확인해줘"

이 절의 요약

  • AI에게 요청해서 문의 폼을 만들 수 있습니다
  • 폼을 제출하면 데이터가 자동으로 Supabase에 저장됩니다
  • Supabase 대시보드에서 저장된 데이터를 바로 확인할 수 있습니다
  • 유효성 검사, 로딩 표시 등 추가 기능도 AI에게 요청하면 됩니다
  • 문제가 생기면 .env.local 파일과 테이블 이름을 먼저 확인하세요