Next.js와 Supabase로 만드는 나만의 투표 서비스
by DD
3개월 전
조회수 26
이지폴보트(EasyPollVote)는 사용자가 투표를 생성하고 공유하여 익명으로 투표할 수 있도록 설계됨
Next.js + Supabase 템플릿을 기반으로 개발, GET/POST 요청을 통해 투표 데이터 관리
Supabase 데이터베이스에 이름, 이메일, 투표 항목을 저장하며, 중복 투표 검증은 미구현
투표 결과는 GET 요청으로 집계, 피카츄(Pikachu)와 블래스토이즈(Blastoise) 투표수를 표시
Supabase를 활용한 데이터 저장 및 조회
본문에서는 Supabase를 사용하여 투표 데이터를 저장하고 조회하는 과정을 설명한다.
POST 요청: 폼 데이터를 JSON 형식으로 변환하여 `/vote` 엔드포인트로 전송, 데이터베이스에 저장
GET 요청: `/vote` 엔드포인트에서 투표 데이터를 가져와 피카츄(Pikachu)와 블래스토이즈(Blastoise) 투표수를 집계
데이터 유효성 검사: 폼 제출 시 투표 항목 선택 여부를 확인, 미선택 시 에러 메시지 표시
Supabase는 PostgreSQL(PostgreSQL) 기반의 BaaS(Backend-as-a-Service)로, 개발자가 데이터베이스 관리 부담 없이 애플리케이션 로직에 집중할 수 있도록 돕는다.
Next.js API 라우트(Route)를 이용한 백엔드 로직 구현
글에서는 Next.js의 API 라우트(Route)를 사용하여 백엔드 로직을 구현하는 방식을 소개한다.
`/vote` 폴더 내 `route.ts` 파일에 GET/POST 요청 처리 로직 구현
GET 요청: 투표 결과를 집계하여 피카츄(Pikachu)와 블래스토이즈(Blastoise) 투표수를 계산
POST 요청: 폼 데이터를 받아 Supabase 데이터베이스에 저장
Next.js API 라우트는 서버리스(Serverless) 함수를 쉽게 배포할 수 있게 해주며, 프론트엔드(Frontend)와 백엔드(Backend) 간의 긴밀한 통합을 가능하게 한다.
프론트엔드(Frontend)에서 데이터 가져오기 및 표시
본문에서는 useEffect 훅(Hook)을 사용하여 투표 결과를 가져와 화면에 표시하는 방법을 설명한다.
useEffect 훅(Hook): 컴포넌트 마운트(Mount) 시 `/vote` 엔드포인트에 GET 요청을 보내 투표 데이터 가져오기
데이터 처리: 가져온 데이터를 피카츄(Pikachu)와 블래스토이즈(Blastoise) 투표수로 집계
상태 관리: useState 훅(Hook)을 사용하여 투표수 및 로딩 상태 관리
이러한 방식은 클라이언트 사이드 렌더링(Client-Side Rendering)을 통해 사용자에게 실시간으로 투표 결과를 보여준다.
이지폴보트(EasyPollVote) 개발 과정에서 고려할 점
이지폴보트(EasyPollVote) 개발 과정에서 몇 가지 개선할 점이 존재한다.
중복 투표 방지: 현재는 중복 투표를 허용하므로, IP 주소, 쿠키(Cookie) 또는 사용자 인증(User Authentication)을 통해 방지 필요
데이터 유효성 검사 강화: 이메일 형식 검사 등 서버 측 유효성 검사(Server-Side Validation) 추가
사용자 인터페이스(UI) 개선: 투표 결과 시각화 및 사용자 경험(UX) 향상
이러한 개선 사항들을 통해 이지폴보트(EasyPollVote)는 더욱 안정적이고 사용자 친화적인 애플리케이션으로 발전할 수 있다.
![EasyPollVote [Dev Log #1]](https://static.devday.kr/thumbnails-w1200/devto-3483492-81337396.webp)
