<aside> ⭐ 학습목표

• 백엔드 코드를 수정할 수 없을때 프론트엔드가 할 수 있는 최적화방법
  • 성능 측정 도구
  • 프로젝트 최적화 / 고도화 </aside>

<aside> 💬 TIL

성능 최적화가 중요하다, 포트폴리오에 최적화에 대한 고민과 과정, 성과를 넣어봐라 라는 이야기를 몇차례 들었던 것 같다. 그런데 다른 한편으로는 성능 최적화는 현업에서 경험해보는 것이 아니면 그 필요성과 과정을 이해하기 어렵다는 말도 들은 적이 있었던 것 같다.

좀 더 빠르고, 유저의 편의성을 개선한 환경을 만들어나가는 것에 관심이 많은 것은 사실이지만, 이를 어떠한 방식으로 풀어나가야 하는지는 사실 잘 모르겠다. 코드 최적화 또한 주도적으로 해본 경험이 없어 어려웠고, 내가 해온 작은 프로젝트들에서 어떻게 최적화를 시도해봐야 할지도 사실 아직도 잘 모르겠다. 신입의 입장에서 성능 최적화의 양면성에 대한 고민을 하게 되었던 것 같다.

다만 이번 프리온보딩을 통해 관련 개념에 대해 알게되었고, 특히 웹 성능과 성능 개선에 대해 구글 문서가 너무나도 잘 알려주고 있어서 학습에 대한 의지가 조금 더 불타올랐던 것 같다. (https://web.dev/?hl=ko) 최근에는 많은 공식적인 문서들이 한국어로도 너무나 잘 번역이 되어 있다는 사실에 놀랍기도 하다.

이번 강의는 조금 늦게 복습을 하게 되었는데, 복습을 하다보니 웹 성능 개선을 위한 Web Vitals에 대한 부분이 가장 흥미로웠다. 지난 1월에 당시 강의를 들으며 Core Web Vitals의 FID가 INP로 대체될 것이라는 이야기를 나누었었는데, 24년 3월 12일에 대체된다고 한다. 이러한 업데이트를 쫓아가며 주도적으로 일을 하게 되는 날들이 얼른 왔으면 좋겠다.

</aside>

📖 table of contents

1. 성능 측정 툴 소개 및 사용법

▪️ Lighthouse

1. 웹 성능을 분석하는 오픈소스
2. 주요기능 ( 💬 성능분석과 접근성검사가 중요하다고 한다! )
   1. 성능분석
   2. 접근성검사
   3. SEO평가
   4. PWA기준 평가
3. Lighthouse 주의사항
   1. 로컬환경 이라면 프로덕션 빌드(npm run build) 또는 배포후에 테스트한다.
   2. 가급적이면 Incognito (시크릿 모드)에서 테스트한다.
   3. node_modules 내에서 발생하는 에러들은 무시 (해결하고 싶다면 해당 패키지 제거)
4. Lighthouse 사용법
   1. Production build에서 확인

      1. Production build시 나름의 최적화가 진행되어 web vital이 상당부분 개선된다. (Minification, Tree shaking)

      2. Minification

         1. 빈칸, 줄바꿈 등을 제거
         2. Vite 기준 dist/asset/.js

         

      3. Tree Shaking

         1. 사용하지 않는 코드를 제거하는 방식을 말하며, 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 명명
   2. dev에서는 불필요한 내용들이 많이 보인다.
      1. 설치한 라이브러리에서 뭘 수정하라는 등의.. 이런걸 반영하려면 모든 라이브러리를 fork 해서 수정해야 한다.

$$ •\;•\;• $$

Lighthouse 측정 항목

1. Performance - 성능
2. Accessibility - 접근성
3. Best Practices - 보안 관련
4. SEO - 검색 최적화