taek2-0310 님의 블로그

브라우저 렌더링 과정과 DOM

1. 브라우저 렌더링 과정 개요[요청] → [HTML 파싱 → DOM] → [CSS 파싱 → CSSOM] → [렌더 트리 생성] → [레이아웃] → [페인트]단계설명1. 요청/응답DNS를 통해 IP 주소를 확인하고 서버에 리소스 요청2. DOM 생성바이트 → 문자 → 토큰 → 노드 → DOM 트리3. CSSOM 생성CSS 파일을 동일한 파싱 과정으로 CSSOM 트리 생성4. JS 실행자바스크립트 엔진이 AST 생성 → 바이트코드 실행5. 렌더 트리DOM + CSSOM 결합 (화면에 표시되는 노드만 포함)6. 레이아웃각 요소의 위치와 크기 계산7. 페인트픽셀로 화면에 그리기2. 요청과 응답브라우저 주소창에 URL을 입력하면:URL의 호스트 이름이 DNS를 통해 IP 주소로 변환된다.해당 IP 주..

객체는 흔히 우리가 너무 많이 쓰지만 프로토타입은 경험할 기회가 흔치 않아요. 저는 항상 무언가를 배우게 되면 “그래서 언제 쓰는데?”라는 생각이 들기 때문에 이 블로그에도 그런 생각을 담아 작성해보았습니다. 혹시 사용하는 상황이라도 기억해둔다면 “아, 이런 상황에서 프로토타입을 쓰던데?” 하며 다시 돌아와 개념을 다지고 사용할 수 있지 않을까요?1부. 객체 리터럴 — 객체를 만드는 가장 쉬운 방법객체가 뭔지부터자바스크립트에서 원시값(숫자, 문자열, 불리언 등)을 제외한 거의 모든 값은 객체입니다. 함수도, 배열도, 정규표현식도 객체예요.객체는 키(key)와 값(value)으로 이루어진 프로퍼티의 집합입니다. 그 중에서 값이 함수인 프로퍼티는 특별히 메서드라고 부릅니다.const person = { n..

this란? 🔍this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. 가장 일반적으로는 객체의 메서드 안에서 사용되며 이를 통해 동일한 메서드를 서로 다른 객체에서 재사용할 수 있다.일반 변수는 선언된 위치(렉시컬 스코프)에 의해 값이 결정되지만 this는 다르다. 함수가 어떤 방식으로 호출(바인딩)되었는지에 따라 가리키는 값이 동적으로 결정된다.쉽게 비유하자면 "나"라는 단어와 같다. "나는 밥을 먹었다"에서 '나'가 누구인지는 그 말을 누가 했느냐에 따라 달라지는 것처럼 this도 누가(어떤 컨텍스트가) 함수를 호출했느냐에 따라 달라진다. this가 결정되는 4가지 규칙 🚨1. 기본 바인딩아무런 컨텍스트 없이 함수를 단독 호출하면 this는 전역 객체를 가리킨다. ..

1. useRef — "렌더링 없이 값을 기억하고 싶을 때"useRef는 두 가지 역할을 한다.① 렌더링을 유발하지 않는 변경 가능한 값 저장소const countRef = useRef(0);const handleClick = () => { countRef.current += 1; console.log(countRef.current); // 렌더링 없이 값 업데이트}; 구분useStateuseRef값 변경 시 렌더링OX렌더링 간 값 유지OO용도UI에 반영할 상태내부적으로만 필요한 값 ② DOM 엘리먼트 직접 참조const inputRef = useRef(null);const focusInput = () => { inputRef.current.focus(); // DOM API 직접 호출};retur..

당신이 이미 겪어본 이상한 동작아래 코드를 보자.console.log(name); // undefined... 왜?var name = '철수';console.log(name); // '철수'에러가 아니다. undefined다. 선언도 하기 전에 변수를 참조했는데 에러가 나지 않는다. 대부분의 개발자는 이걸 "호이스팅 때문"이라고 설명하고 넘어간다. 하지만 호이스팅은 현상의 이름이지, 원인이 아니다.이번 글에서는 이 현상이 왜 생기는지를 JS 엔진이 코드를 처리하는 방식 즉 실행 컨텍스트 수준에서 완전히 해부한다.1. JS 엔진은 코드를 두 번 훑는다JS 엔진은 코드를 실행하기 전에 반드시 평가 단계를 먼저 거친다. 이 평가 단계와 실제 실행 단계, 총 두 번의 훑기가 일어난다. Creation phase..

ky란? 🔍ky는 브라우저 내장 fetch API를 기반으로 만든 경량 HTTP 클라이언트입니다. sindresorhus가 만들었고 순수 ESM 패키지로 배포됩니다.pnpm install kyimport ky from 'ky';const data = await ky.get('https://api.example.com/users').json();딱 이게 전부입니다. fetch를 직접 쓸 때처럼 response.json()을 따로 호출하거나 Content-Type 헤더를 매번 설정할 필요가 없어요. axios 대신 ky를 써야 하는 이유⭐️1. 성능차이에 비해 번들 사이즈가 압도적으로 작다.단일 GET 요청: Axios가 약 3% 빠름POST 요청: Ky가 약 3% 빠름동시 요청: Axios가 약 3% ..

선언과 할당이 분리되는 순간, 호이스팅이 시작된다. var부터 let/const까지, 자바스크립트 실행 컨텍스트의 작동 원리를 파헤쳐보자.변수 선언과 할당, 그리고 호이스팅🪝자바스크립트 엔진은 코드를 실행하기 전, 컴파일 단계에서 먼저 변수 선언을 스캔한다. 이때 var로 선언된 변수는 스코프 최상단으로 "끌어올려진다(hoisted)". 그러나 선언만 올라갈 뿐, 할당은 원래 자리에 그대로 남는다.호이스팅인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.var의 호이스팅// 우리가 작성하는 코드console.log(name); // 에러가 아니라 undefinedvar name = "Alice";c..

들어가며 🚪React를 어느 정도 써본 개발자라면 Custom Hook이 낯설지 않을 겁니다. 그런데 "잘 쓰고 있어?"라고 누군가 묻는다면, 선뜻 대답하기가 어렵습니다. Hook을 만들어본 적 있다면 이런 고민 한 번쯤 해봤을 겁니다. "이거 굳이 Hook으로 빼야 하나?" "너무 많은 걸 한 Hook에 넣은 건 아닌가?" 그리고 더 근본적으로는 — 어떻게 해야 잘 쓰는 건지조차 잘 모르겠다는 느낌. 오늘은 그 고민을 조금 덜어보고자 합니다. Custom Hook을 언제 만들어야 하는지, 어떤 실수를 피해야 하는지, 그리고 좋은 Hook이란 어떤 모습인지를 컴포넌트의 목적과 책임이라는 관점에서 풀어보겠습니다.Custom Hook? 🪝커스텀 훅이란 개발자가 직접 만든 hook으로 몇가지 규칙이 존재한..

this란? 🔍this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. 가장 일반적으로는 객체의 메서드 안에서 사용되며 이를 통해 동일한 메서드를 서로 다른 객체에서 재사용할 수 있다.일반 변수는 선언된 위치(렉시컬 스코프)에 의해 값이 결정되지만 this는 다르다. 함수가 어떤 방식으로 호출(바인딩)되었는지에 따라 가리키는 값이 동적으로 결정된다.쉽게 비유하자면 "나"라는 단어와 같다. "나는 밥을 먹었다"에서 '나'가 누구인지는 그 말을 누가 했느냐에 따라 달라지는 것처럼 this도 누가(어떤 컨텍스트가) 함수를 호출했느냐에 따라 달라진다. this가 결정되는 4가지 규칙 🚨1. 기본 바인딩아무런 컨텍스트 없이 함수를 단독 호출하면 this는 전역 객체를 가리킨다. ..

CSS의 기본 철학은 구조(HTML)와 표현(CSS)의 분리이다. 따라서 아래와 같이 HTML은 버튼이라는 의미만을 담고, 스타일은 CSS로 분리하는 것이 일반적이다. 이러한 방식은 코드의 재사용성을 높이고, 유지보수를 용이하게 하며, 스타일을 일관되게 변경할 수 있도록 한다.//HTML확인//CSS.primary-btn { background-color: blue; color: white; padding: 8px 16px;} 또한 인라인 스타일도 존재한다. 이는 HTML 내부에 스타일을 직접 작성하는 방식으로, 구조와 표현의 분리라는 장점을 살리기 어렵기 때문에 일반적으로 지양되며 많은 개발자들이 선호하지 않는다. 확인 Tailwind 🎨Tailwind는 HTML에 미리 정의된 작은 단위의 ..