태그 목록
- 전체보기(72)
- JS 기본 상식(5)
- Props(2)
- callback(2)
- promise(2)
- http(2)
- destructuring assignment(2)
- REST API(2)
- redux(1)
- deep copy(1)
- react router(1)
- exception(1)
- session(1)
- container(1)
- React 상태관리(1)
- scope(1)
- git(1)
- 백틱(1)
- typescript(1)
- ci(1)
- Immutable(1)
- undefined(1)
- fp(1)
- virtual DOM(1)
- recursive function(1)
- 배열 구조 분해(1)
- 동기 실행(1)
- regular expression(1)
- 깊은 복사(1)
- keys(1)
- sql(1)
- import(1)
- every(1)
- swr(1)
- 비동기 실행(1)
- API(1)
- next router(1)
- Subject(1)
- OOP(1)
- catch(1)
- DNS(1)
- bind(1)
- 옵셔널체이닝(1)
- 객체 구조 분해(1)
- 호이스팅(1)
- 조건부 렌더링(1)
- React currying(1)
- mutable(1)
- assign(1)
- memoization(1)
- template strings(1)
- state prev(1)
- Class Component(1)
- try(1)
- 부모 컴포넌트(1)
- presentation(1)
- lazyload(1)
- 라우팅(1)
- MPA(1)
- Shallow Routing(1)
- preload(1)
- Browser’s Rendering Process(1)
- hosting(1)
- csrf(1)
- null(1)
- js closure(1)
- await(1)
- useEffect(1)
- event loop(1)
- js(1)
- 권한 분기(1)
- async(1)
- scheduler(1)
- atomic(1)
- JavaScript(1)
- export(1)
- &&(1)
- unflatten(1)
- pagination(1)
- domain(1)
- Debouncing(1)
- observable(1)
- React Component(1)
- fragments(1)
- hoisting(1)
- template literals(1)
- XSS(1)
- https(1)
- @media(1)
- Node(1)
- json(1)
- Optimistic UI(1)
- const(1)
- let(1)
- var(1)
- docker(1)
- 라우터(1)
- HTTP 상태 코드(1)
- filter(1)
- reactive programming(1)
- 동적라우팅(1)
- 삼항연산자(1)
- local storage(1)
- entries(1)
- values(1)
- 원시자료형(1)
- cd(1)
- useRef(1)
- 함수(1)
- this(1)
- Typescript Generic(1)
- DOM(1)
- 단방향 구조(1)
- rxjs(1)
- 참조자료형(1)
- Context API(1)
- reduce(1)
- CSR(1)
- SSR(1)
- Promise All(1)
- responsive design(1)
- HoF(1)
- infinite scroll(1)
- svn(1)
- flatten(1)
- 얕은 복사(1)
- shallow copy(1)
- Functional Component(1)
- spa(1)
- HoC(1)
- nosql(1)
- 차이점(1)
- github(1)
- JSX(1)
- cookie(1)
- ssg(1)
- GRAPHQL-API(1)
- 변수(1)
- State Lifting(1)
- Map(1)
- Token(1)
- state lifecycle(1)
- CRUD(1)
- 정적라우팅(1)
- Throttling(1)
- ES6(1)
- 자식 컴포넌트(1)
- JS V8 Engine(1)
- mobx(1)
전체보기 (72)JS 기본 상식(5)Props(2)callback(2)promise(2)http(2)destructuring assignment(2)REST API(2)redux(1)deep copy(1)react router(1)exception(1)session(1)container(1)React 상태관리(1)scope(1)git(1)백틱(1)typescript(1)ci(1)Immutable(1)undefined(1)fp(1)virtual DOM(1)recursive function(1)배열 구조 분해(1)동기 실행(1)regular expression(1)깊은 복사(1)keys(1)sql(1)import(1)every(1)swr(1)비동기 실행(1)API(1)next router(1)Subject(1)OOP(1)catch(1)DNS(1)bind(1)옵셔널체이닝(1)객체 구조 분해(1)호이스팅(1)조건부 렌더링(1)React currying(1)mutable(1)assign(1)memoization(1)template strings(1)state prev(1)Class Component(1)try(1)부모 컴포넌트(1)presentation(1)lazyload(1)라우팅(1)MPA(1)Shallow Routing(1)preload(1)Browser’s Rendering Process(1)hosting(1)csrf(1)null(1)js closure(1)await(1)useEffect(1)event loop(1)js(1)권한 분기(1)async(1)scheduler(1)atomic(1)JavaScript(1)export(1)&&(1)unflatten(1)pagination(1)domain(1)Debouncing(1)observable(1)React Component(1)fragments(1)hoisting(1)template literals(1)XSS(1)https(1)@media(1)Node(1)json(1)Optimistic UI(1)const(1)let(1)var(1)docker(1)라우터(1)HTTP 상태 코드(1)filter(1)reactive programming(1)동적라우팅(1)삼항연산자(1)local storage(1)entries(1)values(1)원시자료형(1)cd(1)useRef(1)함수(1)this(1)Typescript Generic(1)DOM(1)단방향 구조(1)rxjs(1)참조자료형(1)Context API(1)reduce(1)CSR(1)SSR(1)Promise All(1)responsive design(1)HoF(1)infinite scroll(1)svn(1)flatten(1)얕은 복사(1)shallow copy(1)Functional Component(1)spa(1)HoC(1)nosql(1)차이점(1)github(1)JSX(1)cookie(1)ssg(1)GRAPHQL-API(1)변수(1)State Lifting(1)Map(1)Token(1)state lifecycle(1)CRUD(1)정적라우팅(1)Throttling(1)ES6(1)자식 컴포넌트(1)JS V8 Engine(1)mobx(1)
optimistic-ui
freeboard에서 구현했던 좋아요 기능을 생각해보자. 사용자가 좋아요 버튼을 누르다. onClick 함수가 실행되고 서버에 mutation 요청을 보낸다. 서버에 보낸 요청이 완료될 때까지 await으로 기다린다. 완료가 되었으면 refetch로 좋아요 갯수 데이터를 다시 가져온다. 가져온 데이터를 화면에 보여준다. 단순히 좋아요를 하나 늘려주는...
2022년 6월 22일
·
0개의 댓글·
0