mirabo01 님의 블로그

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

1. 이벤트의 흐름이란 무엇인가브라우저에서 한 요소를 클릭하면,그 이벤트는 한 방향으로 흐르며 여러 단계에서 감지된다.이 과정을 이벤트 전파(Event Propagation) 라고 부른다.전파는 세 단계로 이루어진다.① 캡처링 단계 (Capturing Phase)② 타깃 단계 (Target Phase)③ 버블링 단계 (Bubbling Phase)캡처링: 문서 최상단(window → document → html → body …)에서 이벤트가 내려옴타깃: 실제 클릭된 요소에서 이벤트 실행버블링: 다시 상위 요소로 이벤트가 전파되어 올라감2. 기본 예시 — 클릭 이벤트의 흐름 클릭출력 결과 👇자식 button 클릭!부모 div 클릭!✅ 이벤트는 child에서 발생한 뒤 → parent로 “버블링” 된다.✅..

1. DOM이란 무엇인가DOM (Document Object Model) 은HTML 문서를 트리(Tree) 구조로 표현한 객체 모델이다.즉, 브라우저는 HTML을 단순한 텍스트로 두지 않고각 요소를 객체화하여 메모리에 저장한다.이렇게 만들어진 구조를 자바스크립트로 접근하고 조작할 수 있다.예를 들어,아래 HTML이 있다면 👇 안녕하세요 DOM을 배워봅시다이건 자바스크립트 내부에서 이렇게 인식된다 👇Document └── div#app ├── h1 └── p.text즉, HTML은 브라우저가 객체 트리로 바꿔놓은 구조다.2. DOM 접근하기DOM 요소를 조작하기 위한 대표적인 선택자 메서드는 다음과 같다.메서드 설명 예시document.getElementById()ID로 선택get..

1. JSON이란 무엇인가JSON (JavaScript Object Notation) 은데이터를 표현하고 교환하기 위한 가볍고 표준화된 텍스트 형식이다.JavaScript 객체 표기법을 기반으로 함대부분의 프로그래밍 언어가 JSON을 읽고 쓸 수 있음REST API의 요청(Request)과 응답(Response)에서 기본 포맷으로 사용됨📘 예를 들어, 서버가 게시글 정보를 내려줄 때 이런 형태다.{ "id": 1, "title": "자바스크립트 JSON 완전 정복", "author": "기범", "likes": 120, "tags": ["JavaScript", "JSON", "프론트엔드"]}이게 바로 JSON 데이터 구조다.2. JSON의 기본 문법요소 설명 예시문자열반드시 큰따옴표 " 로 감..