# Optimistic UI

creyon0215

Index 성능최적화 - react developer tools memoization(useCallback,useMemo) map,memo(key-uuid?) CRP(Critical Rendering Path) Reflow, Repaint prefetch, preloa

mscwrd02

웹 페이지에서 검색 결과를 탐색할 때, 처음에는 일정한 수의 검색결과만 표시되다가, 스크롤을 끝까지 내리면, 새로운 검색결과들이 로딩되는 것을 본적이 있을 것이다. SWR을 사용해서 이러한 Infinite Scrolling을 구현하는 방법을 살펴보자

zoo0

Optimistic-UI Optimistic-UI란 실제로 성능을 높여서 속도가 빨라지는 것이 아니라 빨라보이도록 눈속임을 하는 것을 말한다. API요청을 보내놓고 결과를 받기 전에 이미 브라우저에서는 바뀐 값을 그려준다. 그리고 결과가 돌아오면 화면을 다시 그려준다.

yj05037

지난번까지는 리펙토링을 하여 좀 더 최적화해 사용자에게 빨리 보여주는 방법을 사용해보았다. 그러나 더이상 최적화할 수 없을 경우에는 시각적으로 속이는 방법을 사용할 수도 있다. 옵티미스틱-ui 라는 것을 사용한다. 긍정적 ui라고도 한다는 말을 보고 처음에는 의아해했

badassong

Optimistic-UI - 낙관적 UI optimistic UI는 실패 시 좋지 못한 UX가 된다. 99% 성공을 확신 할 수 있을 때 사용하는 것이 좋다. Opengraph Scraping? Crawling? 다른 사이트 정보를 가져오는 것을 스크래핑, 크롤링

namyeji

좋아요를 클릭하면 원래는 많은 단계가 있지만 아폴로캐시에서 미리 다음 숫자를 생각해서 미리 보여주고 요청을 하고 데이터베이스에서 변경을 한다. 쉽게말해 좋아요가 8이 있다면 눌렀을때 9가 되겠지 하고 예상해서 누르면 9로 바뀌게 먼저 보여주는 것이다. 만약 백엔드나 디

namyeji

Optimistic-UI란?낙관적 UI는 UI에 바쁜 스피너를 표시하지 않고 애플리케이션이 서버에서 데이터를 변경하는 사용자 상호 작용에 즉시 응답하는 것처럼 느끼게 하는 패턴입니다. 처리할 서버로 만드는 데 시간이 좀 걸리더라도 UI에 충분한 정보를 보내서 가짜로 보

yeeunk90

게시글의 '좋아요'버튼을 누를 때, 서버에 도달하기 전에 화면의 값을 바꿔버리는 옵티미스틱 UI를 사용하게 된다.API요청을 하기도 전에 화면상에서 값을 바꿔버리고 계속해서 요청을 보내는 것이다.❗️옵티미스틱UI는 보통 실패 확률이 낮고 만일 실패하더라도, 큰 상관이

azerose

밸~하!밸로그 여러분 안녕하세요벌써 34번째 글이네요!그럼 오늘도 시작해볼까요!오늘의 주제는 바로 optimistic-ui입니다! 추가로 scraping과 crawling에대해서 살짝 맛보기로 알아보겠습니다optimistic-ui란 무엇일까요??쉽게말해 optimist

yeeunit22

옵티미스틱 UI? >요청이 서버에 도달하기 전에 화면의 값을 마치 있는 것처럼 바꿔버리는 것 즉 거의 성공이 확실한 요청(뮤테이션/퀘리)에 대하여, 문제없이 데이터를 받아오길 기대하고 기다리며 유저의 화면에는 이미 마치 성공한 것처럼 화면에 보여주는 것이다. 만약

songji

사용자의 요청이 서버에 도달하기 전에 화면의 값을 바꾸어 놓아 사용자가 체감하는 브라우저의 속도가 보다 빠르게 만든 것이다. 화면에서의 값은 미리 바꾸어 두고 서버에 요청을 계속 보내어 응답이 돌아오면 화면을 다시 업데이트한다. 만약에 서버에서 응답을 받는 것을 실패했

rlaclgns321

기존의 UI 인터랙션 우리가 자유게시판 상세보기에서 '좋아요👍' 버튼을 누를 때의 동작을 생각해봅시다. > 사용자가 👍 버튼을 누릅니다. onClick 함수가 실행되고 서버에 mutation 요청을 보내게 됩니다. 서버에 보낸 요청이 완료될 때까지 await으로 기다립니다. 완료됐다는 응답이 오면 이제 refetch를 해서 좋아요 갯수 데이터를 다시 ...

songinho96

optimistic-UI 는 낙관적 UI라고 불린다.예를 들어 좋아요 버튼을 누를때원래 요청을 보내면 백엔드에서 DB로 가서 데이터를 받아와야하지만요청보내고 성공 하겠다 가정하고 바로 cashState를 바꿔서 업데이트를 한다.하지만, 막 사용하면 안된다. optimi

rlatjsdn147

Optimistic UI란 특정 요청이 성공할 것이라는 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다. 어떠한 요청이 아주 높은 확률로 성공한다는 보장이 있을 때, 그리고 그 요청이 너무 늦지 않은 시간 안에 응답이 온다는 보장이 있을 때 사용할 수 있는

hmds1606

우리는 데이터를 받아올 때 백엔드에 api를 요청하고 DB에 가서 받아와서 화면에 그려주는 단계를 거치게 되는데Optimistic-UI는 데이터를 받아오는 것을 기다리지 않고 어차피 성공할 것이라고 판단하여 바로 캐시스테이트에 업데이트를 하는 것을 말한다.Optimis

ssalpyo

우리가 자유게시판에서 좋아요 버튼을 누를 때 환경에 따라 좋아요의 수가 올라가는 속도가 다르다.좋아요 버튼을 누르게 되면 백엔드에 likeBoard라는 api에 요청을 보내게 되고, 백엔드는 DB에 요청을 하게 된다.그럼 DB는 좋아요의 수를 올려두고 올린 좋아요 수를

huiju

Algorithm Self Study, Optimistic-UI, SSR, SEO, Algorithm Class, self Study

sehee-xx

freeboard에서 구현했던 좋아요 기능을 생각해보자. 사용자가 좋아요 버튼을 누르다. onClick 함수가 실행되고 서버에 mutation 요청을 보낸다. 서버에 보낸 요청이 완료될 때까지 await으로 기다린다. 완료가 되었으면 refetch로 좋아요 갯수 데이터를 다시 가져온다. 가져온 데이터를 화면에 보여준다. 단순히 좋아요를 하나 늘려주는...

attosisss_

자유게시판의 좋아요 기능을 클릭했을시의 동작을 살펴보면 아래와 같다.사용자가 좋아요 버튼을 누른다.onClick 함수가 실행되고 서버에 mutation 요청을 보낸다.서버에 보낸 요청이 완료될 때까지 await으로 기다린다.완료가 되었으면 refetch로 좋아요 갯수

mango1004

단어 그대로 낙관적으로 생각하는 UI이다. 서버로부터 받는 응답이 대부분 오류가 나지 않을 것이다, 성공적일 것이다라고 가정하고 사용자에게 성공했을 때의 결과를 바로 보여주는 것이다간단한 예시사용자가 👍 버튼을 누른다.좋아요 갯수가 1개 증가한 UI를 바로 보여준다.