꾸생의 DevLog

이미지 Lazy Load를 활용한 성능 최적화

요즘 성능 최적화에 관심이 많아져 쓰로틀링, 디바운스 다음으로 이미지 Lazy Load를 공부해봤습니다. 제가 만든 현재 스킨에도 적용을 해서 나름 만족하고 있습니다. Lazy Load 구현 순서는 대략 이렇습니다. HTML 태그의 src 속성을 data-src 속성으로 변경 fade 효과를 줄 .fade 클래스 CSS 작성 Intersection Observer API를 사용한 함수 작성 Lazy Load의 필요성 Lazy Load 적용이 안되어있는 일반적인 웹사이트의 경우 사용자가 방문하면 브라우저는 해당 페이지의 모든 리소스를 로드시킵니다. 사용자는 페이지의 모든 내용을 확인하지 않기 때문에 보지 않은 이미지는 이미 네트워크 리소스가 낭비되는 겁니다. 이미지가 많은 웹사이트의 경우 자원의 손실은 커..

2022.01.12  

성능 향상을 위한 쓰로틀(Throttle)과 디바운스(Debounce)

여기서의 쓰로틀과 디바운스는 브라우저 이벤트 성능을 최적화하는 기법으로 설명합니다. 이벤트 성능 최적화 방법 디바운스(Debounce)는 중복되는 동작이 반복적으로 일어날 때 강제적으로 무시하고 마지막 동작만 실행하는 것이다. 1초에 100번 동작하는 함수가 있다고 하자. 함수가 실행될 때마다 데이터는 초기화되지만 정밀한 값을 따지지 않는 이상 사람 눈에는 1초에 한두 번 값이 바뀌어 보인다. 이 경우 성능 면에서 효율적이지 못해 최적화를 위해서 디바운스 또는 쓰로틀을 활용하면 되나, 사용자 경험과 최적화 중 어떤 것이 중점인지 파악해서 알맞게 적용해야한다. 사용자 경험 => 쓰로틀 성능 => 디바운스 이벤트 최적화 사용 예시 브라우저 resized Event Scroll 이벤트 키보드 입력 중지 lod..

2022.01.01  

[JS] 자바스크립트 캔버스 단색, 그라데이션 배경 그리기

캔버스 단색 배경 그리기 const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#f7e017'; // 1. 배경색 지정 ctx.fillRect(0, 0, width, height); 2. 설정한 위치에 설정한 크기만큼 그리기 //(시작점, 끝점, 너비, 높이) 캔버스 그라데이션 배경 그리기 // canvas 선언 const canvas = document.querySelector('#canvas'); // 2D canvas 그리기 const ctx = canvas.getContext('2d'); // 선형 그라데이션 객체 생성 const gradient = ctx.creat..

2021.12.17  

[JS] 자바스크립트를 사용한 이미지 클립보드 복사

자바스크립트 이미지 복사 브라우저 API인 ClipboardItem 인터페이스를 사용해 이미지를 클립보드에 복사해 다른 곳에 붙여넣기할 수 있는데, 제 경우 html2canvas 라이브러리를 사용해 캔버스를 이미지로 변환하고 자바스크립트에서 미디어 데이터를 다루는 Blob 데이터로 변환해 클립보드로 복사했습니다. html2canvas로 캔버스 이미지 생성 캔버스 이미지 -> Blob 데이터로 변환 ClipbloadItem을 사용해 복사 이미지 클립보드 복사 예제 > npm install --save html2canvas const target = document.querySelector('#canvasWrap') html2canvas(target).then(canvas=>{ //1 canvas.toBlo..

2021.12.17  

[JS] 자바스크립트 <canvas> 캔버스 태그에 이미지 삽입하기

자바스크립트 캔버스 이미지 자바스크립트를 사용해 태그에 선택한 이미지를 넣는 방법입니다. HTML에 이미지를 선택할 수 있는 file 타입의 태그와 태그를 넣을 태그만 작성해두겠습니다. HTML JS const input = document.querySelector('#targetImg'); const res = document.querySelector(".res"); input.addEventListener('change', (e)=> { const file = e.target.files[0]; const canvas = document.createElement('canvas'); //캔버스 생성 const ctx = canvas.getContext('2d'); //캔버스 그리기 const reader..

2021.09.18   2

[JS] 자바스크립트 이미지 압축 라이브러리

brower-image-compression 자바스크립트를 사용한 이미지 압축 라이브러리로 brower-image-compression을 사용하면 손쉽게 이미지의 파일 사이즈를 효과적으로 압축할 수 있다. 요즘은 스마트폰 카메라 성능이 날이 갈수록 좋아져 사진 한 장을 찍어도 10MB가 넘어버린다. 사진을 서버로 전송할 때, 서버의 부담을 줄이기 위해서 클라이언트 단에서 사진을 압축해 전송하면 서버의 부담을 크게 줄일 수 있다. browser-image-compression Compress images in the browser www.npmjs.com Install NPM > npm i browser-image-compression CDN Usage // you should provide one of ..

2021.09.16  

[JS] 자바스크립트 jszip 파일 압축 라이브러리

자바스크립트 압축 파일 생성하기 자바스크립트를 사용해 브라우저나 Nodejs에서 ZIP 압축파일을 만드는 방법이다. 대표적으로 JSZIP 라이브러리를 사용해서 만들 수 있고 다운로드 기능은 file-saver 라이브러리를 사용해도 되고 간단하게 a태그를 만들어서 사용해도 된다. 라이브러리 설치 > npm i jszip file-saver jszip Create, read and edit .zip files with JavaScript http://stuartk.com/jszip www.npmjs.com file-saver An HTML5 saveAs() FileSaver implementation www.npmjs.com import JSZip from "jszip" import FileSaver fro..

2021.09.13  

[JS] 자바스크립트 파일 용량 표현하기

자바스크립트 파일 용량 표현하기 function getfileSize(size) { var s = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']; var e = Math.floor(Math.log(size) / Math.log(1024)); return (x / Math.pow(1024, e)).toFixed(2) + " " + s[e]; };

2021.09.13