Optimistic-UI

wooo·2023년 5월 7일
0

게시판의 좋아요를 누르면 환경에 따라 좋아요의 수가 올라가는 속도가 다르다. 그 이유는 아래의 그림을 통해서 자세히 알 수 있다.

좋아요 버튼을 누르게 되면 백엔드에 likeBoard라는 api에 요청을 보내게 되고, 백엔드는 DB에 요청을 하게 된다.
그럼 DB는 좋아요의 수를 올려두고 올린 좋아요 수를 응답한다. 해당 응답을 백엔드는 다시 브라우저에 응답해주는 것이다.
그런데 느린 환경의 컴퓨터, 혹은 백엔드 컴퓨터가 굉장히 먼 곳에 있다면 해당 과정이 굉장히 지연될 수 있다.
이러한 불상사를 막기 위해 옵티미스틱 UI를 사용한다.

옵티미스틱 UI란?

요청이 서버에 도달하기도 전에 화면의 값을 바꿔버리는 것이다.

즉, likeBoard를 요청하기도 전에 화면에 13으로 바꿔버리고 계속해서 요청을 보내는 것이다.
그리고 요청이 성공하고 나면 13이 응답으로 돌아올텐데 그때 다시 화면을 업데이트 한다 하지만 이미 옵티미스틱 UI로 13을 그려줬기 때문에 유저가 보기에는 똑같다.

만일 중간에 네트워크 문제나 다른 이유로 실패하게 된다면, 이전의 값을 응답으로 보내주고 이전의 값을 화면에 업데이트 해준다.

옵티미스틱 UI를 사용해야 할 곳과 사용하지 말아야 할 곳
→ 옵티미스틱 UI는 보통 실패 확률이 낮고 틀려도 괜찮은 중요하지 않은 데이터를 보여주실때 사용한다.
📌 데이터가 굉장히 중요하고 안정성이 필요할때는 옵티미스틱을 사용하시면 안된다.
예를들면, 결제후 잔여 금액같은 경우엔 옵티미스틱 UI를 사용하시면 안된다.

옵티미스틱 UI를 적용하면 컴퓨터 환경에 상관없이 유저 모두가 빠른 서비스를 이용하는 것 같이 속일 수 있다. 따라서 유저의 만족도를 상당히 올릴 수 있다. 그렇기 때문에 데이터가 중요하지 않고 실패할 확률이 없다면 옵티미스틱 UI를 사용해주는게 좋다!

0개의 댓글