ADD : [Performance] 분석 툴 소개 글 추가

Author: dev-splin

_posts/Performance/2025-05-01-performance-analysis-tools.md

@@ -0,0 +1,32 @@
+---
+title: "[최적화] : 분석 툴 소개 및 기본내용"
+excerpt_separator: <!--more-->
+categories:
+  - PERFORMANCE
+  - "Analysis Tools"
+tags:
+  - PERFORMANCE
+  - "Analysis Tools"
+# 이미지 url (썸네일 필요한 경우 추가)
+# image: /assets/img/thumbnail/image.png
+# 기본 비노출 상태, 노출하고 싶은 경우 아래 옵션 제거
+published: true
+---
+
+## 분석 툴 소개
+
+### 크롬 개발자 도구
+크롬 개발자 도구는 웹 개발자들이 웹 페이지의 성능을 분석하고 개선하기 위한 도구입니다. 이 도구는 <span class="highlighting-underline">다양한 기능을 제공하여 개발자들이 웹 페이지의 성능을 개선하고 디버깅</span>할 수 있도록 도와줍니다.
+
+#### Network 패널
+웹 페이지에서 발생하는 모든 네트워크 트래픽을 상세하게 알려줍니다. 이를 통해 <span class="highlighting-underline">어떤 리소스가 어느 시점에 로드되는지, 해당 리소스의 크기 등을 확인</span>할 수 있습니다.
+
+#### Performance 패널
+웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줍니다. Network 패널에서 봤던 리소스가 로드되는 타이밍뿐만 아니라, 브라우저의 메인 스레드에서 실행되는 자바스키립트를 차트 형태로 볼 수 있어 <span class="highlighting-underline">이 패널을 통해 어떤 자바스크립트 코드가 느린지 확인</span>할 수 있습니다.
+
+#### Lighthouse 패널
+웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴입니다. <span class="highlighting-underline">성능 점수를 측정하고 개선 가이드를 확인함으로써 어떤 부분을 중점적으로 분석하고 최적화</span>해야 하는지 알 수 있습니다.
+
+
+### webpack-bundle-analyzer
+직접 설치해야 하는 툴로 webpack을 통해 번들링된 파일이 어떤 코드, 어떤 라이브러리를 담고 있는지 보여줍니다. 최종적으로 <span class="highlighting-underline">완성된 번들 파일 중 불필요한 코드가 어떤 코드이고 얼만큼의 비중을 차지하고 있는지 확인</span>할 수 있습니다.