# prefetch

bokdol11859

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

cloud_oort

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

cloud_oort

prefetching 사용 / isLoading vs isFetching

longcoat

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

zoo0

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

yeeunk90

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

9bin08

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

fepanbr

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

comdongsam

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

raverana96

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

stresszero

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

ensun_p

비동기 컴포넌트와 prefetch

uvula6921

prefetch란...

eomttt

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

sj950902

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

sj950902

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

yj-leee

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

may_soouu

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

minho

Sunday_July_26

chris

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