[Cache API] 프론트엔드의 자체적인 HTTP caching 구현 및 만료 일자 지정하기 (feat. 서버의 response headers
브라우저의 Cache Storage를 사용하여 프론트엔드에서 자체적으로 HTTP 캐싱과 생명주기 설정을 구현해보자.
velog.io
https://tech.kakaopay.com/post/skeleton-ui-idea/
무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? | 카카오페이 기술 블로그
카카오페이에서 프론트엔드 개발을 하며 스켈레톤 UI와 사용자 경험 향상에 대해 고민한 내용을 공유합니다.
tech.kakaopay.com
https://codesandbox.io/s/skeleton-vtn9m?from-embed=&file=/src/App.js
skeleton - CodeSandbox
skeleton by moonformeli using axios, react, react-dom, react-scripts
codesandbox.io
원래 프로젝트에 시도를 해보려다가 잠깐 머리가 아파져서 그만두었다. ㅎㅎㅎㅎ
사용자 경험 향상을 위해 사용자의 요청이 진행 중임을 표시하기 위해 스켈레톤 UI (스크린)을 사용하는 것.
UX 리서치 그룹 닐슨 노먼은 1초 이상 걸리는 작업에는 ProgressIndicator 을 사용하고, Precent-done-Animation은 10초 이상 걸리는 작업에 사용하라고 권유.
로드하는데 1초 미만이 소요되는 경우에는 오히려 애니메이션 추가가 주의산만해진다는 이야기입니다.
즉 오히려 빠른 로딩 시간에는 스켈레톤이 보여지지 않게끔 설정하는 기능을 추가한다면 더 좋은 사용자 경험을 줄 수 있다는 특징이 있다.
Suspense REACT
React Query의 Suspense Option 사용해서 데이터를 불러옴?
로딩이 시작 된 후 특정 시점까지는 스켈레톤을 보여주지 않기 위한 용도로 사용할 유틸성 컴포넌트를 하나 만든다.
- 컴포넌트의 랜더링을 어떤 작업이 끝날 때까지 잠시 중단시키고 다른 컴포넌트를 먼저 랜더링할 수 있다. 이를 활용해서 리액트에게 어떤 컴포넌트가 읽어야 할 데이터가 아직 준비되지 않았다고 알려주는 매커니즘.
REST API 나 GraphQl을 호출해서 네트워크를 통해 비동기 데이터를 가져오는 작업을 사용할 때 유용할 듯 합니다.
<Suspense fallback={<Loading/>}> <LaterComponent/> </Suspense>이런 식으로 Suspense 로 감싸주면 안의 LaterComponent 의 랜더링을 미루고 " 특정 작업이 끝날 때까지 " 는 fallback으로 넘긴 <Loading/> 컴포넌트를 보여주는 방식.
" 특정 작업"은 LaterComponent 안에 함수가 명시되어 있을 것 입니다.
Suspense 는 SSR 측면에서 더 확용 가능성이 무궁무진..
참고 : https://www.daleseo.com/react-suspense/
캐싱 처리하는 API 도 너무 신기하긴 하군요.
필터링 할 때마다 GET 요청이 되는데 이걸 성능 저하를 방지 하기 이해 일정 부분까지는 GET 요청안 하도록? 와... 어우 머리 아파.
'Programming > 이것 저것 조각보' 카테고리의 다른 글
| /*작성중*/ CSS-In-Js vs CSS - In - CSS ( Sass, Emotion, Styled-Components 비교 정리 ) (1) | 2023.11.22 |
|---|---|
| (글 작성 + 공부 중 )웹사이트 성능 최적화 방법 :: Lazy Loading (0) | 2023.10.03 |
| [TS] React에서 하위 컴포넌트로 Props 내려줄 때 타입 객체로 내려주는 경우와 아닌 경우 (0) | 2023.09.24 |
| 웹사이트 성능 측정할 때 어떤 부분을 측정하는걸까? ( with 측정 가능 사이트 ) (0) | 2023.09.24 |
| -작성중 - 내용 무 /JWT 랑 Token이랑 그리고 Bearer 에 대해서 알고 있어? (0) | 2023.07.14 |