LazyWon Story

목차 Image Lazy Loading이란? Intersection Observer API Intersection Observer API를 이용한 이미지 Lazy Load 구현 실무 적용 및 성능 측정 결과 Image Lazy Loading이란? 이미지 지연 로딩은 페이지 안에 있는 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩할 수 있도록 하는 기법이다. 웹 페이지 내에서 바로 이미지를 로딩하지 않고 로딩 시점을 뒤로 미루는 것이라 볼 수 있다. Image Lazy Loading을 이용하면 다음과 같은 두 가지 이점이 있다. 1. 성능 향상 페이지 초기 로딩 시 필요한 이미지의 수를 줄일 수 있다. 리소스 요청을 줄이는 것은 다운로드 bytes를 줄이는 것이며, 이는 유저가 사용할 수 있는 제한..

목차 들어가며.. throttle, debounce 함수 이용 requestAnimationFrame (rAF) 함수 이용 Passive Listener 들어가며.. 스크롤 이벤트를 이용한 성능 최적화를 위한 방법이 무엇이 있을지 알아보고자 한다. 보통 addEventListener()의 scroll 이벤트를 이용하여 특정 위치에 도달했을 때 어떤 액션을 취하도록 한다. document에 스크롤 이벤트를 등록하고, 특정 위치를 관찰하며 엘리먼트가 위치에 도달했을 때 실행할 콜백 함수를 등록하는 것이다. document.addEventListener("scroll", function() { console.log(`scroll`); }); 하지만 scroll 이벤트는 사용자가 스크롤 할 때마다 이벤트를 발생..

목차 [jQuery] $(document).ready()와 $(function(){}) [Vanila Javascript] window.onload 정리 [jQuery] $(document).ready()와 $(function(){}) 두 소스는 같은 역할을 한다. 외부 리소스, 이미지와는 상관 없이 브라우저가 DOM(Document Object Model) 트리를 생성한 직후에 실행된다. 따라서 $(document).ready()는 리소스들이 로드되기 전에 동작할 수 있다. window.onload 보다 더 빠르게 실행되며, 중복으로 사용하여 실행할 수 있고, 선언 순서대로 실행된다. .ready() 이벤트는 jQuery 3.0 이후부터는 사용하지 않는 것을 권장한다. 권장 방법 $(function()..

목차 들어가며.. 일반적인 script 태그 script 태그의 async, defer 들어가며.. HTML에 그 다음으로 많이 사용하는 방법으로, body 안에 마지막 줄에 script를 추가하는 방법이다. 이 방식을 이용하면 브라우저가 html 파일을 다운받아 파싱해서 페이지가 준비된 다음, 서버에서 자바스크립트 파일을 다운 받아 실행하게 된다. 즉, 렌더링 엔진이 script 태그를 파싱할 때는 이미 렌더링 엔진이 HTML 요소를 모두 파싱하여 DOM 생성이 완료된 이후가 된다. 따라서 DOM 이 완성되지 않은 상태에서 DOM을 조작하는 에러가 발생할 우려가 없다. 또한 자바스크립트 파일이 실행되기 전에 DOM 생성이 완료되어 렌더링 되므로, 페이지 로딩 시간이 단축된다는 이점이 있다. 하지만, 이..

목차 Promise의 등장 이유 Promise 객체 생성 Promise Chaining 막연하게만 알고 있던 Promise가 대체 무엇이고, 왜 등장하게 되었는지, 어떤 방식으로 사용할 수 있는지 ! Lazywon 게을러지기 전에 제대로 한번 공부해보자 ! 😂 🦄 들어가기 앞서.. Promise의 등장 이유!? 자바스크립트에서 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬(Callback Hell)로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러 처리가 곤란하며, 여러 개의 비동기 처리를 한 번에 처리하는데 한계가 있다는 단점이 존재한다. 잠깐, Callback Hell 이 뭔데? ..을 알아보기 전에 먼저 동기식 처리 모델과 비동기식 처리 모델에 대..

목차 문제상황 해결 문제상황 http://kenwheeler.github.io/slick/ 개발 중 autoplay: true 옵션을 주고 모바일(iOS, AOS)에서 확인 시, 첫 화면 로딩 시에는 autoplay가 동작하지만 스크롤 이후 혹은 해당 영역 터치 이후에는 autoplay가 작동하지 않았다. 아래 옵션을 추가하여 false로 설정했지만 소용없었다. pauseOnFoucs: false 포커스가 들어오면 슬라이드 이동 멈춤 pauseOnHover: false 마우스 호버 시 슬라이드 이동 멈춤 pauseOnDotsHover: false dot 호버 시 슬라이드 이동 멈춤 💡해결 구글링 한 결과 slick slider에서 제공하는 'slickPlay' 메서드를 사용하여 touchcancel, t..

목차 문제 상황 해결 [css] height: 100% vs height: auto 문제 상황 slick 라이브러리를 이용하여 웹뷰에 롤링 배너를 구현하는 중에 iOS에서만 초기 렌더링시에 이미지가 정상적으로 출력되지 않는 문제가 발생했다. (아직까지 왜 iOS에서만 그런 현상이 일어나는지 파악하지 못했다 .. ) 위 사진처럼 상단 메뉴 바로 아래 롤링 배너가 있어야 하는데 이미지가 로드는 되었지만 잘리는 것처럼 보였다. css 파일 내 .slick-slide의 min-height:1px 이었는데 해당 사이즈가 min-height으로 잡히는 것이었다. 💡해결 구글링 끝에 stack overflow에서 아래와 같은 글을 발견했다. 위 방법으로는 해결되지 않았다. .slick-slide 내 height: 1..

목차 jQuery를 이용한 스크롤 이동 JavaScript를 이용한 스크롤 이동 홈페이지나 모바일 웹뷰에서 기본적으로 많이 사용하는 TOP 버튼 클릭시, 상단으로 스크롤바 이동시키는 기능을 만들려고 한다. jQuery를 덜어내는 작업 중, 순수 JavaScript에서 어떤 식으로 작성하는지 기록해보고자 한다. jQuery를 이용한 스크롤 이동 윈도우 스크롤 이동시키기 $(window).scrollTop(0); 애니메이션 효과 주면서 스크롤 이동시키기 $('html, body').animate({ scrollTop: 0 }, 200); JavaScript를 이용한 스크롤 이동 윈도우 스크롤 이동시키기 window.scrollTop(0, 0); 부드럽게 이동하는 애니메이션 효과를 지정하여 스크롤 이동시키기...

목차 변수 바람직한 변수명 모던 자바스크립트 기초 다지기를 위한 공부입니다. let, var, const 구분이 아직도 잘 안되고, 엉터리로 되어 있는 코드 처음부터 잘 만들고 싶어 짚어 넘어가 보려 합니다. 변수 var 오래된 변수 선언 키워드로 현재는 잘 사용하지 않는 키워드이다. 예전에는 자바스크립트의 변수 선인이 var 로만 가능했었다. var 로 변수 선언을 할 경우 가장 큰 특징은 중복 선언이 가능하다는 점이다. var a = 10; console.log(a) // 결과 10 var a = 20; console.log(a) // 결과 20 var a = 30; console.log(a) // 결과 30 var 를 사용하면 중복으로 같은 변수명을 계속 선언하고 값을 넣어도 에러가 나지 않으며, ..