mirabo01 님의 블로그

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

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