jonbeo 님의 블로그

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

안녕하세요 😊이번 포스팅에서는 CSS Grid와 Flexbox를 “어떤 상황에서 무엇을 써야 하는지” 관점에서 깊게 풀어보겠습니다.두 기술은 모두 강력한 레이아웃 시스템이지만 목적이 다릅니다. 초보자 분들도 헷갈리지 않도록,개념 → 속성 → 실전 패턴 → 선택 체크리스트 → 자주 하는 실수 순서로 차근차근 정리 해보겠습니다.1) 핵심 요약이 아니라 “핵심 이해”: Grid는 2차원, Flex는 1차원Flexbox는 1차원(행 또는 열 한 방향) 정렬에 특화되어 있습니다. 버튼 그룹, 네비게이션 바, 카드 내부 정렬처럼 한 줄 안에서의 배치·정렬·간격 제어에 특히 강합니다.Grid는 2차원(행 + 열 동시) 레이아웃에 적합합니다. 페이지 전체 레이아웃, 대시보드, 잡지형 배치처럼 행과 열을 동시에 설계해..

안녕하세요 😊자바스크립트 없이도 CSS만으로 로딩 애니메이션을 충분히 만들 수 있습니다.아래 예제 4가지는 실무에서 바로 가져다 쓰기 좋도록 HTML 1줄 + CSS 몇 줄로 구성했습니다. 1) 기본 원형 스피너 (border 회전) .spinner { width: 40px; height: 40px; border: 3px solid #e9ecef; border-top-color: #1abc9c; border-radius: 50%; animation: spin 0.8s linear infinite;}@keyframes spin { to { transform: rotate(360deg); } }2) 점 3개 점멸 스피너.dots { display: inline-flex; gap: 6px; }.d..

안녕하세요 😊Suspense는 로딩 중 상태를 선언적으로 처리할 수 있도록 도와주는 React 기능입니다.두 가지 핵심 사용처는 ① 코드 스플리팅(React.lazy) ② 데이터 로딩 경계 처리입니다.1) 코드 스플리팅 기본 import React, { Suspense } from "react";const Chart = React.lazy(() => import("./Chart"));export default function Dashboard(){ return ( 차트 로딩 중…}> );}2) 데이터 로딩용 리소스 패턴(기초)간단 예시: Promise가 해결될 때까지 읽기를 “멈추는” 래퍼를 만들어 Suspense로 감쌉니다.// resource.jsexport functio..

안녕하세요 😊React에서 일반적으로 부모 → 자식으로 props를 내려주어 동작을 제어합니다.하지만 때때로 부모 컴포넌트가 자식 컴포넌트의 특정 함수나 값에 직접 접근해야 할 때가 있습니다.이럴 때 사용하는 Hook이 **useImperativeHandle**입니다.📍 1. 언제 필요한가?자식 컴포넌트를 외부 API처럼 동작시키고 싶을 때예: 부모에서 자식의 focus(), reset() 같은 메서드를 직접 호출Form, Modal, Canvas 컨트롤 등에서 자주 사용📍 2. 기본 문법useImperativeHandle(ref, createHandle, [deps]);ref: 부모로부터 전달받은 ref 객체createHandle: 부모가 접근할 수 있도록 노출할 속성과 메서드 정의deps: 의존..

안녕하세요 😊는 **중요 텍스트를 강조(하이라이트)**할 때 사용하는 시맨틱 태그입니다.특히 검색 결과 강조, 읽기 가이드에 유용합니다.1) 기본 사용 다음 문장에서 중요한 키워드를 확인하세요. 브라우저 기본값은 노란 형광펜 스타일로 표시됩니다.2) 스타일 커스터마이징 mark { background: #fffd8a; /* 연한 노랑 */ padding: 0 .2em; border-radius: .25em;}3) 검색 하이라이트 예시 검색어: react결과: React Suspense improves loading UX.4) 접근성 & SEO는 단순 스타일이 아닌 **의미(semantics)**를 제공하므로 스크린리더와 검색엔진에 유리합니다.단순 색상 강조만 필요하면 도 가능하지만, 맥락상 중요 ..

안녕하세요 😊다국어·다지역 서비스를 만들 때는 날짜/숫자/통화 표기가 국가마다 다릅니다.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:..

안녕하세요 😊HTML5에서는 날짜와 시간을 시맨틱하게 표현할 수 있도록 태그를 제공합니다.이 태그는 브라우저, 검색 엔진, 보조기기(Screen Reader) 등이 날짜/시간 정보를 정확히 인식할 수 있게 합니다.📍 1. 기본 문법2025년 9월 03일datetime 속성: ISO 8601 형식으로 날짜·시간을 지정 (YYYY-MM-DD, HH:MM:SS)태그 안의 내용: 사용자가 읽기 쉬운 형식으로 표시📍 2. datetime 속성 값 형식 유형 예시 설명 날짜2025-09-03연-월-일시간05:30시:분 (24시간제)날짜+시간2025-09-03T05:30연-월-일 + 'T' + 시:분주2025-W33연-주차월2025-09연-월📍 3. 실제 예제A. 블로그 게시일 게시일: 2025년 9월 ..

안녕하세요 😊오늘은 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..