웹 성능을 제대로 이해하고 개선하려면 핵심 지표(Core Web Vitals)를 먼저 알아야 한다. Google에서 정의한 Core Web Vitals는 사용자가 실제로 느끼는 웹 경험을 정량적으로 측정할 수 있도록 설계되었다. 여기서는 FCP, LCP, CLS, TTI의 의미와 측정 방법, 그리고 실무에서 개선할 수 있는 전략을 자세히 살펴본다. 1. FCP (First Contentful Paint)FCP는 사용자 화면에 처음으로 텍스트, 이미지, SVG 등 콘텐츠 요소가 렌더링되는 시점을 의미한다. 즉, 브라우저가 빈 화면에서 벗어나 “사이트가 살아 있다”는 신호를 주는 순간이다.권장 기준: 1.8초 이하중요성: 사용자는 화면에 무언가 뜨기를 기대하며, 이를 통해 첫인상이 결정된다.예시: 사용자가 ..

React 를 이용한 웹 개발에서 성능 최적화와 관련해 가장 많이 언급되는 개념 중 하나가 바로 Virtual DOM이다. React를 비롯한 현대 프론트엔드 라이브러리는 이 개념을 활용해 효율적인 렌더링을 구현한다. 1. Virtual DOM이란?실제 DOM과 달리 Virtual DOM은 메모리 상에 존재하는 가벼운 자바스크립트 객체 사본으로, 상태(state)나 속성(props)이 바뀌면 실제 DOM을 직접 수정하지 않고 먼저 Virtual DOM을 갱신한다. 그 후 이전 Virtual DOM과 비교(diffing)하여 최소한의 변경만 실제 DOM에 반영하는 과정을 중재(또는 조정. Reconciliation)이라고 부른다. 2. Virtual DOM의 작동 원리1. 컴포넌트 상태 변경 → Virtu..

브라우저에서 이벤트는 단순히 한 요소에서만 끝나지 않는다.사용자가 어떤 버튼을 클릭하면, 그 클릭 이벤트는 DOM 트리 전체를 따라 전파(propagation) 되며 여러 단계의 흐름을 거친다.이벤트 전파는 크게 두 가지 흐름으로 나뉜다 — 버블링(Bubbling) 과 캡처링(Capturing).1. 버블링 (Bubbling)이벤트 버블링은 가장 안쪽의 요소에서 시작해 바깥쪽 부모 요소로 전파되는 현상이다.즉, 특정 요소에 이벤트가 발생하면 해당 요소의 핸들러가 실행된 후,그 이벤트는 부모 → 조상 순으로 계속 전파되며 각각의 핸들러가 차례로 실행된다. 이때 이벤트가 시작된 가장 안쪽의 요소를 타깃(target) 이라 하며, event.target으로 접근할 수 있다. FORM DIV P..

자바스크립트를 배우다 보면 헷갈리는 개념 중 하나가 바로 this다.같은 코드처럼 보여도 어떻게 호출했느냐에 따라 가리키는 대상이 달라지기 때문이다.이번 글에서는 this의 본질과 동작 방식을 직관적으로 정리해본다. 1. this란 무엇인가?this는 자기 자신을 참조하기 위한 변수다.자바스크립트 엔진이 함수를 실행할 때마다 암묵적으로 생성하며, 함수 내부에서 지역 변수처럼 사용할 수 있다.this는 자신이 속한 객체 또는 생성될 인스턴스를 가리키며, 그 바인딩은 함수를 어떻게 호출했는지에 따라 동적으로 결정된다. 2. 왜 this가 필요한가?1. 객체의 메서드가 자기 자신을 참조하기 위해this가 없다면 person.name처럼 객체 이름을 직접 적어야 한다. 코드가 복잡해지면 이런 방식은 유지보수가 ..

자바스크립트를 배우다 보면 “선언이 끌어올려진다”는 말을 자주 듣게 된다.하지만 정확히 언제, 왜 이런 일이 벌어질까?이 글에서는 호이스팅이란 무엇인지, 평가 단계와의 관계, TDZ, var의 문제점,그리고 호이스팅이 왜 중요한 개념인지를 함께 살펴본다. 1. 호이스팅이란?호이스팅(Hoisting)은 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 미리 메모리에 등록하는 현상을 말한다.이로 인해 선언문이 실제 코드 아래에 있어도 마치 위로 끌어올려진 것처럼 작동한다.(Hoist 의 사전적 의미는 "무언가를 들어올리거나 들어올리는 행위" 이다.)console.log(name); // undefined (에러 아님)var name = "Jay";자바스크립트 엔진 내부에서는 다음과 같은 순서로 동..

자바스크립트에서 비동기 처리를 처음 접하면 대부분 콜백 함수를 사용한다.하지만 전통적인 콜백 패턴에는 몇 가지 문제점이 있다. 1. 콜백 패턴의 문제점1. 콜백 헬 (Callback Hell)비동기 함수 내부에서 또 다른 비동기 작업을 수행해야 할 때, 콜백 함수가 중첩되며 코드 복잡도가 급격히 증가한다.getData((res1) => { getMoreData(res1, (res2) => { getExtraData(res2, (res3) => { console.log(res3); }); });});코드가 계속 오른쪽으로 들여쓰기되어 가독성이 나쁘다.또한 비동기 처리 결과를 함수 외부로 반환하거나 상위 스코프 변수에 할당하기 어렵다.2. 에러 처리의 어려움콜백 내부에서 발생한 에러는..