jonbeo 님의 블로그

안녕하세요 😊JavaScript로 버튼이나 리스트 항목에 이벤트를 걸다 보면,요소가 많아질수록 코드가 복잡해지고 성능 문제가 생기기 쉽습니다. 이럴 때 효과적으로 사용하는 기법이 바로 **이벤트 위임(Event Delegation)**입니다.📍 1. 이벤트 위임이란?개별 요소에 직접 이벤트를 붙이지 않고,공통 부모 요소에 이벤트를 한 번만 등록해서하위 요소들의 이벤트를 **버블링(bubbling)**으로 처리하는 방법입니다.👉 즉, 수많은 자식 요소 대신 부모 한 곳에서 이벤트를 관리하는 방식입니다.📍 2. 기본 예시 (비효율적인 방법)리스트 항목마다 클릭 이벤트를 붙이면, 항목이 많을수록 비효율적입니다. Home About Contact 👉 항목이 1,000개라면 이벤트 리스너도 1,0..

안녕하세요 😊웹 개발에서 자주 만나는 개념이 바로 **비동기 처리(Asynchronous)**입니다.API 요청, 파일 읽기, setTimeout 같은 작업은 즉시 끝나지 않기 때문에 비동기 방식으로 처리됩니다.자바스크립트는 이런 작업을 다루기 위해 콜백(callback) → Promise → async/await 순으로 발전해 왔습니다.오늘은 그 중에서도 Promise와 async/await을 쉽게 설명해드리겠습니다.📍 1. Promise란?Promise는 “결과를 약속한다”는 의미 그대로, 비동기 작업의 성공/실패 결과를 표현하는 객체입니다. const fetchData = new Promise((resolve, reject) => { const success = true; if (succes..

안녕하세요 😊웹 개발을 하다 보면 scroll, resize, input 같은 이벤트가 너무 자주 실행되어 성능 저하를 일으키는 경우가 많습니다.예를 들어, 사용자가 검색창에 글자를 입력할 때마다 서버로 API 요청이 간다면 불필요한 요청이 수십 번 발생하겠죠? 이 문제를 해결하는 대표적인 기법이 바로 Debounce와 Throttle입니다.📍 1. Debounce – 마지막 동작만 실행Debounce는 사용자의 연속된 입력 중에서 마지막 동작만 실행되도록 하는 방법입니다. 예시: 검색창 자동완성 function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeo..

안녕하세요 😊다국어·다지역 서비스를 만들 때는 날짜/숫자/통화 표기가 국가마다 다릅니다.Intl 네임스페이스는 이를 손쉽게 처리하는 표준 국제화 API입니다.1) 날짜/시간 – Intl.DateTimeFormat const d = new Date("2025-09-04T14:30:00Z");const ko = new Intl.DateTimeFormat("ko-KR", { dateStyle: "long", timeStyle: "short", timeZone: "Asia/Seoul"}).format(d);// 예: 2025년 9월 04일 오후 11:30const us = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month:..

안녕하세요 😊오늘은 ES6에서 도입된 컬렉션 객체 **Map**과 **Set**을 정리해보겠습니다.Map은 키-값 저장소, Set은 중복 없는 값 집합으로, 기존 Object와 Array의 한계를 보완합니다.실무 예제와 함께 “언제 어떤 걸 써야 하는지”까지 알아보겠습니다.1) Map 한눈에 보기 – “모든 타입을 키로 쓰는 해시 맵”특징키에 어떤 타입이든 사용 가능(객체, 함수, NaN 포함)삽입 순서 보장크기: map.size반복: for...of, map.forEach() // 생성 & 기본 메서드const m = new Map();m.set('name', 'Kim');m.set({ id: 1 }, 'object-key');m.set(NaN, 'not-a-number');console.log(m...

안녕하세요 😊웹 개발에서 사용자의 데이터를 브라우저에 저장하는 기능은 매우 유용합니다.로그인 상태 유지, 장바구니 저장, 사용자 환경 설정 등이 대표적인 예입니다.이때 웹 스토리지(Web Storage) API인 localStorage와 sessionStorage를 사용하면간단하게 데이터를 저장하고 불러올 수 있습니다.📍 1. localStorage vs sessionStorage 차이 특징 localStorage sessionStorage 저장 기간브라우저를 닫아도 유지브라우저 탭을 닫으면 삭제저장 범위모든 탭·창에서 공유현재 탭에서만 유지용량약 5~10MB약 5~10MB데이터 형식문자열만 저장 가능문자열만 저장 가능 📍 2. 기본 사용법// 저장localStorage.setItem("user..

안녕하세요 😊웹 개발에서 서버와 데이터를 주고받는 일은 아주 흔합니다.예전에는 XMLHttpRequest를 사용했지만,이제는 더 간단하고 직관적인 fetch() API가 표준으로 자리 잡았습니다.이번 글에서는 fetch() API의 기본 사용법부터에러 처리, JSON 변환, POST 요청, async/await 활용까지 정리해보겠습니다.📍 1. 기본 사용법fetch("https://jsonplaceholder.typicode.com/posts/1") .then(response => response.json()) // JSON 변환 .then(data => console.log(data)) .catch(error => console.error("에러 발생:", error)); 📌 특징첫 번째 인..

안녕하세요 😊웹 개발에서 날짜와 시간을 다루는 일은 정말 많습니다.게시글 작성일, 이벤트 마감일, 예약 시간 표시 등다양한 기능에서 JavaScript Date 객체는 필수적으로 사용됩니다.이번 글에서는 날짜·시간 생성, 포맷 변환, 계산, 국제화 처리까지Date 객체의 핵심 기능을 정리해보겠습니다.📍 1. Date 객체 생성하기// 현재 날짜·시간const now = new Date();console.log(now);// 특정 날짜·시간const specificDate = new Date("2025-08-11T10:30:00");console.log(specificDate);// 연, 월, 일 지정 (월은 0부터 시작 → 0=1월)const customDate = new Date(2025, 7, 1..

안녕하세요 😊JavaScript 배열은 정말 자주 쓰이는 자료구조입니다.특히 ES6 이후 추가된 고급 배열 메서드를 잘 활용하면코드가 훨씬 간결하고 직관적으로 바뀝니다.이번 글에서는 실무에서 많이 쓰이는 배열 메서드 8가지를 예제와 함께 정리해보겠습니다.📍 1. map() – 배열 변환const nums = [1, 2, 3];const doubled = nums.map(n => n * 2);console.log(doubled); // [2, 4, 6]각 요소를 변환해 새로운 배열 반환원본 배열 변경 없음📍 2. filter() – 조건에 맞는 요소 추출const users = [ { name: "Kim", age: 28 }, { name: "Lee", age: 17 }];const adults ..

안녕하세요 😊웹페이지에서 공지사항, 이미지 확대, 로그인 창 등을 띄울 때모달 팝업은 정말 자주 사용됩니다.이번 글에서는 jQuery로 간단하게 모달 팝업을 구현하는 방법을 단계별로 안내드립니다.📍 1. 기본 HTML 구조모달 열기 × 모달 제목 여기에 내용을 작성하세요. .modal : 모달 전체 영역 (기본적으로 숨김).modal-content : 팝업 내부 내용.close : 닫기 버튼📍 2. CSS 스타일.modal { display: none; /* 기본 숨김 */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0..