# lighthouse

[5/24 TIL] 강의 정리
https://codeclimate.com/내 깃 계정을 연결하면 내가 짠 코드에대해서 분석해주고, 평가해준다.https://storybook.js.org/https://www.chromatic.com/내가 만든 컴포넌트를 배포해서 디자인팀과

라이트하우스와 함께한 성능 개선 고군분투기
정말 아~무것도 몰랐던 신입 개발자가 라이트하우스로 퍼포먼스 점수 30점을 올렸던 경험담을 소개합니다.

Chrome lighthouse를 이용하여 웹 최적화 하기
WebP 이미지를 css에서 사용하기 위해서는 Modernizr가 가장 쉬운 방법이다. Modernizr는 브라우저에서 감지할 수 있는 특성을 감지하는 라이브러리인데, 이를 이용하면 .no-webp 아니면 .webp 를 이용하여 <link rel=preload>
[project] perfomance 측정 & 최적화 과정에서 얻은 것
기존 프로젝트에서 IT보고서 탭 최적화를 진행하고 있습니다. lazy-loading라이브러리를 이용해서 viewport가 일정위치에 이동하면 애니메이션이 동작하게끔 했습니다. 코드를 간략하게 살펴보면 다음과 같습니다.각 섹션에는 각 차트(amchart.js)가 존재하고

Lighthouse 사용법
Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구이다. 어떤 웹 페이지든 (그것이 공개되었든, 인증이 필요하든) 사용할 수 있다.

PWA
리액트를 사용하여 진행하는 프로젝트에서 모바일 상에서도 쉽게 접근할 수 있도록 하고자 PWA를 사용하게 되었다.PWA는 Progressive Web Application의 약자로 웹 애플리케이션과 네이티브 애플리케이션의 장점을 합친 것이라고 볼 수 있다. 또한, 오프라

React Rendering 속도 측정
React 프로젝트에서 서버사이드 렌더링, 클라이언트사이드 렌더링 중 어느 것이 렌더링 속도가 더 빠른지 시각적으로 비교해야할 자료가 필요했다. 그래서 렌더링 측정 툴을 구글링하던 도중 lighthouse라는 툴을 발견했다. 이번 글은 lighthouse를 쓰면서 새로

lighthouse
https://developers.google.com/web/tools/lighthouse형남님이 알려준 퍼포먼스 측정하고 리포트까지 만들어주는 크롬 익스텐션!80점으로 높여보자..!