# preload

22개의 포스트
post-thumbnail

LazyLoad vs PreLoad

LazyLoading이란 체이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 하는 방법이다. 웹페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것 이라고할 수 있다.이 방식은 웹 성능과 네트워크 비용 절감에 있어서

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

LazyLoad vs PreLoad

LazyLoad LazyLoad는 웹페이지를 불러올 때, 바로 필요하지 않은, 즉 눈에 보여지지 않는 이미지들의 로딩 시점을 뒤로 미루는 것이다. 사용자가 스크롤 등을 통해 이미지가 보여지는 시점이 되면 그때 로딩을 한다. LazyLoad를 사용해야 하는 이유는 당장 불필요한 이미지들가지 웹페이지를 불러올 때, 한번에 가지고 오면 로딩 시간과 성능 면에...

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

Day-31 FileReader, Promise.all, LazyLoad & PreLoad

기존방식대로 이미지를 올릴 때는 몇가지 비효율적인 면이 존재한다.이미지 파일을 불러왔는데 등록은 하지 않고 뒤로가게 되면 사용되지 않는 파일이 스토리지에 남아있어 용량이 많이 찬다.스토리지에서 받아오는 파일의 속도가 느려진다.따라서 이미지 선택 후 백엔드로 보내주지 않

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

코드캠프 FE 31일차 - TIL(FileReader,Promise.all,LazyLoad/PreLoad)

📔 학습목표 기존 업로드 방식은 비효율적이야 >> FileReader Async-await for문에서 쓰면 안된다고? >> Promise.all 내가 원할 때 이미지 불러오기 >> LazyLoad/PreLoad 업로드파일 프로세스 브라우저에서 플러스 이미지를

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

LazyLoad vs PreLoad

페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술이다.하지만 스크롤이 내려가면서 필요한 때가 되면 로드가 되어야 한다.예를 들어 이미지가 10장이 넘는 페이지가 있다고 가정해보자.이미지를 모두 다 로드가 될 때까지 기다리게 된다면, 페이지의 로

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

31) FileReader ?

Algorithm Self Study, Image Upload Process, Promise & Promise.all, LazyLoad vs PreLoad, Algorithm Class, self Study

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

[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개의 댓글