안녕하세요! 프론트엔드 운영진 원채영입니다. 🍀
벌써 마지막 과제에 도달했네요. 이번 스터디의 마지막 과제는 특별히 백엔드 팀원들과 함께하는 협업 과제로 준비했습니다!
현대 웹 개발에서는 REST API 기반의 데이터 통신이 핵심이 되면서, 프론트엔드와 백엔드 간의 협업이 더욱 중요해지고 있습니다. 백엔드는 API를 통해 데이터를 제공하고, 프론트엔드는 이를 바탕으로 사용자 경험을 구현합니다. 따라서 API를 이해하고 활용하는 능력, 그리고 백엔드 개발자와 원활하게 소통하는 경험은 프론트엔드 개발자에게 꼭 필요한 역량입니다.
이번 과제는 앞으로 진행될 팀 프로젝트에 앞서, 실제 협업 방식을 미리 경험해보는 연습 과정이라고 생각해주시면 좋을 것 같습니다. Next.js를 활용해 투표 기능이 포함된 애플리케이션을 제작하며, 백엔드와의 소통 방식, 역할 분담, 데이터 흐름 등을 직접 경험해보세요!
이번 과제를 통해 단순히 기능 구현을 넘어, 함께 서비스를 만들어가는 협업 경험까지 얻어가셨으면 좋겠습니다.
여러분의 멋진 결과물을 기대하겠습니다. 마지막 과제까지 모두 화이팅입니다! 🔥
- REST API를 활용하여 서버와의 통신 방식을 이해합니다.
- JavaScript의 비동기 처리 방식(
async/await, Promise)을 익힙니다. - API 문서를 바탕으로 백엔드와 소통하는 방법을 학습합니다.
- 팀 내 협업을 통해 효율적인 역할 분담을 고민하고 적용합니다.
- 2026년 5월 16일 토요일까지 1차 필수 구현 사항이 적용된 중간 결과물을 제출해주세요.
- 프로젝트 세팅
- Next.js의 특성을 고려하여 효과적인 폴더 구조를 고민해 봅니다.
- API 통신, 스타일링, 전역 상태 관리 및 기타 라이브러리 등을 팀원과 상의하여 세팅합니다.
- Github organization을 사용합니다.
- 퍼블리싱
- 프로젝트에 필요한 모든 화면을 퍼블리싱합니다.
- 다양한 디바이스에서 최적의 사용자 경험을 제공하기 위해 반응형 디자인을 적용합니다.
- 로그인 기능
- 사용자는 아이디와 비밀번호를 입력하여 로그인할 수 있습니다.
- 로그인 시 JWT를 통해 인증을 처리합니다.
- 아이디 또는 비밀번호가 틀렸을 경우, 에러 메시지를 표시합니다.
- 로그아웃 기능을 구현합니다.
- 백에서 서버 배포가 안 되었을 경우에는 다음 주로 넘겨도 괜찮습니다.
- 투표 기능
- 로그인한 사용자는 투표에 참여할 수 있습니다.
- 각 후보에 대한 투표 수를 실시간으로 확인할 수 있습니다.
- 사용자는 한 번만 투표할 수 있으며, 중복 투표를 방지합니다.
- 후보 목록 조회
- 모든 사용자는 후보자의 목록과 상세 정보를 확인할 수 있습니다.
- 후보자의 이름, 사진, 소개 등을 표시합니다.
- 투표 결과 조회
- 투표 종료 후, 모든 사용자는 최종 투표 결과를 확인할 수 있습니다.
- 각 후보자의 득표 수와 득표율을 시각적으로 표현합니다.
- 에러 처리
- 서버 오류, 네트워크 문제 등 다양한 에러 상황에 대한 처리를 구현합니다.
- 사용자에게 이해하기 쉬운 에러 메시지를 제공합니다.
다음의 리소스를 참고해 UI/UX를 개선해보세요:
이전 기수 과제
- API 요청 방식은 자유롭게 선택 가능 (예: Fetch API, axios 등).
- 최신 자바스크립트 스타일에 익숙해지기 위해
Promise.then()대신async/await를 사용해 보세요. - 페이지 접근 권한 관리와 로그인 상태 검증을 proxy.ts(구 middleware.ts)를 활용해 서버 단(Proxy)에서 미리 처리해 보세요! (참고자료: Next.js proxy)