mirabo01 님의 블로그

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..

1. 클래스란 무엇인가클래스(Class)는 객체를 만들기 위한 청사진(템플릿) 이다.다른 언어(Java, C++)에서는 원래부터 존재하던 개념이지만,자바스크립트는 2015년(ES6) 이후에 문법적으로 추가되었다.class User { constructor(name) { this.name = name; } sayHi() { console.log(`안녕, 나는 ${this.name}`); }}const kb = new User("기범");kb.sayHi(); // 안녕, 나는 기범✅ constructor는 객체가 생성될 때 자동 실행되는 생성자 함수✅ 클래스 내부 메서드는 User.prototype에 저장된다✅ 즉, 클래스는 “보기 좋은 프로토타입 문법”이다2. 클래스와 프로토타입의 관계위..

1. 프로토타입이란 무엇인가자바스크립트는 클래스 기반 언어(C++, Java)와 달리프로토타입 기반(Prototype-based) 언어다.즉, 모든 객체는 다른 객체를 상속(prototype link) 받아서 동작한다.“모든 객체는 자신의 부모 역할을 하는 원형(Prototype)을 가진다.”const user = { name: "기범" };console.log(user.__proto__); // Object.prototype✅ 모든 객체는 내부적으로 __proto__ (또는 [[Prototype]])를 갖는다.✅ 이걸 통해 상위 객체의 속성과 메서드를 참조할 수 있다.2. 프로토타입 체인(Prototype Chain)프로토타입 체인은 상속의 연결 고리다.자바스크립트는 객체의 프로퍼티를 찾을 때 다음 순..

1. 클로저란 무엇인가MDN에서는 이렇게 정의한다 👇“클로저는 함수와 그 함수가 선언될 때의 렉시컬 환경(Lexical Environment) 의 조합이다.”즉, 함수가 자신이 선언된 스코프(환경)를 기억하는 현상이 바로 클로저다.쉽게 말해,“함수가 태어난 그 순간의 기억을 평생 가지고 있는 것.”2. 기본 예시function outer() { const name = "기범"; function inner() { console.log(name); } return inner;}const fn = outer();fn(); // 기범✅ outer()가 끝나서 보통이라면 name 변수는 사라져야 한다.✅ 하지만 inner()가 name을 기억하고 있음 → 이것이 클로저!3. 왜 클로저가 만들어질까?..

1. this란 무엇인가this는 현재 실행 중인 컨텍스트(Context) 를 참조하는 특별한 키워드다.즉, 코드가 “누구의 입장에서 실행되었는가” 에 따라 그 대상이 달라진다.this는 정의될 때가 아니라, 실행될 때 결정된다.이게 핵심이야.2. 전역 컨텍스트에서의 this브라우저 환경에서는 전역 this가 window 객체를 가리킨다.console.log(this === window); // trueNode.js에서는 global 또는 module.exports를 가리킨다.즉, 전역 this는 환경에 따라 다르다.3. 함수에서의 this (기본 바인딩 규칙)function showThis() { console.log(this);}showThis(); // window (브라우저) / undefine..

1. 자바스크립트는 싱글 스레드 언어다먼저 전제부터 정확히 잡자.자바스크립트는 싱글 스레드(Single Thread) 기반으로 동작한다.즉, 한 번에 하나의 작업만 실행할 수 있다.console.log("1");console.log("2");console.log("3");출력:123단순하죠?그런데 다음 코드를 보면 이야기가 달라진다.console.log("1");setTimeout(() => console.log("2"), 0);console.log("3");출력:132왜 0초인데 “2”가 나중에 실행될까?그 답이 바로 이벤트 루프(Event Loop) 에 있다.2. 콜 스택(Call Stack)이란?콜 스택은 자바스크립트 엔진이 현재 실행 중인 코드를 관리하는 작업 목록(Stack) 이다.예시 👇fu..

1. 이벤트 위임이란 무엇인가이벤트 위임(Event Delegation)은 말 그대로“하위 요소의 이벤트를 상위 요소가 대신 처리하는 방식”이다.HTML 구조 예시 👇 HTML CSS JavaScript보통은 이렇게 각 에 클릭 이벤트를 하나씩 걸지만 —document.querySelectorAll("li").forEach((item) => { item.addEventListener("click", () => console.log(item.textContent));});이건 비효율적이야.가 100개라면 이벤트 리스너도 100개 생기고,동적으로 추가된 항목에는 작동하지 않아.그래서 이렇게 바꾼다 👇document.getElementById("menu").addEventListener("click..