mirabo01 님의 블로그

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의 기본 문법요소 설명 예시문자열반드시 큰따옴표 " 로 감..

1. REST란 무엇인가REST(Representational State Transfer)는웹에서 리소스(데이터) 를 다루기 위한 표준화된 규칙 체계다.즉, “서버와 클라이언트가 데이터를 주고받는 방식의 약속”이라고 생각하면 된다.💡 예를 들어,“게시글 목록을 가져온다” → GET /posts“게시글 하나를 수정한다” → PUT /posts/1“게시글을 삭제한다” → DELETE /posts/1이런 방식이 바로 RESTful API 설계의 기본 철학이다.2. REST의 6가지 원칙1️⃣ 클라이언트-서버 구조클라이언트(프론트엔드)와 서버(백엔드)가 명확히 분리되어야 한다.프론트는 “화면”과 “상호작용”에 집중,서버는 “데이터”와 “로직”에 집중한다.2️⃣ 무상태성(Stateless)서버는 요청 간 상태를..

1. Axios란 무엇인가Axios는 Promise 기반의 HTTP 클라이언트로,브라우저와 Node.js 양쪽 환경에서 사용할 수 있다.설치:npm install axios가져오기:import axios from "axios";✅ 특징 요약항목 Axios fetch자동 JSON 파싱✅ 있음❌ 직접 .json() 호출요청/응답 인터셉터✅ 지원❌ 없음기본 헤더 설정✅ 있음❌ 직접 작성요청 취소(CancelToken)✅ 지원❌ 없음에러 응답 처리자동으로 상태 코드 기반수동 처리 필요2. 기본 사용법1️⃣ GET 요청import axios from "axios";axios.get("https://jsonplaceholder.typicode.com/posts/1") .then((res) => console.lo..

1. fetch란 무엇인가fetch()는 자바스크립트 내장 함수로,서버와 HTTP 요청(Request) 및 응답(Response) 을 주고받을 때 사용한다.쉽게 말하면 브라우저 안에서 API를 호출하는 기본 도구다.fetch("https://jsonplaceholder.typicode.com/posts");이 한 줄로 브라우저는 서버에 요청을 보내고,응답을 Promise 형태로 반환한다.2. fetch 기본 구조fetch("https://jsonplaceholder.typicode.com/posts/1") .then((response) => response.json()) // JSON 변환 .then((data) => console.log(data)) .catch((error) => console...

1. 비동기란 무엇인가자바스크립트는 단일 스레드(Single Thread) 로 동작한다.즉, 한 번에 한 가지 작업만 처리할 수 있다.하지만 실제 웹 환경에서는 동시에 많은 일이 일어난다.예를 들어,서버에서 데이터를 불러오면서버튼 클릭도 감지하고애니메이션도 실행되어야 한다.이걸 가능하게 하는 게 바로 비동기 처리(Asynchronous Processing) 다.💡 “비동기란, 기다리지 않고 다음 일을 진행하는 프로그래밍 방식”이다.2. 동기 vs 비동기console.log("1️⃣ 첫 번째");console.log("2️⃣ 두 번째");console.log("3️⃣ 세 번째");이건 동기(Synchronous) — 순서대로 실행된다.반면, setTimeout 같은 비동기 코드를 섞으면 결과가 달라진다...

1. 이벤트 위임이란?DOM을 다루다 보면 이런 상황이 생긴다. 👇 HTML CSS JavaScript React이제 각각의 클릭 시 콘솔에 텍스트를 출력하고 싶다.대부분 이렇게 코드를 쓴다.document.querySelectorAll("li").forEach((li) => { li.addEventListener("click", () => { console.log(li.textContent); });});이 코드는 잘 작동하지만 문제가 있다.새로운 가 추가되면 어떻게 될까?const ul = document.querySelector("ul");const newItem = document.createElement("li");newItem.textContent = "Vue";ul.app..