# Optimistic UI

17개의 포스트

optimistic-ui

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

3일 전
·
0개의 댓글

Optimistic UI

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

4일 전
·
0개의 댓글
post-thumbnail

Day-33 Optimistic-UI, 서버사이드렌더링(Scraping, Crawling, SEO, SSG, SSR)

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

2022년 6월 23일
·
0개의 댓글
post-thumbnail

optimistic-ui

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

2022년 6월 23일
·
0개의 댓글
post-thumbnail

33)

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

2022년 6월 23일
·
0개의 댓글
post-thumbnail

optimistic-ui

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

2022년 6월 22일
·
0개의 댓글

optimistic-UI

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

2022년 5월 1일
·
0개의 댓글

Optimistic - UI

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

2022년 5월 1일
·
0개의 댓글

Optimistic-UI /SSR

Optimistic-UI Open-Graph /SSR SEO Optimistic-UI 좋아요를 올리는 API가 있다 해보자. 작동할 때 브라우저에 버튼을 클릭하는 동작을 통해 백엔드 서버로 데이터를 전송하고 백엔드 서버는 DB에 저장을 한 후 다시 백엔드를 거쳐 브

2022년 4월 30일
·
0개의 댓글

Optimistic-UI

우리가 웹사이트 게시판에서 👍 "따봉" 버튼을 누를 때의 동작을 생각해보자.사용자가 👍 버튼을 누르면 onClick 함수가 실행되고 서버에 mutation 요청을 보낸다.서버에 보낸 요청이 완료될 때까지 await으로 기다리고,완료됐다는 응답이 오면 refetch를

2022년 4월 30일
·
0개의 댓글
post-thumbnail

Optimistic-UI

예를 들어 Optimistic을 사용하게된다면 좋아요 버튼을 누를때 좋아요 횟수가 올라가는 과정은 브라우저에서 글로벌스테이트에 좋아요 수를 2로 미리 올리고 백엔드에 요청 후 DB에 저장하고 확인한다.좋아요의 경우 실패할 확률이 지극히 적고 실패하더라도 리스크가 크지

2022년 4월 30일
·
0개의 댓글
post-thumbnail

optimistic-ui

옵티미스틱UI란 단어 그대로 낙관적인 UI이다. 요청 결과를 오류가 나지 않을 것을 미리 예상해서 사용자에게 성공 시 결과를 바로 보여주는 것(실제 요청결과가 나오기 전에)이다. 이는 사용자 경험 향상을 위한 기법 중 하나로, 요청이 올 때까지 기다리는 대신 우선 UI

2022년 4월 28일
·
0개의 댓글

Optimistic-UI

느리면 눈속임이라도?? 좋아요버튼 누르면 좋아요 숫자 증가 백엔드에 데이터 보내고 받아오기, 리페치하기 해야함 -> 느림 먼저 숫자만 올려놓고 DB에 보내고 받아와서 일치하면 그대로 두는 방법 실패할 가능성이 매우 낮은 경우 이렇게 눈속임하면 빠름(가짜 좋아요를 만듦) -> Optimistic-UI response를 두번 받음 한번은 가짜, 한번은 진...

2022년 4월 28일
·
0개의 댓글
post-thumbnail

33일) 사이트 만들고, 기능연결만 되면 그게 개발자야? 찐 프론트엔드는 성능을 높이고 ! 최대한 빨리빨리! 과부하는 없도록! 최적화! Optimistic-UI/ SSR/ SEO CODE CAMP FE 6기

\-> 실패해도 큰 영향이 없는 데이터, 실패할 가능성이 많이 없는 데이터에만 사용하자 !실제로 99% 성공확률일때만 쓰세요! 라고 나와있다 (여러테이블에서 사용하지 않는 데이터일수록 Good)게시물 좋아요 기능을 생각해 봤을때, 게시물 좋아요를 누르고 다시 fetch

2022년 4월 28일
·
0개의 댓글

Optimistic UI

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

2022년 3월 6일
·
0개의 댓글

Day 34

Graphql의 실체 graphql도 사실은 Rest-api다??? rest-api사용할때를 생각해보자 게시글 조회 : axios.get(API주소) 게시물 등록 : axios.past(API주소, {데이터}) 그래서 api주소를 우리는 endpoint라고 불러

2021년 12월 16일
·
0개의 댓글

[TIL] 10월 21일 Optimistic UI

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

2021년 10월 23일
·
0개의 댓글