To Do App 만들기

• user api 를 통해 사용자 목록을 그리고, 클릭하면 해당 사용자의 todo 목록을 가져오게 한다.
• 할 일을 추가하면 화면에 추가되고, API 호출을 통해 서버에도 추가하게 한다.
• TODO 를 추가하고 삭제하는 동안 낙관적 업데이트를 사용한다.
• 서버와 통신하는 동안 서버와 통신중임을 알리는 UI 처리를 한다.

TodoList 컴포넌트

• 특정 유저의 todo list 불러오기
• 추가 / 제거
• 클릭 시, 완료 / 완료 취소 처리하기

낙관적 업데이트

사용자 입력을 받으면 바로 화면을 먼저 갱신하는 업데이트 방법

• 서버에서 데이터를 받아서 렌더링 하기 전, 클라이언트측에서 미리 렌더링을 해서 화면을 먼저 그린 후 서버에서 정보를 받아와서 다시 렌더링 하는 업데이트 방식
• 서버와의 통신이 성공할 것이라고 낙관적으로 보고 서버에서 API 를 호출함과 동시에 현재 state 에 요청을 보낸 값을 추가하고, 서버에서 정보를 받아오면 다시 렌더링하는 방식
• 사용자 중심의 업데이트 방법으로, 사용자의 네트워크 환경이나 서버 환경이 좋지 못할 경우의 사용자의 불편을 해결할 수 있다.
• 하지만, 낙관적 업데이트 방식을 사용했을 때, 서버와 통신중일 때 페이지를 나가는 등의 동작이 일어나게 되면 클라이언트 측과 서버측의 데이터가 달라질 수 있다는 문제점이 존재한다.

---

회고

서버에 데이터를 보내는 것도 실제로 처음해보는 개념이었기도 하였고, todo list 작성 내용을 서버에 보낸다고 해서 끝이 아니라 보낸 데이터를 다시 받아와서 렌더링해야 클라이언트 측에서도 보이기 때문에 간단한 todo list 라도 처리해야 할 부분이 많다는 것을 느낄 수 있었다.

서버와의 통신이 안될 경우에는 따로 처리를 해줘야 하겠지만, 상태에 따라 사용자가 느낄 만큼의 지연을 가질 경우에 어떻게 처리해야 할지에는 잘 생각되지 않았는데 배워갈수록 더 많은 배울 것들이 생기는구나 하는 생각이 들었다..