반응형 Image Lazy Loading 기법으로 웹 성능 최적화하기 초기 로딩 시간을 단축해주는 Image Lazy Loading 기법 현재 화면에 보여지지 않는 이미지들은 lazy loading 처리를 통해 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상 시킬 수 있다. image lazy loading 기법은 무엇인지, 그리고 해당 기법을 IntersectionObserver API를 사용한 예시를 보면서 알아보자. Image Lazy Loading이란? 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 하게 만드는 기법 웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미룬다 영어 단어 중 'lazy'는 '가능한 길게 일을 미루는 행위'란 의미에 기반한다. lazy loading을 다루는 방식은 페이지 내의 거의 모든 리.. 2021. 10. 30. ZUM 기술 블로그 Fade in, Fade out 구현하기 IntersectionObserver API로 Fade in, Fade out 구현하기 ZUM 기술 블로그를 구경하다 디자인이 깔끔하고 이뻐서 클론해봤다. 정확히는 사이트의 Fade in, Fade out의 동작 방식이 궁금해서 직접 구현해봤다. 근데 이제 UI/UX를 곁들인.. 기능 구현 외에도 깔끔한 UI/UX 덕분에 가독성도 좋았다. 뭔가 집중이 된달까..그래서 전체적인 분위기나 모바일 대응도 구현했다. 동작 방식 알아보기 해당 블로그는 첫화면에 노출되는 포스트는 shown 클래스를 생성해서 바로 보여주게 된다. ➡️ 동적으로 클래스를 만듦 그 후 포스트들은 스크롤 다운 시 animate 클래스를 생성해서 보여주게 된다. ➡️ moveUp 애니메이션 작동, 포스트가 올라옴 ➡️ 각각 다른 anima.. 2021. 10. 10. IntersectionObserver API로 무한 스크롤 만들기 무한 스크롤(Infinite scroll) IntersectionObserver API로 TOC 만들기 글에 이어서 이번엔 무한 스크롤을 만들어 봤다. 이젠 구현만이 목적이 아닌 코드 스타일이나 프로그래밍 방식에 대해서도 신경을 쓰고 있다. '그래도 성장은 하고 있구나 🌱'라고 생각한다. 개발 전용차선 강의 사이트 다음과 같은 상황이라고 생각하고 구현을 했다. 내가 훗날 남을 가르칠 정도의 실력이 된다 느껴져서 나만의 개발 강의 사이트를 만들려고 한다. 편하게 강의 목록을 볼 수 있도록 무한 스크롤을 구현한다. 서버에서 받아온 응답 결과를 노출 시키기(강의 리스트 렌더링) 로딩하는 동안 로딩 중인 것을 표시하기 스크롤 바닥을 위치하면 새로운 강의 노출 더미 데이터 만들기 나는 일단 서버를 구현할 실력이 .. 2021. 10. 8. IntersectionObserver API로 TOC 만들기 IntersectionObserver API 특정 요소에 관측자(observer)를 생성해서 교차점을 관측할 수 있게 해주는 Web API이다. 따라서 클라이언트의 뷰포트(옵션 기본값)에 따라 다양한 동작을 넣을 수 있다. 이미지나 컨텐츠의 지연 로딩(lazy-loading) -> 초기 렌더링 시간 ⬇️ 사용자 경험 ⬆️ 사용자가 다른 페이지에 이동하지 않아도 되는 무한 스크롤(infinite-scroll) -> 예를 들면 유튜브, 앱 사용 시간 ⬆️ 뷰포트에 따라 애니메이션 효과 구현 -> 예를 들면 페이드인(fade-in), 페이드아웃(fade-out) 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고 -> 사용자가 해당 광고를 봤는지 안봤는지 관측 나는 IntersectionObserver()로.. 2021. 9. 20. 이전 1 다음 반응형
