# prefetch

20개의 포스트
post-thumbnail

대부분이 모르는 Next에서 SSG가 작동하는 방식 | 리팩토링을 통해 서비스 최적화하기 2편

많이들 이용하는 Static Site Generation은 사실 HTML이 아니라 다른걸 미리 생성합니다... SSG의 정확한 작동 방식에 대해 살펴보고, SSG을 이용해 로딩 속도를 개선한 경험을 말씀 드리고자 합니다.

2023년 2월 16일
·
10개의 댓글
·
post-thumbnail

React Query 공부 (7) - prefetching

사람들이 원하는 데이터를 미리 알고 있다면, 그 데이터를 캐시에 미리 채움으로써 UX를 개선할 수 있다.이를 위해 prefetching이라는 기술을 사용한다.

2023년 2월 5일
·
0개의 댓글
·
post-thumbnail

React Query 공부 (4)

prefetching 사용 / isLoading vs isFetching

2023년 1월 17일
·
0개의 댓글
·
post-thumbnail

Promise all, lazyload, preload, prefetch

현재의 이미지 업로드 방식의 비효율적인 부분\-> 이미지 찌꺼기가 남음\-> 이미지 미리보기가 느림Promise.all()은 그 안에 포함되어 있는 함수들을 동시에 실행하게 되어서 3초의 시간이 소요됨Promise.all()은 Promise보다 시간을 단축하지만, 결과

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

32day - FileReader, useRef, LazyLoad/PreLoad

기존의 우리가 사용하던 이미지 등록 방식은 이러했다. > 1. 브라우저에서 이미지 등록 버튼을 누르면 백엔드에 uploadFile로 전송되어 storage에 file이 보내진다. 백엔드는 storage로부터 다운로드URL을 받아와서 다시 브라우저에 돌려준다. 브라우저

2022년 12월 18일
·
0개의 댓글
·

Promise all, lazyload, preload, prefetch

현재의 이미지 업로드 방식의 비효율적인 부분은 1\. 이미지 찌꺼기가 남는다2\. 이미지 미리보기가 느리다.그냥 Promise로 함수를 만들어서 실행하게 되면, result1 → result2 → result3이 순차적으로 실ㄹ행되게 되고, 약 6초의 시간이 소요된다.

2022년 12월 14일
·
0개의 댓글
·
post-thumbnail

웹뷰 최적화 만점을 위한 노력 -2-(IntersectionObserver, Token provider, Prefetch, font, Lcp, Lighthouse)

개선 후 개선 전 > 만점에 가까운 라이트 하우스 점수 쨖쨖 👏 어니언은 앱 서비스이지만, 웹의 장점이 필요한 페이지는 vue를 이용하여 웹으로 구성되어 있다. 그렇기에 앱에서 웹뷰 페이지를 로드할 경우 이질감 없이 로드하여 서비스를 제공하여야 하기 때문에

2022년 12월 9일
·
4개의 댓글
·

[HTML] preload, preconnect, prefetch

현재 페이지에서 사용할 리소스(resource)를 우선순위를 높게하여 빠르게 가져오게 한다. 주로 웹 폰트와 같은 빠르게 로드(load)되어야하는 곳에서 사용한다.as 속성을 사용하여 브라우저에게 해당 리소스의 유형을 알려줘야 한다. 올바른 유형이 아닐 경우 브라우저는

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

이미지 prefetch하기

구현하고자 하는 기능 우리 단어장은 텍스트 뿐만 아니라 이미지도 지원합니다. 텍스트에 비하면 이미지는 네트워크를 통해 불러오는 시간이 훨씬 오래 걸리며 무엇보다 처음에 전부 fetch해오는 것이 아니라 url만 fetch 해와서 사용자에게 보여지는 순간에 실제 이미지

2022년 8월 5일
·
0개의 댓글
·
post-thumbnail

[Next] Next + react-query prefetchInfiniteQuery에서 계속 같은 page가 반복되고 새로 fetching 안 되는 에러

Next js와 react-query를 함께 사용하여 Infinite Query의 첫 부분을 prefetch 시동중이었다. 어디서 에러가 났는지 제대로 알려주지 않아서 일일히 콘솔을 찍어가면 찾아낸 결과..중간에 로딩이 길지만, 서버에서는 제대로 prefetch를 하나

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

django select_related, prefetch_related, Prefetch 정리

select_related, prefetch_related는 모두 장고에서 기본으로 제공하는 기능으로 ORM 최적화를 위한 것이다. 두 가지 모두 DB에 접근(hit)하는 횟수를 줄이고 더 빠르게 데이터를 조회할 수 있게 해준다.

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

Vue Lazy Load(비동기 컴포넌트) / prefetch 기능

비동기 컴포넌트와 prefetch

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

Vue에서의 Prefetch

prefetch란...

2021년 11월 1일
·
0개의 댓글
·
post-thumbnail

Poke Docs 만들기 - NextJS, react-query

서론에서 썻던것과 같이 페이지는 총 3개로 구성하였습니다.index.tsxdocs.tsxitem/id.tsx일단 Next js 에 나온것 과 같이 시작을 하였습니다.기본적으로 typescript, eslint, prettier 를 추가하였습니다.1.nextJS 에서 t

2021년 2월 8일
·
0개의 댓글
·
post-thumbnail

DB에 날리는 Query를 줄여보자 - 2편 prefetch_related

먼저 select_related 와 prefetch_related의 차이점을 Join을 DB가 하느냐 아니면 Python이 하느냐다. 앞써 select_related는 DB query에 Join 구절이 들어간 것을 확인할 수 있다. 하지만, prefetch를 하게되면

2021년 1월 10일
·
0개의 댓글
·
post-thumbnail

DB에 날리는 Query를 줄여보자 - 1편 select_related

The only reason to use either of these methods is when a single large query is preferable to many small queries. Django uses the large query to create

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

[prefetch_related] 역참조 이해하기

staff 에서 movie name 출력하기related name로 중간테이블인 moviestaffposition를 역참조하기여러개의 객체가 리스트 형태로 담겨있어 for문을 통해 name 출력하기

2020년 11월 22일
·
0개의 댓글
·

🌈 select related& prefetch related

select related 와 prefetch related를 사용하면 쿼리를 줄여서 최적화 할 수 있다. 즉, 하나의 QuerySet 객체를 가져올 때 연관있는 Modele들을 같이 가져온다우선 간단한 모델 하나로 예를 들어 이해해보자.select_related는

2020년 10월 1일
·
0개의 댓글
·
post-thumbnail

⚡️ Google Chrome Labs의 Quicklink로 웹페이지 UX 향상시키기

이 글에서는 Google Chrome Labs에서 2018년 11월에 공개한 quicklink에 대해 알아보고 간단하게 사용해보는 방법을 다룹니다.

2019년 2월 17일
·
4개의 댓글
·