mirabo01 님의 블로그

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을 사용하..

1. localStorage란 무엇인가웹 브라우저에는 데이터를 저장할 수 있는 3대 저장소가 있다.종류 지속성 크기 특징localStorage✅ 무기한 유지약 5MB새로고침/닫기 후에도 유지sessionStorage❌ 탭 닫으면 삭제약 5MB세션(탭) 단위 유지cookie서버 전송 가능약 4KB인증·추적용에 주로 사용localStorage는 그중에서도 가장 간단하고,사용자 브라우저에 직접 데이터를 남길 수 있는 기능이다.2. 기본 문법 요약// 저장하기localStorage.setItem("key", "value");// 불러오기const value = localStorage.getItem("key");// 삭제하기localStorage.removeItem("key");// 전체 비우기localStora..

1. 폼 유효성 검사가 왜 중요한가웹에서 사용자가 입력한 정보는 항상 신뢰할 수 없다.잘못된 이메일, 빈칸, 특수문자, 중복 비밀번호…이런 데이터를 서버에 그대로 보내면 보안과 서비스 품질 모두 떨어진다.그래서 브라우저가 보내기 전에 클라이언트 측 검증(Client-side Validation) 을 거친다.이는 단순히 에러를 막는 용도가 아니라,“사용자가 실수를 덜 하게 돕는 UX 기능”이다.2. 예시: 회원가입 폼 만들기먼저 실습용 HTML을 구성하자.이건 로그인, 댓글 입력 등에도 바로 응용할 수 있는 가장 기본형이다. 회원가입 이메일 비밀번호 비밀번호 확인 ..

1. 이번 편에서 배울 내용이 글에서는 이벤트 시스템을 실무 UI에 적용하는 법을 다룬다.하나의 공통 키워드는 바로 “클릭(click)”과 상태 전환(toggle) 이다.배울 구성은 다음 네 가지다.1️⃣ 모달 (Modal) — 화면 중앙에 띄워지는 팝업2️⃣ 드롭다운 (Dropdown) — 선택 옵션 표시/숨기기3️⃣ 아코디언 (Accordion) — 클릭 시 내용 열기/닫기4️⃣ 탭 메뉴 (Tab Menu) — 탭 전환으로 컨텐츠 전환2. 준비 코드 (공통 HTML & CSS)우선 모든 예제에 공통으로 쓸 최소한의 스타일부터 추가하자.이제 안에 각 섹션을 하나씩 추가하면서 실습해보자.3. 모달 (Modal) — 클릭으로 열고 닫기HTML 1️⃣ 모달 (Modal) 모달 열기 ..

1. 왜 이벤트를 먼저 이해해야 할까웹 페이지는 결국 “사용자 입력에 반응하는 프로그램”이다.버튼을 클릭했을 때스크롤했을 때키보드를 눌렀을 때폼을 전송하려 할 때이 모든 순간이 이벤트(event) 다.자바스크립트는 이 이벤트를 “듣고(listen)” 있다가, 발생하면 특정 함수를 실행한다.이 글에서는 단순히 onclick 예제를 넘어서:이벤트를 등록하는 여러 가지 방식addEventListener가 표준인 이유이벤트 객체(event object)의 역할버블링/캡처, stopPropagation, preventDefault이벤트 위임(Event Delegation) 패턴까지 한 번에 정리한다.2. 이벤트란 무엇인가이벤트는 쉽게 말해“브라우저에서 일어난 사건을 자바스크립트가 감지할 수 있게 표현한 것”주요 ..