디자이너 최대리와 개발1팀 달리

[TL;DR] 리액트 환경이라면 react-lazyload 라이브러리가 참 좋다. 이미지 lazy loading에 앞서 뷰포트라는 개념을 알고 있는가? 1. 뷰포트(viewport) MDN 뷰포트 문서에 따르면 아래와 같다. 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다. 뷰포트 중에서도 지금 볼 수 있는 부분을 '시각적 뷰포트'라고 부릅니다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 '레이아웃 뷰포트'의 크기는 변하지 않지만 시각적 뷰포트는 더 작아집니다. 간단히 말..

https://dalichoi.tistory.com/32 웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지) 바쁜 현대인을 위한 간단 요약(TL;DR) 무손실 이미지를 압축하고 썸네일 이미지를 만들어 index 화면 로딩 속도를 개선한다. 대략 1mb 짜리 이미지를 100~200kb로 압축하고 또 그 이미지를 다시 줄여 결 dalichoi.tistory.com 이미지편에 이어 웹 성능 개선을 이어가보자. 이번에는 자바스크립트를 정리하는 편이다. 참고로 CRA로 만든 리액트 환경이다. 1. 사용하지 않는 의존성 제거 먼저 코드 중 사용하지 않는 의존성을 싹 걷어내는 작업부터 진행했다. 사용하지 않는 의존성을 확인하기 위해 npm-check 라이버러리를 이용했다. https://www.npmjs.co..

바쁜 현대인을 위한 간단 요약(TL;DR) 무손실 이미지를 압축하고 썸네일 이미지를 만들어 index 화면 로딩 속도를 개선한다. 대략 1mb 짜리 이미지를 100~200kb로 압축하고 또 그 이미지를 다시 줄여 결론적으로 10~20kb 용량의 썸네일 이미지로 대체하는 과정을 기록했다. 참고로 DB는 구글 파이어베이스(Firebase) 8 버전을 사용하고 있다. 새해에는 뭔갈 해야 할 것만 같은 초조함에 시달리다 못해 결국 미뤄놨던 숙제를 꺼냈다. 매일 보는 뉴스와 그날의 날씨를 다시 꺼내보기 쉽도록 취미삼아 만든 사이트가 하나 있다.(하지만 꺼내보기 어려움) 아래 링크한 '오늘의 날씨와 경제'라는 아주 직관적이고 재미없있는 이름의 사이트다.(weather&economy라서 weaco) https://w..