노션에 올라온 학습 자료와 직접 구글링하면서 찾아보면서 원티드 프리온보딩 챌린지에서 작성한 코드의 리팩토링을 진행하였다. 전반적인 코드 작성은 80% 가량 마무리된 것 같다. 내가 이번에 Todo 앱을 만들면서 크게 고민했던 것은 화면 흐름을 고려한 좋은 UX
인데, 이에 대해 정리해보았다.
Todo를 관리하는 기능을 제공하는 앱이기 때문에, 하나의 앱에서 여러가지 페이지를 이동하기 위한 홈 페이지(또는 메인 페이지)를 따로 만들 필요가 없다고 생각하였다.
=> 유저가 접속했을 때 JWT 쿠키를 갖고 있다면, Todo 페이지로 Redirect, 갖고 있지 않다면 Login 페이지로 Redirect 하도록 구현하였다.
데이터를 수정, 삭제하는 경우 유저의 확인을 한 번 더 받아야된다고 생각했다.
=> PUT, DELETE에 해당하는 HTTP 요청을 서버에 보내기 전에 유저에게 한 번 더 확인을 받도록 구현하였다.
한 페이지에서 Todo 앱의 모든 기능을 사용할 수 있도록 구현해야 좋은 UX를 제공할 수 있다고 생각했다.
=> Redux를 이용해 전역 상태를 구현하여 유저가 발생시킨 Event에 따라 자연스러운 화면 전환이 일어날 수 있도록 구현하였다.
유저에게 서버의 정보를 적절한 상황에서 Update 해주어야 한다고 생각했다.
=> React Query를 이용해서 유저가 새로운 Todo를 추가했을 때, 방금 자신이 작성한 Todo를 Todo 목록에서 확인할 수 있도록 서버에 Todo를 받아오는 요청을 자동으로 다시 보낼 수 있도록 구현하였다.
이번 주에는 원티드 프리온보딩 챌린지에서 작성한 코드와 개인 프로젝트 PFL의 코드 리팩토링 & 배포 & 기술소개서 작성을 완료할 예정이다.
모든 개발자를 위한 HTTP 웹 기본 지식
수강