mirabo01 님의 블로그

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. 이벤트란 무엇인가이벤트는 쉽게 말해“브라우저에서 일어난 사건을 자바스크립트가 감지할 수 있게 표현한 것”주요 ..

이제 이론은 충분히 다뤘으니,“실제 하나의 기능을 처음부터 끝까지 만들어 보는 단계” 로 가보자.이번 글에서는 순수 자바스크립트만 가지고:ES6 모듈 (import / export)클래스(class)비동기 처리 (async / await)간단한 설계 구조 (Model / Service / UI)를 모두 엮어서 User 관리 미니 프로젝트 (CRUD) 를 직접 구현해본다.“여기서 한 번 제대로 만들어보면, 이후 React·Vue로 가도 훨씬 이해가 빨라진다.”1. 이번에 만들 기능 정리간단한 “유저 관리” 기능을 만든다.유저 목록 조회 (Read)유저 추가 (Create)유저 삭제 (Delete)나중에 수정(Update)까지 확장 가능하도록 구조 설계실제 서버는 없으니, 가짜 API(mock API) 를 ..