자바스크립트의 독특한 문법과 유연성은 강력한 도구이지만, 예상과 다른 결과를 유발하기도 합니다. 이번 4탄에서는 자바스크립트 문법 중에서도 더욱 사소해 보이지만 실무에서 문제를 일으킬 수 있는 함정들을 소개합니다.✅ 1. this의 동적 바인딩📌 문제 상황const obj = { name: 'JS', getName: function () { return this.name; }};const getName = obj.getName;console.log(getName()); // undefined (엄격 모드에선 error)📌 설명this는 호출 방식에 따라 동적으로 결정됩니다. 위 코드에서 getName은 객체에서 분리되었기 때문에 this는 전역 객체를 참조하게 됩니다.📌 대처.bind()..

자바스크립트는 다소 관대한 문법 구조로 인해 직관과 다른 결과를 만들어내는 경우가 많습니다. 이번 3편에서는 복잡하거나 덜 알려진 문법적 특성으로 인해 실수하기 쉬운 코드 사례들을 더 살펴보겠습니다.✅ 1. Object.keys가 순서를 보장하지 않는 경우📌 문제 상황const obj = { 100: 'a', 2: 'b', 7: 'c' };console.log(Object.keys(obj)); // ['2', '7', '100']📌 설명자바스크립트 객체의 key가 숫자처럼 생긴 문자열이면 정렬된 순서로 반환됩니다. 일반 문자열 key는 삽입 순서가 유지됩니다.📌 대처Map 객체를 사용하면 삽입 순서를 보장받을 수 있습니다.✅ 2. for...in과 for...of의 차이📌 문제 상황const ar..

자바스크립트의 유연한 문법은 개발자에게 자유를 주는 동시에, 예상치 못한 함정을 만들어내기도 합니다. 이번 편에서는 실무에서 종종 발견되지만 이해하지 않으면 의도치 않은 결과를 초래할 수 있는 자바스크립트 문법 사례들을 추가로 소개합니다.✅ 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);}📌 활..