[VanillaJS] TodoApp(2)_낙관적 업데이트

❗❗  데브코스 18일차 (08.25)

 

✏️ ~~ing

어제에 이어서 To do App을 만드는 실습을 계속 진행했다.

기본적인 fetch api, 데이터 흐름까지는 이해할 수 있었지만 세세한 디테일이나,

낙관적 업데이트, 비동기 처리가 엮기면서 조금씩 이해하기가 힘들어졌다.

강의를 수강 후에, 코드를 보며 컴포넌트 구조를 그려갔다. 

이제서야 눈에 보였다...

 

앞으로 두번 세번 봐야 진짜 내 것이 될 것같았다. 평소 React로만 개발을 했어서

VanillaJS로 개발하는 과정에서 많은 것을 배울 수 있었다. 

VanillaJS로 구현하다보니 state, props등의 관리가 다소 까다로웠고

왜 React가 나왔고 사용하는지 조금 더 깊게 이해할 수 있었다.

 

왜 사람들이 기본기를 중요시하고 또 과제테스트를 진행하는지 뼈져리게 느낄수 있었다.

 

❓ 낙관적 업데이트란

웹페이지에 있는 기능을 사용자가 사용시 값이 변함에 따라,

화면에 값이 바껴야하고, 또한 그 정보를 서버에게도 알려줘야한다. 이를 업데이트라고 표현하는데 

주로 optimistic(낙관적) vs pessimistic(비관적)  두가지 업데이트로 표현된다.

 

pessimistic(비관적) : 사용자 입력 -> 서버에 수정 요청 -> 성공 시 화면 갱신

주로 흔히 사용되는 방법이다.

optimistic(낙관적) : 사용자 입력 -> 바로 화면 갱신 -> 서버에 수정 요청 (만약 실패시 이전 상태로 화면 수정)

 

낙관적 업데이트는 서버와의 통신시 발생하는 시간차를 최대한 줄이기 위해 사용하는 방법으로,

페이스북에서 사용하는 좋아요 버튼과 같다.

좋아요를 누르고 서버에 전송되고 성공 시 화면이 갱신된다면,

좋아요 버튼은 한참 후에 수행될 것이다. 그래서 미리 사용자의 화면상에서는 업데이트를 수행하고,

서버에 해당 정보를 수행하는 것이다. 만약 요청이 실패된다면 위의 과정이 취소가 된다.

 

중요한 기능 결제시스템과 같은 업데이트는 비관적 업데이트로 진행해야하고, 

사용자의 경험을 존중하기 위해 실시간 업데이트가 필요하거나 요청이 실패되어도 위험도가 낮은 "좋아요" 버튼과 같은 것들은 낙관적 업데이트로 구현하는 것이 좋다.

 

만약 게시글 작성을 비관적 업데이트로 수행한다면 다음과 같은 문제가 생길 수 도 있다.

A가 게시글 작성 후, 완료 버튼 수행하면 이전 게시글 밑에 자신이 작성글이 화면에 보이게 된다.

하지만 동시에 B가 게시글을 작성하고 A보다 B가 서버에 먼저 업데이트가 된다면,

A가 새로고침시 자신의 게시글이 뒤로 밀려날 수 도 있다.

따라서 기능에 따라 비관적, 낙관적을 적절히 사용하면 된다.

 

📖 학습한 내용

• VanillaJS
  • TodoApp실습(2)