devto데브투

Next.js와 Supabase로 만드는 나만의 투표 서비스

by DD
1개월 전
조회수 18

이지폴보트(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]
원문 읽기