milliwonkim의 블로그

영상은 사진에 비해 용량이 큽니다. 예를 들어 png 사진 파일의 경우, 5MB이지만, 영상의 경우 짧아도 50MB는 합니다. 그래서 웹에서 영상을 다 업로드하지 않고, 아래의 이미지와 당장 필요한 부분을 잘라서 필요할 때 다운로드하는 형식입니다. 영상은 다음과 같이 다운로드 한 이후에 바로 재생이 되는 것이 아니라 시간이 지나고 나서 재생이 됩니다. 여기서는 Media.io라는 서비스를 이용해서 동영상 용량을 낮춰보도록 하겠습니다. https://www.media.io/ Media.io - Online Free Video Editor, Converter, Compressor Use Media.io free online tools to edit, convert, or compress video/audio..

이미지나 영상을 처음에 모두 띄울 필요는 없습니다. 첫 로딩을 빠르게 하고, 그 이후에 뷰포트가 이미지가 필요한 곳으로 들어왔을 때 그 때 로딩하는 방법도 성능 향상에 좋은 요소가 됩니다. 스크롤 이벤트에 LazyLoading을 할당할 경우, 수많은 콜을 부를 것입니다. 따라서 Intersection Observer를 이용해서 특정 뷰포트에 들어올 때만 Lazy Loading을 트리거하게끔 합니다. import React, { useEffect, useRef } from "react"; function Card(props) { const imgRef = useRef(null); useEffect(() => { const options = {}; const callback = (entries, observ..