mirabo01 님의 블로그

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

1. DOM이란 무엇인가DOM은 Document Object Model의 약자다.브라우저는 우리가 작성한 HTML 문서를 읽은 뒤,그 구조를 트리(Tree) 형태의 “객체 구조”로 변환한다.이 구조가 바로 DOM 트리(DOM Tree) 다.HTML 예시 👇 안녕하세요 DOM을 배워봅시다. 브라우저 내부에서는 이렇게 구조화된다.Document └── body └── div ├── h1 └── p즉, 자바스크립트는 이 트리를 탐색하고, 수정하고, 추가하고, 삭제할 수 있다.이게 바로 DOM 조작(DOM Manipulation) 이다.2. DOM 접근의 핵심 메서드메서드 설명document.getElementById(id)ID로 요소 찾기docum..

1. JSON이란 무엇인가JSON (JavaScript Object Notation) 은데이터를 구조화해서 문자열로 표현하는 형식이다.자바스크립트 객체 문법을 기반으로 만들어졌지만,지금은 언어를 가리지 않고 전 세계에서 표준 데이터 포맷으로 쓰인다.예시 👇{ "name": "홍길동", "age": 25, "isStudent": true, "skills": ["JavaScript", "HTML", "CSS"], "address": { "city": "서울", "zip": "12345" }}✅ 특징 정리키와 값은 "쌍따옴표"로 감싼다.객체({})와 배열([])을 자유롭게 중첩 가능.언어에 독립적 → Python, Java, C#, Go 등 어디서나 사용 가능.2. 자바스크립트에서 JSON을 사용하..