[8주차] Team IPX 과제 제출합니다.

[GirimNam]

🔗배포링크
🎨참고 피그마
💻api 명세서
🗒️발표자료

이번주 소감

기림

• 세오스 과제 중 처음으로 api 연동이 필요한 과제라 이전 과제들보다 더 신경써서 한 것 같습니다. 특히나 민서님이 더 많은 페이지 퍼블리싱을 맡아주셔서 저는 api 연동을 좀 더 많이 맡았는데 next.js 환경에서 api 연동은 처음이라 axios와 fetch 중 어떤 방법을 사용해야하나 고민을 했습니다. axios 인터셉터를 활용하면 토큰 재발급 로직을 한 곳에서 처리할 수 있고, _retry 플래그로 무한루프도 방지할 수 있어 axios를 선택했습니다. 이러한 api 연동을 통해 프로젝트가 구체화되어가는게 재밌었습니다.
• 다만 한가지 문제는 투표 완료 시 다시 voting을 클릭한다면, 투표를 하는 페이지(voting/leader나 voting/demoday)가 아니라 결과 페이지(voting/result)로 이동하도록 구현하였고, 이를 위해 localstorage를 사용했습니다. 하지만 다른 기기에서 로그인해 voting를 클릭한다면 다시 투표를 하는 페이지(voting/leader나 voting/demoday)로 이동한다는 문제가 발생했습니다. 하지만 이를 너무 늦게 알게되어 api 관련 수정을 하기보다는 이런 상황이 발생한다면 에러 메시지를 화면에 띄우지 않고 voting/result로 바로 push하도록 처리하였습니다. 이를 통해 localhost에서만 반복적으로 test하는 것이 아니라 배포 환경을 적극적으로 이용해야함을 다시 한번 깨달았고 실제 프로젝트에서는 api 명세서를 읽고 발생 가능한 경우를 최대한 생각하며 이와 관련하여 새롭게 규칙을 만들어야겠다고 생각했습니다.

민서

• 이번 과제에서는 여러 페이지 퍼블리싱과 함께 API 연동된 흐름이 화면에서 자연스럽게 보이도록 작업했습니다. 단순히 정적인 화면을 만드는 것보다 로그인, 회원가입, 투표, 결과 확인처럼 사용자의 행동에 따라 페이지가 이어지는 구조를 구현해야 해서 더 신경 써서 작업했습니다.
• 특히 API 응답에 따라 에러 메시지를 보여주거나 투표 완료 후 결과 페이지로 이동하는 흐름을 맞추는 과정에서 프론트에서도 예외 상황을 많이 고려해야 한다는 것을 느꼈습니다. 이번 과제를 통해 화면 구현뿐만 아니라 실제 데이터와 연결되는 서비스 흐름을 생각하며 개발하는 경험을 할 수 있었습니다.