mirabo01 님의 블로그

1. 왜 자동 모니터링이 필요한가성능은 “개발할 때”만 좋은 게 아니라,서비스가 배포되고 시간이 지나도 유지되어야 한다.📉 실제 사례이미지가 추가되며 LCP 악화JS 번들이 커져 초기 로딩 지연배포 후 특정 페이지 CLS 급상승이런 문제는 사람이 매번 확인할 수 없기 때문에자동화된 측정 시스템이 필요하다.2. Lighthouse CI 개요Lighthouse CI (LHCI) 는 Google이 제공하는웹 성능 자동 점검 도구다.Lighthouse를 명령어 형태로 실행하고,CI/CD 파이프라인에 넣어 매 배포마다 자동 측정할 수 있다.설치 및 초기화npm install -g @lhci/clilhci wizard✅ 설정 과정 중어떤 URL을 테스트할지어디에 결과를 저장할지를 지정한다.간단한 실행 예시lhci..

1. Core Web Vitals란?Core Web Vitals는 Google이 웹페이지 품질을 평가하기 위한 3대 핵심 지표다.지표 의미 목표 수치LCP (Largest Contentful Paint)페이지의 주요 콘텐츠가 언제 보이는가2.5초 이하FID (First Input Delay)사용자가 처음 상호작용할 때 지연 시간100ms 이하CLS (Cumulative Layout Shift)화면이 예기치 않게 흔들리는 정도0.1 이하📊 이 세 가지는 Google 검색 노출 순위에 직접적인 영향을 준다.2. LCP (Largest Contentful Paint) — “언제 주요 콘텐츠가 보이나?”✅ 정의페이지의 가장 큰 콘텐츠(이미지, 텍스트 블록) 가 사용자 화면에 완전히 표시되는 데 걸리는 시간.즉..

1. 네트워크 병목이란 무엇인가비동기 로직이 아무리 빠르더라도,네트워크 요청이 느리면 사용자는 “느린 사이트”라고 느낀다.🧠 핵심 진실네트워크 속도는 브라우저 밖(인터넷)에서 결정된다.하지만 “언제 요청하느냐”와 “무엇을 캐싱하느냐”는 개발자가 결정할 수 있다.2. 네트워크 요청의 흐름브라우저가 서버에 데이터를 요청할 때 거치는 과정 👇1️⃣ DNS 조회 → IP 주소 찾기2️⃣ TCP 연결 (3-way handshake)3️⃣ HTTPS 암호화 협상 (TLS)4️⃣ 요청(Request) 전송5️⃣ 서버 응답(Response) 수신6️⃣ 브라우저 캐싱 및 파싱✅ 즉, JS 코드의 fetch() 한 줄 뒤에는 수십 ms의 지연이 숨어 있다.이걸 줄이는 게 “네트워크 최적화”의 핵심이다.3. Fetch ..

1. 비동기란 무엇인가?비동기(Asynchronous)란“코드가 순서대로 끝나지 않아도 다음 작업이 실행되는 구조” 를 말한다.자바스크립트는 싱글 스레드(single thread) 언어이지만,브라우저의 Web API, Task Queue, Microtask Queue 덕분에마치 병렬처럼 작동한다.🧠 핵심 개념JS는 하나의 실행 스레드만 가진다.하지만 Web API(브라우저)가 백그라운드에서 일을 대신 처리한다.JS는 그 결과를 큐(Queue)로 받아 순서대로 실행한다.2. 자바스크립트는 싱글 스레드, 브라우저는 멀티 스레드많은 입문자들이 혼동하는 부분이다.자바스크립트 자체는 싱글 스레드이지만,브라우저는 멀티 스레드 구조로 동작한다 👇구성 요소 역할JS 엔진(V8)코드 실행 (싱글 스레드)Web API..

1. 메모리 누수란 무엇인가메모리 누수(Memory Leak)는더 이상 필요하지 않은 객체가 여전히 참조되고 있어GC(가비지 컬렉션)에 의해 회수되지 못하는 현상을 의미한다.즉, “쓰레기가 쌓이는데 버리지 못하는 상황”이다.🧠 예시페이지를 열어둔 채 시간이 지날수록 브라우저가 느려짐SPA 앱에서 라우팅 이동 후에도 이전 페이지 데이터가 남아 있음setInterval, Event Listener가 해제되지 않음2. 브라우저의 메모리 구조 다시보기브라우저의 JS 엔진(V8 등)은 크게 두 가지 영역으로 메모리를 관리한다 👇영역 설명Stack함수 호출, 기본형 데이터 저장 (Number, Boolean 등)Heap객체, 배열, 함수 등 동적 데이터 저장function demo() { const x = 1..

1. V8 엔진이란?V8은 Google Chrome과 Node.js에 탑재된 자바스크립트 엔진이다.C++로 작성되었고,자바스크립트 코드를 기계어(Machine Code) 로 직접 변환하여 실행한다.🔍 다른 브라우저 엔진Chrome → V8Firefox → SpiderMonkeySafari → JavaScriptCore (Nitro)Edge(Chromium) → V8즉, 우리가 console.log('Hello'); 를 실행할 때그건 사실상 “C++ 코드로 변환된 실행 파일이 CPU 위에서 작동하는 것”이다.2. V8의 주요 구성 요소V8 엔진은 크게 아래와 같이 구성되어 있다 👇┌─────────────────────────────────────────┐│ JavaScript Sou..

1. 렌더링 최적화란 무엇인가렌더링 최적화(Rendering Optimization)란Reflow, Repaint, Composite 단계를 최소화하여 브라우저의 일 부담을 줄이는 것을 의미한다.쉽게 말해,“브라우저에게 불필요한 계산과 그리기 작업을 덜 시키는 것.”JS 로직이 아무리 빠르더라도,Layout이 계속 다시 계산된다면 프레임 드랍(버벅임)은 피할 수 없다.2. 핵심 목표렌더링 최적화의 핵심은 다음 3가지를 줄이는 것이다 👇목표 설명✅ Reflow 최소화DOM 구조 변경, 크기·위치 재계산 줄이기✅ Repaint 최소화색상·배경 등 시각 요소만 변경 시 효율화✅ Composite 활용 극대화GPU가 담당하는 합성 단계로 성능 전환3. Reflow 최소화 전략(1) DOM 접근 횟수 줄이기DO..

1. 브라우저 렌더링이란?렌더링(Rendering)은브라우저가 HTML, CSS, JavaScript, 이미지 등의 자원을 해석해사용자에게 보이는 화면(Pixels) 을 만드는 과정이다.즉, “텍스트 파일을 시각적 결과로 변환하는 과정”이 바로 렌더링이다.2. 렌더링의 전체 흐름브라우저가 HTML 파일을 받으면 다음 순서로 진행된다 👇1️⃣ HTML 파싱 → DOM 트리 생성 2️⃣ CSS 파싱 → CSSOM 트리 생성 3️⃣ DOM + CSSOM → Render Tree 결합 4️⃣ Layout (배치) → 요소 크기와 위치 계산 5️⃣ Paint (그리기) → 픽셀 단위로 색상, 테두리, 그림자 적용 6️⃣ Composite (합성) → GPU가 화면에 출력이 전체 과정을 Critical ..

1. 기본 구조 이해: 이벤트 루프의 세 친구자바스크립트 런타임은 기본적으로 세 가지 핵심 요소로 돌아간다 👇구성 요소 역할콜 스택(Call Stack)실행 중인 코드의 “현재 위치”태스크 큐(Task Queue)타이머, DOM 이벤트, fetch 콜백 등 대기 중인 비동기 작업마이크로태스크 큐(Microtask Queue)Promise, MutationObserver 같은 “짧은 비동기” 대기 공간그리고 이 셋을 끊임없이 돌며 조율하는 것이 바로 이벤트 루프(Event Loop) 다.“이벤트 루프는 브라우저의 심장처럼 계속 뛰며,콜 스택이 비면 큐에 쌓인 작업들을 순서대로 처리한다.”2. 동기 vs 비동기 흐름 다시보기console.log("1");setTimeout(() => console.log(..

1. 비동기란 무엇인가먼저, 동기와 비동기의 차이를 명확히 보자.console.log("A");setTimeout(() => console.log("B"), 1000);console.log("C");출력 결과:ACB✅ setTimeout은 비동기 함수이기 때문에 1초 후 실행된다.✅ JS 엔진은 B를 기다리지 않고 다음 줄(C)을 실행한다.즉, “한 작업이 끝나길 기다리지 않고 다음으로 넘어간다.”이게 바로 비동기다.2. 콜백(callback) 방식의 한계초기의 자바스크립트 비동기 코드는 콜백 함수로 처리했다.function getData(callback) { setTimeout(() => { callback("서버에서 받은 데이터"); }, 1000);}getData((data) => { c..