next-vote-20th

서론

안녕하세요! 프론트엔드 운영진 김동혁입니다 👾
벌써 마지막 스터디에 도달했네요. 이번 스터디는 특별히 백엔드 팀원들과 함께하는 협업 과제로 준비했습니다.

현대 웹 개발에서는 REST API가 데이터 통신의 핵심으로 자리 잡으면서, 프론트엔드와 백엔드 간의 협업이 더욱 중요해졌습니다. 백엔드는 API를 통해 데이터를 제공하고, 프론트엔드는 이를 기반으로 사용자 경험을 책임집니다. 따라서 API를 잘 활용하고 백엔드 개발자와 원활히 소통하는 능력은 필수적인 스킬입니다.

이번 과제는 앞으로 팀 프로젝트에서 실제로 백엔드와 협업하기 전 연습을 해보는 기회입니다. Next.js를 활용해 투표 기능을 가진 애플리케이션을 제작하면서 백엔드와의 소통, 역할 분담, 데이터 흐름을 다루는 경험을 쌓아 보세요. 이 경험은 추후 팀 프로젝트에서 더욱 원활한 협력을 가능하게 할 것입니다.

여러분의 멋진 결과물을 기대하며 마지막 과제를 응원합니다. 화이팅! 🔥

---

미션

목표

• REST API를 활용하여 서버와의 통신 방식을 이해합니다.
• JavaScript의 비동기 처리 방식(async/await, Promise)을 익힙니다.
• API 문서를 바탕으로 백엔드와 소통하는 방법을 학습합니다.
• 팀 내 협업을 통해 효율적인 역할 분담을 고민하고 적용합니다.

---

기한

• 2024년 1월 4일 토요일까지 제출해주세요.(24.12.22 수정. 혼란드려서 죄송합니다)

---

필수 구현 사항

1. 로그인 기능

   • 사용자는 아이디와 비밀번호를 입력하여 로그인할 수 있습니다.
   • 로그인 시 JWT를 통해 인증을 처리합니다.
   • 아이디 또는 비밀번호가 틀렸을 경우, 에러 메시지를 표시합니다.
   • 로그아웃 기능을 구현합니다.

2. 투표 기능

   • 로그인한 사용자는 투표에 참여할 수 있습니다.
   • 각 후보에 대한 투표 수를 실시간으로 확인할 수 있습니다.
   • 사용자는 한 번만 투표할 수 있으며, 중복 투표를 방지합니다.

3. 후보 목록 조회

   • 모든 사용자는 후보자의 목록과 상세 정보를 확인할 수 있습니다.
   • 후보자의 이름, 사진, 소개 등을 표시합니다.

4. 투표 결과 조회

   • 투표 종료 후, 모든 사용자는 최종 투표 결과를 확인할 수 있습니다.
   • 각 후보자의 득표 수와 득표율을 시각적으로 표현합니다.

5. 반응형 디자인

   • 다양한 디바이스에서 최적의 사용자 경험을 제공하기 위해 반응형 디자인을 적용합니다.

6. 에러 처리

   • 서버 오류, 네트워크 문제 등 다양한 에러 상황에 대한 처리를 구현합니다.
   • 사용자에게 이해하기 쉬운 에러 메시지를 제공합니다.

---

디자인 참고

다음의 리소스를 참고해 UI/UX를 개선해보세요:

• 디자인 레퍼런스1
• 디자인 레퍼런스2
• 디자인 레퍼런스3

19기 과제

• 비트버디
• TIG
• 펫플레이트

선택 사항

• API 요청 방식은 자유롭게 선택 가능 (예: Fetch API, axios 등).
• 최신 자바스크립트 스타일에 익숙해지기 위해 Promise.then() 대신 async/await를 사용해 보세요.

---

마무리

이번 과제는 단순히 기능 구현에 그치는 것이 아니라, **백엔드와의 협업 과정에 익숙해지고 실전 준비를