좋아요는 옵티미스틱 업데이트로 구현했습니다.
우리는 스크롤을 밑으로 휙휙 넘기며 마음에 드는 포스트가 있다면 좋아요를 누르고 금방 다른 포스트로 넘어가곤 합니다. 그런데 만약 좋아요를 누를 때마다 1~2초 로딩 시간이 걸린다면 사용자 입장에선 매우 답답할 것입니다.
이것을 해결하기 위해 옵티미스틱 업데이트를 사용했습니다. 옵티미스틱 업데이트는 좋아요 기능과 같이 유저에게 빠른 피드백을 제공해야 하는 경우에 사용합니다. 간단히 말하자면 서버로부터의 리스폰스를 기다리지 않고 유저에게 바로 낙관적인 피드백을 주는 것이 옵티미스틱 업데이트인데요. 서버가 제대로 동작하는 걸 낙관적으로 기대하는 것입니다. 예를 들어 '좋아요' 버튼을 눌렀을 때 실제로 서버에 반영이 제대로 되었는지를 확인하지 않고 유저에게 바로 '좋아요' 버튼을 누른 것처럼 버튼을 활성화해서 보여주는 거죠.
이렇게 해도 괜찮은 이유는 리퀘스트는 보통 99% 이상의 확률로 서버에 제대로 반영될 것이고, 또한 만에 하나 중간에 에러가 발생한다고 해도 치명적인 결함이 아니기 때문입니다. 아마 경험하셨을 수도 있겠지만, 내가 좋아요를 눌렀던 포스트를 나중에 봤을 때 좋아요가 안 돼 있다면 보통은 "어라? 내가 이거 좋아요 안 눌렀었나?"하면서 다시 좋아요를 누르면 그만이기 때문입니다. 따라서 이러한 상황에서는 매번 서버의 리스폰스를 기다리느라 유저에게 답답함을 주기보다는 옵티미스틱 업데이트를 이용해 빠른 피드백을 제공하는 것이 더 좋습니다.
옵티미스틱 업데이트로 좋아요를 구현하는 방법
UI 상태 즉시 업데이트:
사용자가 좋아요 버튼을 클릭하면, 서버 응답을 기다리지 않고 클라이언트에서 즉시 UI를 업데이트합니다. 예를 들어, 좋아요 수를 1 증가시키고, 좋아요 버튼의 상태를 변경합니다(클릭된 상태로 표시).
비동기 서버 요청 보내기:
동시에, 좋아요 요청을 서버에 비동기적으로 보냅니다. 이 요청은 해당 피드 아이템의 좋아요 수를 증가시키도록 서버에 알려줍니다.
서버 응답 처리:
서버 요청이 성공적으로 완료되면, 이미 UI가 업데이트되어 있으므로 추가 작업이 필요하지 않습니다.
만약 서버 요청이 실패하면, 클라이언트는 이전 상태로 UI를 롤백합니다. 즉, 좋아요 수를 원래대로 감소시키고, 좋아요 버튼을 클릭되지 않은 상태로 복원합니다.
📎 질문
피드 좋아요를 어떻게 구현했나요? or 옵티미스틱 업데이트에 대해 아시나요?
✏ 구술 답변 키워드
✏ 서술 답변
좋아요는 옵티미스틱 업데이트로 구현했습니다. 우리는 스크롤을 밑으로 휙휙 넘기며 마음에 드는 포스트가 있다면 좋아요를 누르고 금방 다른 포스트로 넘어가곤 합니다. 그런데 만약 좋아요를 누를 때마다 1~2초 로딩 시간이 걸린다면 사용자 입장에선 매우 답답할 것입니다.
이것을 해결하기 위해 옵티미스틱 업데이트를 사용했습니다. 옵티미스틱 업데이트는 좋아요 기능과 같이 유저에게 빠른 피드백을 제공해야 하는 경우에 사용합니다. 간단히 말하자면 서버로부터의 리스폰스를 기다리지 않고 유저에게 바로 낙관적인 피드백을 주는 것이 옵티미스틱 업데이트인데요. 서버가 제대로 동작하는 걸 낙관적으로 기대하는 것입니다. 예를 들어 '좋아요' 버튼을 눌렀을 때 실제로 서버에 반영이 제대로 되었는지를 확인하지 않고 유저에게 바로 '좋아요' 버튼을 누른 것처럼 버튼을 활성화해서 보여주는 거죠.
이렇게 해도 괜찮은 이유는 리퀘스트는 보통 99% 이상의 확률로 서버에 제대로 반영될 것이고, 또한 만에 하나 중간에 에러가 발생한다고 해도 치명적인 결함이 아니기 때문입니다. 아마 경험하셨을 수도 있겠지만, 내가 좋아요를 눌렀던 포스트를 나중에 봤을 때 좋아요가 안 돼 있다면 보통은 "어라? 내가 이거 좋아요 안 눌렀었나?"하면서 다시 좋아요를 누르면 그만이기 때문입니다. 따라서 이러한 상황에서는 매번 서버의 리스폰스를 기다리느라 유저에게 답답함을 주기보다는 옵티미스틱 업데이트를 이용해 빠른 피드백을 제공하는 것이 더 좋습니다.
옵티미스틱 업데이트로 좋아요를 구현하는 방법
비동기 서버 요청 보내기: 동시에, 좋아요 요청을 서버에 비동기적으로 보냅니다. 이 요청은 해당 피드 아이템의 좋아요 수를 증가시키도록 서버에 알려줍니다.
서버 응답 처리: 서버 요청이 성공적으로 완료되면, 이미 UI가 업데이트되어 있으므로 추가 작업이 필요하지 않습니다. 만약 서버 요청이 실패하면, 클라이언트는 이전 상태로 UI를 롤백합니다. 즉, 좋아요 수를 원래대로 감소시키고, 좋아요 버튼을 클릭되지 않은 상태로 복원합니다.