자바스크립트의 유연한 문법은 개발자에게 자유를 주는 동시에, 예상치 못한 함정을 만들어내기도 합니다. 이번 편에서는 실무에서 종종 발견되지만 이해하지 않으면 의도치 않은 결과를 초래할 수 있는 자바스크립트 문법 사례들을 추가로 소개합니다.✅ 1. [] + [] 는 왜 빈 문자열이 되는가?📌 문제 상황console.log([] + []); // ''📌 원인자바스크립트에서 + 연산자는 피연산자가 문자열이면 문자열 덧셈을 수행합니다. 배열은 기본적으로 문자열로 변환되며, [].toString()은 빈 문자열 ''이므로 결과도 ''입니다.📌 대처연산 전에 명확한 형 변환을 적용하거나, 타입을 정확히 확인합니다.✅ 2. parseInt('08')는 왜 8이 아닌가?📌 문제 상황parseInt('08'); ..

자바스크립트는 유연하고 관대한 문법 특성 덕분에 초보자에게 진입 장벽이 낮은 언어입니다. 하지만 이로 인해 실수하거나 오해하기 쉬운 문법들도 많습니다. 이 글에서는 실무에서 자주 마주치지만, 주의하지 않으면 버그로 이어질 수 있는 자바스크립트 문법 사례들을 소개합니다.✅ 1. == vs === (느슨한 비교와 엄격한 비교)📌 문제 상황0 == false // true0 === false // falsenull == undefined // truenull === undefined // false📌 해결 방법항상 ===를 사용하여 타입까지 비교하도록 습관을 들이는 것이 좋습니다.✅ 2. typeof null은 왜 "object"인가?📌 문제 상황typeof null; // "object"📌..

이번 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..