# prefetch
이미지를 효율적으로 로드하는 방법
Prefetching 이란? UICollectionView Prefetching은 iOS 10 이상에서 사용할 수 있는 기능으로, 성능을 최적화하기 위해 사용됩니다. 이 기능은 미리 데이터를 로드하고 화면에 표시되기 전에 셀을 미리 로드하여 스크롤 및 데이터 로딩 성능을 향상시킬 수 있습니다. 즉, Prefetching은 사용자 경험을 향상시키고 스크롤 및 데이터 로딩 성능을 최적화하는 데 도움이 되는 중요한 기술입니다. 특히 대규모 데이터 세트를 처리하는 UICollectionView에서 유용합니다. 자세한 설명은 공식 문서를 확인해 주세요~ 샘플 코드도 있습니다! Prefetching collection view data(공식 문서) > https://developer.apple.com/documentation/uikit/uicollectionviewdatasourceprefetching/prefetchingcollectionv
NextJS Prefetch
NexJS 를 공부하면서 Prefetch를 정확하게 기억하기 위해 공식문서를 참고하여 정리하려고 합니다. Prefetch > 프리패치는 미리 필요한 데이터나 리소스를 미리 가져와서 캐시에 저장하거나 처리하여 나중에 사용할 수 있도록 하는 것을 의미합니다. 쉽게 말해 Nextjs에서 제공하는 Link를 클릭할 경우, 클릭 전 해당 링크에 마우스를 호버만 해도 미리 필요한 데이터를 가져오게 됩니다. 때문에 사용자는 비교적 빠른 속도로 페이지를 볼 수 있게 되고, 이로 인해 사용자 경험이 좋아지게 됩니다. 해당 기능을 사용하고 싶지 않다면, 위와 같이 사용하시면 됩니다.
Next.js useRouter의 다양한 기능들(prefetch)
useRouter > router.push('/어쩌구') 실행하면 /어쩌구 경로로 페이지이동이 가능합니다. > router.back() 실행하면 뒤로가기해줍니다. > 실행하면 앞으로가기해줍니다. > 실행하면 새로고침해줍니다. 근데 페이지를 처음부터 다시 로드하는게 아니라 이전과 바뀐점을 분석해서 바뀐부분만 새로고침해준다고 합니다. Next.js 공식문서에선 soft refresh라고 부릅니다. prefetch 기능 > 실행하면 '/어쩌구'의 내용을 미리 로드해줍니다. 그럼 그 페이지 방문할 때 매우 빠르게 방문할 수 있습니다. 빠른 사이트를 만들고 싶을 때 쓸 수 있는 유용한 기능입니다. > 다행히 server component에서도 저런 기능을 사용할 수 있는데 쓰면 태그가 화면에 보이는 순간 '/' 페이지를 자동으로 미리 로드해줍니다. > 자동으로 미리
select_related(), prefetch_related(), Prefetch()
select_related() 쿼리셋을 반환한다. 쿼리가 실행될 때 외래키 관계를 "따라가서" 해당 정보 또한 가져와 캐시한다. Example 이 경우 DB를 두번 조회하지만 selected_related 로 조회하는 아래의 경우 e.blog가 DB를 다시 조회하지 않는다. 이미 관련 정보가 select_related를 통해 캐시에 저장되었기 때문이다. 순서는 중요하지 않다. 아래 두 쿼리는 동일한 결과를 갖는다. Example #2 위 경우에서 아래와 같이 id가 4인 Book 인스턴스의 저자의 고향 정보를 불러올 수 있다. Caveat ForeignKey나 OneToOneField 참조관계를 select_related() 메서드에 전달할 수 있다. (여러개 가능?) 반대 방향으로도 참조가 가능하다. related_name에 인수로 전달된 값으로 호출할 수 있
2023. 4. 25~27
Index 성능최적화 - react developer tools memoization(useCallback,useMemo) map,memo(key-uuid?) CRP(Critical Rendering Path) Reflow, Repaint prefetch, preload 이미지 (input.target.files, readAsDataURL, onload) Promise, Promise.all, Promise.all() - map LazyLoad vs PreLoad ( Prefetch) Google PageSpeed Insights 이미지 Webp 확장자 이미지 라이브러리(React-lazy-load, React-dropzone, react-avatar-editor, antd, React-beautiful-dnd) Optimistic-UI Intro 자꾸 새로 만
[TIL 0425] CRP(Critical Rendering Path)
✔️ 브라우저에서 렌더링을 해주는 과정 > > 화면을 그려주는데 필요한 리소스(html,css,js)를 다운로드 해온다. HTML과 CSS에서 화면에 렌더해야 할 요소들을 구분 후 렌더되어야 할 HTML,CSS 요소를 합쳐 화면에 그려준다. 화면에 그려줄때 해당 요소들이 어느 위치에 놓일지 먼저 그려주는 Layout Reflow와 해당 요소들을 색칠하는 Paint Repaint과정이 발생한다. > > ❗️렌더트리 >>최종적으로 브라우저에 표기될 요소들로 DOM과 CSSOM이 합쳐진것! DOM(Document Object Model) : HTML의 요소를 구분할 수 있도록 도와주는 것 CSSOM(CSS Object Model) : CSS요소를 구분할
대부분이 모르는 Next에서 SSG가 작동하는 방식 | 리팩토링을 통해 서비스 최적화하기 2편
리팩토링을 통해 서비스 최적화하기 시리즈는 총 두편으로 나눠서 작성할 예정입니다. 작성하는대로 링크 연결할게요! 1. CSS 속성을 통해 뚝뚝 끊기는 애니메이션 개선하기 [대부분이 모르는 Next에서 SSG가 작동하는 방식](https://velog.io/@bokdol11859/%
React Query 공부 (7) - prefetching
prefetching 사람들이 원하는 데이터를 미리 알고 있다면, 그 데이터를 캐시에 미리 채움으로써 UX를 개선할 수 있다. 이를 위해 prefetching이라는 기술을 사용한다. 말 그대로 미리 fetching한다는 의미이다. 유의할 점은 데이터를 미리 fetching하는 것이기 때문에 자주 변하지 않는 데이터를 prefetching하는 것이 적절하다. 구현 queryClient의 prefetchQuery method를 사용할 것이다. 구현은 간단하다. prefetching할 함수를 만들고 export한 다음 index에서 실행시켜준다. index에서 미리 prefetching 한 뒤에 유저가 treatment로 이동했을 때 기다림 없이 데이터를 바로 볼 수 있다.
React Query 공부 (4)
앞서 pagination 구현할 때, 다음 페이지가 미리 준비되어 있지 않아 로딩창이 뜨는 좋지 않은 UX를 보여주었다. 이를 해결하기 위해 prefetching을 사용해보았다. prefetching은 말 그대로 미리 cache data에 원하는 data를 추가하는 것이다. prefetching 값은 곧바로 자동적으로 stale 상태가 되어 인자값이 바뀌면 곧바로 refetching 가능하다. 물론 이 또한 설정가능하다. prefetching값은 refetching 되는 동안 보여지는 cache data로 쓰인다. 물론 cache data의 기한이 만료되지 않아야 가능하다. [공식 docs]([https://tanstack.com/query/latest/docs/react/reference/QueryClient?from=reactQueryV3&original=https%3A%2F%2Freact-query-v3.tanstack.com%2Freference%2FQueryClient
lazyload & preload & prefetch
LazyLoad > 처음부터 다운로드 받아오지 않고, 스크롤을 내릴 때 이미지를 다운로드 받아오게 하는 것 -> 데이터의 낭비를 막을 수 있음 Preload > 다른페이지에서 받아봐야할 사진들을 미리 preload한 후, 글로벌한 변수에 담아서 사용함 Prefetch > 마우스 오버하면 미리 fetch를 함 -> 이미지 Webp 확장자 > 구글에서 만든 이미지 포멧. 기존 이미지의 용량을 줄일 수 있는 장점이 있지만 화질이 좀 떨어짐 구글에서 jpg to webp 이런 방식으로 검색하면 변경할 수 있음 Google PageSpeed Insights > 실제 배포를 진행하고 나서, 내가 배포한 페이지의 개선할 점을 찾을 때 유용한 사이트 추천 라이브러리 > react-dropzone react-avatar-editor react-beautiful-dnd(drop and drop)
32day - FileReader, useRef, LazyLoad/PreLoad
기존의 우리가 사용하던 이미지 등록 방식은 이러했다. > 1. 브라우저에서 이미지 등록 버튼을 누르면 백엔드에 uploadFile로 전송되어 storage에 file이 보내진다. 백엔드는 storage로부터 다운로드URL을 받아와서 다시 브라우저에 돌려준다. 브라우저는 state에 이미지URL을 저장하고 있다가 게시글 등록 버튼을 누르면 제목, 내용, 이미지 이런 것들을 업로드해준다. 백엔드에 createBoard로 들어가 DB에 저장된다. 여기에는 두 가지 문제점이 있다. > 1. 미리보기가 느리다. 파일이 백엔드로 가고 storage로 가서 저장이 된 후 백엔드에서 다운로드를 받아와 브라우저로 돌려준 후에 미리보기 화면에 이미지가 뜬다. 이미지 등록만 하고 게시글 등록 화면을 꺼버리게 되면 storage에는 사용하지 않는 파일(찌꺼기)이 이미 저장이 되어버린 상태이다. 이런 것들이 반복되면 storage에 저장된 이미지와 DB에서 사용 중인 이미지와
Promise all, lazyload, preload, prefetch
현재의 이미지 업로드 방식의 비효율적인 부분은 이미지 찌꺼기가 남는다 이미지 미리보기가 느리다. Promise.all 그냥 Promise로 함수를 만들어서 실행하게 되면, result1 → result2 → result3이 순차적으로 실ㄹ행되게 되고, 약 6초의 시간이 소요된다. Promise.all()은 그 안에 포함되어 있는 함수들을 동시에 실행하게 되어서 3초의 시간이 소요된다. Promise.all은 Promise보다 시간을 단축하지만, 결과값은 같도록 해주는 기능이다. LazyLoad > 처음부터 다운로드 받아오지 않고, 스크롤을 내릴 때 이미지를 다운로드 받아오게 하는 것 → 데이터의 낭비를 막을 수 있다. Preloa
웹뷰 최적화 만점을 위한 노력 -2-(IntersectionObserver, Token provider, Prefetch, font, Lcp, Lighthouse)
개선 후 개선 전 > 만점에 가까운 라이트 하우스 점수 쨖쨖 👏 어니언은 앱 서비스이지만, 웹의 장점이 필요한 페이지는 vue를 이용하여 웹으로 구성되어 있다. 그렇기에 앱에서 웹뷰 페이지를 로드할 경우 이질감 없이 로드하여 서비스를 제공하여야 하기 때문에 단일 페이지 구성으로 초기 로드 속도와 앱, 웹 통신이 가능해야 하고, 앱과 일관된 페이지 구성을 해야만 사용자 경험을 해치지 않고 서비스를 제공할 수 있다. 또한 컴퓨터보다는 성능이 떨어지는(구형 디바이스)에 대한 대응이 필요하기 때문에 최적화에 신경을 많이 써야 한다. 웹뷰 성능 개선을 위해 적용한 내용을 소개해 보겠다. 1. IntersectionObserver + keyframes 
[HTML] preload, preconnect, prefetch
preload 현재 페이지에서 사용할 리소스(resource)를 우선순위를 높게하여 빠르게 가져오게 한다. 주로 웹 폰트와 같은 빠르게 로드(load)되어야하는 곳에서 사용한다. 주의사항 as 속성을 사용하여 브라우저에게 해당 리소스의 유형을 알려줘야 한다. 올바른 유형이 아닐 경우 브라우저는 리소스를 사용하지 않는다. 해당 속성을 적용한 리소스는 반드시 가져오기 때문에 중복해서 요청하게 되면 중복한 요청 수만큼 네트워크 자원을 낭비할 수 있다. preconnect 현재 페이지에서 외부 리소스의 도메인에 미리 연결해두는 속성값이다. 미리 연결된 리소스는 빠르게 접근할 수 있게 되어 리소스 로드 시간을 줄일 수 있다. 주의사항 미리 연결해 두는 만큼 CPU 사용이 늘어날 수 있고 연결을 빠르게 종료한다면 연결 작업에 대한 낭비가 일어나 유의해야 한다. 한 도메인에서 여러 버전에 리소스를 가져올 때, 미리 연결해두어 여러번의 연결
이미지 prefetch하기
구현하고자 하는 기능 우리 단어장은 텍스트 뿐만 아니라 이미지도 지원합니다. 텍스트에 비하면 이미지는 네트워크를 통해 불러오는 시간이 훨씬 오래 걸리며 무엇보다 처음에 전부 fetch해오는 것이 아니라 url만 fetch 해와서 사용자에게 보여지는 순간에 실제 이미지를 불러옵니다. 단어 카드의 뒷면에 이미지가 있는 경우 단어를 탭해서 뒷면으로 돌려야 이미지 데이터를 fetch 해오기 때문에 아래처럼 1초 가량의 딜레이가 있어 보입니다. 우리는 이미지를 prefetch해서 이 딜레이를 줄여보도록 하겠습니다. 구현 prefetch 함수 만들기 먼저 WordCell의 ViewModel 안에 이미지를 prefetch하는 함수를 만듭니다. KingFisher 라이브러리는 이미지를 미리 패치
[Next] Next + react-query prefetchInfiniteQuery에서 계속 같은 page가 반복되고 새로 fetching 안 되는 에러
에러 내용 Next js와 react-query를 함께 사용하여 Infinite Query의 첫 부분을 prefetch 시동중이었다. 어디서 에러가 났는지 제대로 알려주지 않아서 일일히 콘솔을 찍어가면 찾아낸 결과.. 중간에 로딩이 길지만, 서버에서는 제대로 prefetch를 하나 그 뒤 클라이언트에서다시 fetching을 할 때 문제가 발생하는 것 같았다. feedListQuery의 pageParam이 계속 null로 나왔다. 분명 없을 때는 0을 부여한다고 했는데도 자꾸 저러니 참. 문제는 서버 prefetch를 제외한 클라이언트에서만 data fetching을 하면 문제가 없다는 것. 디버깅이 어려운 서버가 문제였다ㅠㅜ 해결 우선 구글링 + react-query의 issu
django select_related, prefetch_related, Prefetch 정리
selectrelated, prefetchrelated는 모두 장고에서 기본으로 제공하는 기능으로 ORM 최적화를 위한 것이다. 두 가지 모두 DB에 접근(hit)하는 횟수를 줄이고 더 빠르게 데이터를 조회할 수 있게 해준다. 이 두개를 쓰면 안쓰는것보다 SQL 쿼리문 자체는 약간 복잡해지지만 한번 불러온 데이터들을 캐싱하기 때문에 매 쿼리마다 DB에 접근하지 않고 캐싱된 것을 불러오게 되므로 성능이 개선된다. 또한 두 가지 모두 Eager Loading을 하기 때문에 ORM의 N+1 문제까지 해결할 수 있다. select_related() 객체가 역참조하는 single object(one-to-one or many-to-one)이거나, 또는 정참조 foreign key 인 겨우 각각의 lookup마다 SQL의 JOIN을 실행하여 테이블의 일부를 가져오고, select .. from에서 관련된 필드들을 가져온다 괄호안에 따옴표로 필드명이나 클래스명을 소문자로 입
Vue Lazy Load(비동기 컴포넌트) / prefetch 기능
1. Lazy Load 사용 목적 Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐지게 되는데, 이 때 대형 프로젝트의 경우 파일 용량이 매우 크기 때문에 사용자는 웹 사이트를 처음 접속하게 될 때 큰 파일을 로드하느라 초기 렌더링 시간이 오래 걸리게 된다. 즉, 현재 보고 있는 화면과 무관한 내용까지 받아서 시간이 오래 걸리게 되는 것이다. 따라서, Lazy Load를 이용하여 리소스를 컴포넌트 단위로 분리하여 필요한 것들만 그때그때 라우트 단위 혹은 컴포넌트 단위로 다운로드할 수 있게 하는 방법이다. 2. prefetch vue CLI3부터 prefetch 기능이 추가되었다. prefetch 기능은 미래에 사용될 수 있는 리소스를 캐시에 저장함으로써, 사용자가 접속할 때 빠르게 리소스를 내려줄 수 있다. Lazy Load로 컴포넌트를 import하면 내부적으로 Vue CLI의 prefetch기능이 사용된다. (prefetch 기능이 true로
Vue에서의 Prefetch
prefetch에 대한 고민 prefetch란 당장 사용하지 않을 컴포넌트 및 path의 리소스를 미리 다운받아 캐싱하는 속성이다. Vue에서 prefetch는 기본값으로 true임 하지만 prefetch는 애플리케이션의 첫 화면 렌더링을 지연시킬수 있다. prefetch 리소스를 먼저 다운받고 그 다음, 첫 화면에서 사용되는 리소스를 다운 받기 때문. prefetch 기능은 다른 화면에서 사용될 리소스를 미리 내려받아서, 애플리케이션에서 화면 전환 시 빠른 성능을 만들어내기 위해 사용. 그래서 꼭 필요한 컴포넌트에만 적용해야함. 기본적으로 프로젝트에서는 prefetch를 끄는것을 권장.
Poke Docs 만들기 - NextJS, react-query
서론에서 썻던것과 같이 페이지는 총 3개로 구성하였습니다. index.tsx docs.tsx item/[id].tsx 일단 Next js 에 나온것 과 같이 시작을 하였습니다. Next app 생성 기본적으로 typescript, eslint, prettier 를 추가하였습니다. nextJS 에서 typescript 도입은 생각외로 굉장히 간단한데요. Next js Basic Features TypeScript <- 문서에 나와있는데로 하면 쉽게 관련 파일과 typescript 를 설치할 수 있습니다. eslint 는 기본적으로 airbnb 기반으로 작성하였고 prettier 는 다음과 같이 추가하였습니다. .prettierrc emotion을 사용하게 되면 emotion이 자동으로 clas