mirabo01 님의 블로그

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

1. 왜 설계가 중요한가프론트엔드든 백엔드든, 규모가 커질수록 코드의 “양”보다 “구조”가 중요해진다.잘 짜인 설계는 버그보다 이해하지 못한 코드를 줄이는 데 목적이 있다.코드의 품질은 “동작”이 아니라 “이해도”로 결정된다.객체지향과 모듈화를 결합하면,한눈에 ‘이 코드가 어디에 속하는지’ 파악할 수 있는 구조가 된다.2. 코드 설계의 3가지 원칙아무리 복잡한 프로젝트라도 다음 세 가지 원칙만 지키면 안정적인 구조를 만들 수 있다.단일 책임 원칙 (SRP) — 하나의 파일/클래스는 한 가지 역할만 수행의존성 역전 원칙 (DIP) — 상위 모듈은 하위 구현에 의존하지 말 것모듈 독립성 원칙 (Modularity) — 각 모듈은 최소한의 연결로 동작해야 함이 세 가지는 단순히 철학이 아니라,실제 유지보수 비..

1. 객체지향의 4대 핵심 원칙객체지향 프로그래밍(OOP)은 단순히 클래스를 쓰는 게 아니다.진짜 핵심은 “설계 철학”이다.자바스크립트에서도 이 철학은 그대로 적용된다.원칙 설명 자바스크립트 적용 방식캡슐화 (Encapsulation)데이터와 메서드를 한곳에 묶고, 외부 접근을 제한private 필드, getter/setter상속 (Inheritance)기존 코드를 재사용하여 새로운 클래스 생성extends, super()추상화 (Abstraction)불필요한 세부 구현은 숨기고 핵심만 노출클래스/인터페이스 구조다형성 (Polymorphism)같은 메서드가 다른 방식으로 동작메서드 오버라이딩, 인터페이스 구현2. 캡슐화(Encapsulation) — 내부 데이터를 보호하라캡슐화는 “데이터를 직접 조작하지..

1. 객체지향 프로그래밍이란?프로그래밍 언어에는 여러 패러다임이 있다.그중 하나가 객체지향 프로그래밍(OOP, Object-Oriented Programming).핵심 개념은 단순하다.“데이터와 기능을 하나의 객체로 묶어서 관리하자.”예를 들어, 단순히 사용자 이름과 인사 기능을 따로 두는 대신,그 둘을 하나의 객체로 묶어두는 것이다.const user = { name: "기범", greet() { console.log(`안녕하세요, ${this.name}입니다.`); },};user.greet(); // 안녕하세요, 기범입니다.이런 객체가 여러 개 필요할 때,하나씩 수동으로 만드는 대신 템플릿(설계도) 로 찍어내는 게 바로 클래스의 역할이다.2. 클래스(Class)의 기본 구조ES6 이전에는..