[FE] Optimistic Update란?

🗣️ Optimistic Update에 대해 설명해주세요.

• 의도: UX에도 신경써서 개발하고 있는지 확인하기 위한 질문

• 팁

  • 자신의 프로젝트에 적용한 경험을 자세히 설명한다.
  • 업데이트 과정을 상세히 순서대로 말한다.

• 나의 답안

  Optimistic Update는 사용자에게 변화된 UI를 빠르게 보여주기 위한 업데이트 방식입니다.
  사용자가 좋아요나 북마크 등을 클릭하는 상호작용을 보였을 때, 그 상호작용을 취소하지 않을거라는 가정 하에 우선 UI를 업데이트 시킴으로써 UX를 향상시킬 수 있습니다.
  이 기능은 취소하는 상호작용에 대비해서 이전 상태를 저장해 놓기 때문에, 사용자가 좋아요 버튼을 눌렀다가 다시 눌러서 좋아요를 취소하는 상호작용을 보이면 다시 원래 상태로 빠르게 되돌려 놓을 수 있습니다.

• 제공된 답안 (모범 답안)

  Optimistic Update는 이름에서 유추할 수 있다시피 서버에 요청이 잘 갔을거라고 긍정적으로 생각하여 업데이트하는 방식입니다.

  보통은 서버에 업데이트 요청을 보내고, 클라이언트는 서버의 응답을 받아 새로운 정보를 화면에 렌더링합니다.
  하지만 이 방법은 유저가 변경 결과를 보는 데에 시간이 걸린다는 단점이 있습니다.
  이럴 때 사용자 경험을 개선하기 위해 서버 응답이 오기 전에 미리 응답 상태를 예측하여 화면에 적용하는 방법이 바로 Optimistic Update입니다.

  시간이 걸린다는 단점을 해결하기 위해 고려된 방법인만큼 네트워크가 느린 환경에서 유용하다는 장점이 있으나, 서버와의 데이터가 다를 수 있다는 단점이 있으므로 이를 해결하기 위해 서버와 클라이언트 간에 상태가 같은지 최종 확인 과정을 거쳐야만 합니다.

---

📝 개념 정리

• Optimistic Update는 사용자 경험을 향상시키기 위해 자주 사용되는 기술이다.

• 이는 클라이언트 측 애플리케이션에서 데이터 변경을 서버에 요청하는 동시에, 서버의 응답을 기다리지 않고 즉시 사용자 인터페이스(UI)를 업데이트하는 방식이다.

• 이 방식은 서버 응답 지연으로 인한 UI 반응성을 높이는 데 유용하다.

🌟 Optimistic Update의 개념

1. 정의

   • 서버의 응답을 기다리지 않고, 클라이언트가 데이터가 성공적으로 업데이트될 것이라고 가정하고 UI를 즉시 업데이트하는 방식
   • 만약 서버에서 오류가 발생하면, 클라이언트는 UI를 원래 상태로 되돌린다.

2. 목적

   • 사용자 경험(UX) 개선 : 서버 응답 지연 없이 빠른 피드백을 제공함으로써 사용자 경험을 향상시킨다.
   • UI 반응성 향상 : 사용자가 느끼는 애플리케이션의 반응성을 높인다.

---

🌟 Optimistic Update의 작동 방식

1. 클라이언트 요청

   • 사용자가 데이터 변경(예: 추가, 삭제, 수정)을 요청한다.
   • 클라이언트는 변경 요청을 서버에 비동기적으로 전송한다.

2. UI 즉시 업데이트

   • 서버 응답을 기다리지 않고, 클라이언트는 UI를 즉시 변경된 상태로 업데이트한다.
   • 이 변경은 일시적인 것으로, 서버의 최종 응답에 따라 변경될 수 있다.

3. 서버 응답

   • 서버는 클라이언트의 요청을 처리하고, 결과(성공 또는 실패)를 응답한다.

4. 응답 처리

   • 성공 시 : UI는 이미 업데이트된 상태를 유지한다.
   • 실패 시 : 클라이언트는 UI를 원래 상태로 되돌리거나, 오류 메시지를 표시한다.

• 예시

  1. 게시판 댓글 작성

     • 사용자가 댓글을 작성하고 "제출" 버튼을 누르면, 댓글이 즉시 화면에 표시된다.
     • 클라이언트는 서버에 댓글 추가 요청을 보낸다.
     • 서버가 요청을 처리하여 성공 응답을 보내면, 화면에 표시된 댓글은 그대로 유지된다.
     • 만약 서버에서 오류가 발생하면, 클라이언트는 화면에서 댓글을 제거하고 사용자에게 오류 메시지를 표시한다.

  2. 쇼핑몰 장바구니 업데이트

     • 사용자가 장바구니에 아이템을 추가하면, 아이템이 즉시 장바구니에 표시된다.
     • 클라이언트는 서버에 장바구니 업데이트 요청을 보낸다.
     • 서버가 요청을 처리하여 성공 응답을 보내면, 장바구니 상태는 그대로 유지된다.
     • 만약 서버에서 오류가 발생하면, 클라이언트는 장바구니에서 해당 아이템을 제거하고 사용자에게 오류 메시지를 표시한다.

---

🌟 Optimistic Update의 장점

1. 사용자 경험 개선 : 서버 응답을 기다리지 않고 즉시 피드백을 제공함으로써, 사용자는 애플리케이션이 빠르고 반응성이 높다고 느낀다.

2. UI 반응성 향상 : 비동기 요청과 상관없이 UI를 즉시 업데이트하므로, 사용자가 느끼는 지연을 최소화한다.

3. 사용자 참여 증가 : 빠른 피드백과 반응성 덕분에 사용자가 애플리케이션을 더 자주 사용하고, 더 많은 상호작용을 하게 된다.

---

🌟 Optimistic Update의 단점

1. 데이터 일관성 문제 : 서버 응답이 실패하면, UI를 원래 상태로 되돌려야 하는데, 이 과정에서 데이터 일관성 문제가 발생할 수 있다.

2. 오류 처리 : 서버에서 오류가 발생했을 때, 클라이언트가 이를 적절히 처리하고 UI를 되돌리는 로직이 필요하다. 이는 추가적인 복잡성을 야기할 수 있다.

3. 경쟁 조건 : 동시에 여러 사용자가 데이터를 변경할 때, 충돌이나 경합 조건이 발생할 수 있다. 이를 처리하기 위한 추가적인 매커니즘이 필요할 수 있다.

---

🌟 Optimistic Update 구현 시 고려사항

1. 상태 관리

   • 클라이언트는 서버의 응답 상태(성공 또는 실패)를 기반으로 UI 상태를 관리해야 한다.
   • 상태 관리 라이브러리(Redux, MobX 등)를 활용하면 상태 관리가 더 쉬워질 수 있다.

2. 비동기 요청 관리

   • 비동기 요청의 상태(로딩, 성공, 실패)를 추적하고, 이에 따라 UI를 업데이트하는 로직을 구현해야 한다.

3. 사용자 피드백

   • 서버 응답이 지연되거나 실패할 때, 사용자에게 명확한 피드백을 제공하여 혼란을 줄여야 한다.