브라우저가 클라이언트로부터 요청을 받고 서버로부터 리소스를 받아 처리하는 과정이다. 🌐 1. 클라이언트가 서버에 접근 (HTTP Request) 사용자가 URL 을 입력하거나 링크를 클릭하면 브라우저는 다음을 수행한다.DNS 조회 → IP 주소 획득서버와 TCP 연결HTTPS 면 SSL/TLS 핸드셰이크서버에 HTTP 요청 전송(GET /index.html) 📦 2. 서버가 HTML, CSS, JS 등 리소스를 응답 서버는 요청된 HTML 문서를 먼저 보내고,HTML 에 링크된 CSS/JS/이미지 파일들을 동시에 추가 요청하게 된다. 🧩 3. HTML 파싱 → DOM 트리(DOM Tree) 생성 HTML 문서는 문자열이므로 이를 분석해 DOM(Document Object Model) 트리를 만..

브라우저 렌더링 과정

브라우저가 클라이언트로부터 요청을 받고 서버로부터 리소스를 받아 처리하는 과정이다. 🌐 1. 클라이언트가 서버에 접근 (HTTP Request) 사용자가 URL 을 입력하거나 링크를 클릭하면 브라우저는 다음을 수행한다.DNS 조회 → IP 주소 획득서버와 TCP 연결HTTPS 면 SSL/TLS 핸드셰이크서버에 HTTP 요청 전송(GET /index.html) 📦 2. 서버가 HTML, CSS, JS 등 리소스를 응답 서버는 요청된 HTML 문서를 먼저 보내고,HTML 에 링크된 CSS/JS/이미지 파일들을 동시에 추가 요청하게 된다. 🧩 3. HTML 파싱 → DOM 트리(DOM Tree) 생성 HTML 문서는 문자열이므로 이를 분석해 DOM(Document Object Model) 트리를 만..

2025.12.11

🧠 프로토타입이란?프로토타입은 Javascript 에서 객체들이 서로 메서드나 속성을 공유하도록 하는 메커니즘이다.모든 객체는 자신의 부모 역할을 하는 또 다른 객체를 참조하고, 그 부모 객체를 통해 공통 기능을 상속받는 구조이다. 이 구조를 프로토타입 체인(prototype chain) 이라고 한다. 🧩 함수와 프로토타입의 관계Javascript 에서 모든 함수(Function) 는 기본적으로 하나의 prototype 객체를 자동으로 가지고 있다.함수 생성 시 자동으로 prototype 객체가 생긴다. 1. Obo 라는 함수 생성Obo 함수 생성 시 prototype 객체가 자동으로 생성 2. Obo 프로토 타입 객체의 constructor 멤버변수Obo 함수의 프로토타입 객체는 construc..

선택적 체이닝(Optional Chaining)중첩된 객체의 프로퍼티나 메서드에 접근할 때, 중간에 null 또는 undefined 가 있을 경우 에러 없이undefined 를 반환문법 : 객체 접근 시 "?." 를 사용null 이나 undefined 일 경우 접근을 중단하고 즉시 undefined 반환 예시const person = { name: "John", address: { city: "New York", zipCode: "10001" }};// 기존 방식 (에러 발생 위험)console.log(person.address.zipCode); // "10001"console.log(person.contact.phone); // 오류: cannot read property 'phone'..

oninput 과 keydown, keyup 은 모두 input 값 변화를 감지할 때 발생 시점과 감지 가능한 키 종류, 사용 권장 여부에차이가 있다. 이벤트 발생 시점 감지 범위 특징 및 주의점 oninputinput의 값이 실제로 변경될 때마다 즉시 발생입력·복사·붙여넣기·삭제 등값이 바뀌면 항상 발생, 실시간keydown키를 누른 순간 발생모든 키문자가 입력되기 전 이벤트 발생keyup키에서 손을 뗄 때 발생모든 키문자가 입력된 후 이벤트 발생 oninput값이 입력될 때마다 즉시 발생하여 실시간으로 변화 감지가 가능하다.oninput 은 키 입력 뿐만 아니라 마우스로 복사·붙여넣기·삭제 등 직접 입력이 아닌 경우에도 동작한다.폼 값 변경을 가장 확실하게 추적할 수 있다.// 실시간 감지 ..

async/await 와 Promise 는 비동기 처리를 위한 Javascript 의 핵심 개념이다. 🧩 Promise란? Promise 는 비동기 작업의 완료(또는 실패)를 나타내는 객체다. Promise 는 3가지 상태를 가진다. ⏳ pending (대기 중) ✅ fulfilled (성공) ❌ rejected (실패) function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("데이터 로드 완료!"); }, 1000); });}getData() .then((result) => console.log(result)) .catch((error) => console.erro..

🧩 기본 개념 요약콜 스택(Call Stack)"지금 실행중인 함수들의 순서" 를 관리하는 실행 컨텍스트 스택LIPO (Last In, First Out) 마이크로태스크 큐(Microtask Queue)Promise .then() / await 이후 코드가 들어간다.콜 스택이 비면, 바로 이 큐에 작업이 우선 실행된다. 태스크 큐(Task Queue)setTimeout, setInterval 같은 일반 비동기 콜백이 들어간다.마이크로태스크보다 나중에 실행된다. 실행 컨텍스트우리가 작성한 Javascript 가 실행되는 환경을 실행 컨텍스트 환경이라고 한다.실행 컨텍스트는 콜 스택(Call Stack) 위에서 관리된다. 실행 컨텍스트는 두가지의 실행 컨텍스트가 존재한다.전역 실행 컨텍스트(Global E..