mirabo01 님의 블로그

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 이전에는..

1. 왜 모듈이 필요한가프로젝트가 커질수록, 한 파일 안의 코드 길이는 기하급수적으로 늘어난다.예전에는 이런 식이었다.// script.jsfunction add(a, b) { return a + b; }function multiply(a, b) { return a * b; }console.log(add(2, 3));그런데 만약 다른 파일에서 add()를 쓰고 싶다면 어떻게 해야 할까?이전 자바스크립트(ES5)까지는 이런 “모듈화” 기능이 없어서,모든 스크립트를 전역(global)으로 불러오는 방식을 썼다.결과적으로 전역 네임스페이스 충돌이 발생하고,파일 간 의존성이 꼬이기 시작했다.이 문제를 해결하기 위해 등장한 것이 바로 모듈 시스템(Module System) 이다.2. 모듈이란 무엇인가모듈(Modu..

1. 자바스크립트는 ‘단일 스레드(single-thread)’ 언어다먼저 전제부터 잡고 가자.자바스크립트는 기본적으로 한 번에 하나의 작업만 처리한다.즉, CPU가 한 줄씩 순서대로 실행하는 “단일 스레드” 모델이다.그렇다면 이런 의문이 생긴다.“단일 스레드인데, 어떻게 동시에 여러 작업을 처리하지?”예를 들어, 브라우저에서 이런 코드를 실행하면 어떻게 될까?console.log("A");setTimeout(() => console.log("B"), 1000);console.log("C");출력 결과는ACB가 된다.즉, 1초를 기다리지 않고 다음 코드가 바로 실행된다.이게 바로 비동기 처리(asynchronous execution) 의 핵심이다.2. 동기(Synchronous) vs 비동기(Asynchr..