정집사의 개발로그

이번 24편에서는 웹 접근성을 개선하고 사용자 친화적인 경험을 제공하기 위한 유틸 함수들을 정리합니다. 키보드 네비게이션, 포커스 제어, ARIA 속성 제어 등 다양한 요소의 접근성을 손쉽게 향상시킬 수 있는 도구들입니다.✅ 1. focusFirstElement (첫 번째 포커스 가능한 요소로 이동)📌 주어진 컨테이너에서 포커스 가능한 첫 요소로 이동function focusFirstElement(container) { const focusables = container.querySelectorAll( 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])' ); if (focusabl..

이번 23편에서는 사용자의 브라우저 환경에 따라 조건부 처리를 하거나 기능을 제한하는 데 필요한 유틸 함수들을 소개합니다. 디바이스, 브라우저, 운영체제 감지 등 프론트엔드 대응에 중요한 역할을 하는 함수들입니다.✅ 1. isMobileDevice (모바일 디바이스 감지)📌 User Agent를 기반으로 모바일 기기 여부 반환function isMobileDevice() { return /Mobi|Android|iPhone/i.test(navigator.userAgent);}📌 활용 예시if (isMobileDevice()) { alert('모바일 최적화 모드로 전환됩니다.');}✅ 2. getBrowserInfo (브라우저 이름 감지)📌 User Agent 문자열로부터 브라우저 정보 추출fun..

이번 22편에서는 URL을 파싱하거나 쿼리 문자열을 조작하는 데 유용한 유틸 함수들을 정리합니다. 페이지 라우팅, 파라미터 추출 및 수정 등 다양한 실무 상황에서 자주 활용됩니다.✅ 1. getQueryParam (쿼리 파라미터 값 가져오기)📌 현재 URL 또는 주어진 URL에서 특정 쿼리 값 반환function getQueryParam(key, url = window.location.href) { const params = new URL(url).searchParams; return params.get(key);}📌 활용 예시(예: 현재 페이지 URL에서 'page' 파라미터 추출)getQueryParam('page');✅ 2. setQueryParam (쿼리 파라미터 설정)📌 URL에 쿼리 ..

이번 21편에서는 정규 표현식(Regular Expression, RegExp)을 활용하여 문자열 패턴을 검증하고 가공하는 실무 유틸 함수들을 정리합니다. 사용자 입력 유효성 검사, 형식 추출, 데이터 정리에 매우 유용하게 활용됩니다.✅ 1. isKorean (한글 포함 여부 확인)📌 문자열에 한글이 포함되어 있는지 검사function isKorean(str) { return /[가-힣]/.test(str);}📌 활용 예시(예: 사용자 이름에 한글이 포함되어 있는지 확인)isKorean('홍길동'); // true✅ 2. extractEmails (문장에서 이메일 주소 추출)📌 문자열 내 모든 이메일 주소를 배열로 반환function extractEmails(text) { return text...

이번 20편에서는 배열 간의 차이를 비교하고 동기화할 때 유용한 자바스크립트 유틸 함수들을 정리합니다. 데이터 변경 사항 추적, 차이점 필터링, 병합 등의 작업을 쉽게 수행할 수 있습니다.✅ 1. arrayDifference (두 배열 간 차이값 구하기)📌 A 배열에는 있고 B 배열에는 없는 항목 반환function arrayDifference(a, b) { return a.filter(item => !b.includes(item));}📌 활용 예시(예: 삭제된 항목 목록 추출)const before = ['a', 'b', 'c'];const after = ['a', 'c'];const removed = arrayDifference(before, after); // ['b']✅ 2. arrayInt..

이번 19편에서는 웹 애플리케이션에서 클라이언트 측 데이터를 저장하는 데 사용되는 localStorage와 sessionStorage를 보다 안전하고 효율적으로 다룰 수 있는 유틸 함수들을 정리합니다.✅ 1. setStorage (데이터 저장)📌 localStorage 또는 sessionStorage에 문자열 또는 객체 저장function setStorage(type, key, value) { const storage = type === 'session' ? sessionStorage : localStorage; const data = typeof value === 'object' ? JSON.stringify(value) : value; storage.setItem(key, data);}📌 활..

이번 18편에서는 브라우저 스크롤과 관련된 유용한 유틸 함수들을 소개합니다. 스크롤 위치 확인, 부드러운 이동, 하단 감지 등 사용자 경험을 높이는 데 필수적인 기능들을 다룹니다.✅ 1. getScrollPosition (현재 스크롤 위치 확인)📌 페이지의 수직 스크롤 위치 반환function getScrollPosition() { return window.pageYOffset || document.documentElement.scrollTop;}📌 활용 예시(예: 페이지 스크롤 위치에 따라 상단 고정 메뉴 표시 여부 결정)if (getScrollPosition() > 100) { document.querySelector('header').classList.add('fixed');}✅ 2. scr..

이번 17편에서는 브라우저 이벤트를 보다 효율적으로 다루기 위한 유틸 함수들을 정리합니다. 이벤트 등록, 해제, 위임, 방지 등 다양한 실무 시나리오에서 필요한 핵심 함수들입니다.✅ 1. on (이벤트 등록)📌 기본적인 이벤트 리스너 등록function on(el, type, handler) { if (el) el.addEventListener(type, handler);}📌 활용 예시(예: 폼 제출 버튼 클릭 시 알림 표시)const btn = document.getElementById('submitBtn');on(btn, 'click', () => alert('제출되었습니다.'));✅ 2. off (이벤트 해제)📌 등록된 이벤트 리스너 제거function off(el, type, handler..

이번 16편에서는 DOM 기반 HTML 요소를 쉽고 안전하게 조작할 수 있도록 도와주는 유틸 함수들을 소개합니다. 버튼 제어, 클래스 토글, 요소 생성, 속성 관리 등 다양한 실무 상황에 대응 가능합니다.✅ 1. addClass (클래스 추가)📌 클래스 이름을 요소에 추가function addClass(el, className) { if (el && !el.classList.contains(className)) { el.classList.add(className); }}📌 활용 예시상태 기반 스타일 변경모달 열기 처리✅ 2. removeClass (클래스 제거)📌 클래스 이름을 요소에서 제거function removeClass(el, className) { if (el && el.clas..

이번 15편에서는 다양한 사용자 입력을 검증하고 처리하기 위한 유용한 자바스크립트 유틸 함수들을 정리합니다. 유효성 검사, 입력 형식 감지, 실시간 피드백 등에 유용하게 활용할 수 있습니다.✅ 1. isRequired (빈 값 확인)📌 공백 여부 검사function isRequired(value) { return value !== undefined && value !== null && value.toString().trim() !== '';}📌 활용 예시필수 입력 항목 체크유효성 메시지 표시✅ 2. isValidEmail (이메일 형식 검사)📌 이메일 정규표현식 기반 유효성 검사function isValidEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/..