# preload

16개의 포스트

[React] LazyLoad vs PreLoad

LazyLoadImage 사용할 준비가 된 여러 효과가가 포함되어 있으며 응용 프로그램에 시각적 캔디를 추가하는데 유용하지만 , 필요하지 않거나 자체 효과를 구현하려는 경우에는 완전히 선택사항입니다.사진을 미리 다운 받아 놓고 기다리다가 버튼을 누르거나 페이지가 변경되

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

Lazyload vs Preload

LazyLoad는 사이트 사이트를 랜더 해 올 때 필요한 만큼(보이는/지정된범위) 만큼의 이미지만 다운받아오는 것을 말한다.웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading이다LazyLoa

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

LazyLoad vs PreLoad

웹에서 페이지에 들어갔을 때 페이지에 존재하는 모든 이미지를 불러오면이미지의 양이 많을 수록 혹은 용량이 클 수록 그 속도가 느려지게 된다.그래서 사용자가 현재 보고있는 화면에 해당하는 이미지만 그 때 그 때불러와서 보여주면 속도를 향상시킬 수 있는데 이 기술이 Laz

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

LazyLoad/PreLoad

LazyLoad : 특정 페이지에 접속했을 때 페이지에 있는 모든 사진을 랜더링하지 않고 스크롤을 내리게되면 랜더링해준다. 만약 모든 사진을 랜더링해야할 경우 유저가 이미지가 다 다운받아질때까지 기다려야하는 번거로움을 줄 일 수 있다.PreLoad : 이미지가 큰 경우

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

LazyLoad vs PreLoad

LazyLoad는 웹페이지를 불러올 때, 바로 필요하지 않은(보여지지않는) 이미지들의 로딩 시점을 뒤로 미루는 것이다. 사용자가 스크롤 등을 통해 이미지가 보여지는 시점이 되면 그 때 로딩을 한다.LazyLoad를 사용해야하는 이유는 당장 불필요한 이미지들까지 웹페이지

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

31일차) 언제까지 사진 한 장씩 올리는거 기다릴거야! FileReader/readAsDataURL/Promise.all/ 실무 위주 !성능 높여 ! 끌어올려! Code Camp FE 6기

오늘 배울 내용 우리가 기존에 쓰던 이미지 업로드 방식 백엔드의 uploadFile api요청을 통해서 storage에 사진을 저장하고, url을 받아와서 브라우저에 url을 넘겨주었었다.그 다음에 그 url을 첨부해서 createBoard api요청을 해서게시글에 이

2022년 4월 26일
·
2개의 댓글

덩어리 콘텐츠 빨리 그리기

구글이 선택한 성능 지표, LCP에 대해 알아보기

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

CSS 코드 최적화

미사용 CSS를 제거하고 렌더 차단 리소스가 되지 않도록 하여 웹사이트 성능 높이기

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

20220225_TIL : 이미지 업로드

기존에 스토리지 저장 방식에서는 게시물을 등록하지 않아도 이미지를 로드할때 스토리지에 저장하고 그 url을 받아와서 등록하는 방식이었다.JS 기능 FileReader()를 사용해서 아직 파일을 업로드(uploadFile)하지는 않은 상태로 임시 주소를 만들어서 이미지를

2022년 2월 26일
·
0개의 댓글

📕 TIL 0225

[upload image] [recursion function]

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

[Rails] :includes 로 SQL N+1 문제 개선하기

N+1 문제란? 쿼리 1번으로 N건을 가져왔는데, 관련 컬럼을 얻기 위해 쿼리를 N번 추가 수행하는 문제

2021년 12월 26일
·
0개의 댓글
post-thumbnail

[react] 이미지 프리로딩 (Next.js + Typescript)

아코디언이나 모달 등 어떤 트리거를 통해 이미지를 마운트하는 경우, 이미지를 로딩할 수 있는 충분한 시간이 있음에도 마운트 후 이미지가 로딩되는 과정을 사용자가 볼 수밖에 없다. 이는 사용자 경험을 해치는 요인이 된다.어떤 이미지가 마운트 될 것이라고 예상될 때 이미지

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

캠프 4주 4일차

이미지 프리뷰( Filereader, promise.all )

2021년 7월 29일
·
0개의 댓글
post-thumbnail

Service worker Navigation PreLoad

tmdb api에서 지원되는 비디오들의 유튜브 키를 변수로 받아서 로드 하는데 자꾸 아래와 같은 에러가 떠서 찾아봤다.출처 https://love2dev.com/pwa/service-worker-preload/사이트의 페이지 속도를 향상시키기 위한 많은 미묘한

2021년 7월 9일
·
0개의 댓글

웹 폰트 최적화

웹에서 제공되는 정보의 95% 이상은 문어(written language)의 형태입니다. 좋은 타이포그래피는 사용자의 가독성, 접근성, 사용성 등을 사용자 경험을 향상시킬 수 있습니다. 이처럼 웹에서 타이포그래피는 중요합니다.웹 폰트(Web Font)는 디자이너가 원하

2020년 2월 19일
·
0개의 댓글