Javascript

개념/배경 NaN은 JavaScript 숫자 타입의 특별한 값으로 계산 불능을 의미함 NaN은 어떤 값과도 같지 않으며 자기 자신과도 같지 않음 동등 비교 연산으로는 판별 불가 올바른 판별 방법 Number.isNaN 값이 실제 NaN인지만 검사, 타입 강제 변환 수행 안 함 isNaN 전달된 값을 숫자로 변환한 뒤 검사, 문자열 등에서 오탐 가능 x !== x는 오로지 NaN에서만 참이 되는 성질 활용 가능 주의할 점 외부 입력이 문자열인 경우 숫자로 명시 변환 후 Number.isNaN으로 확인 권장 빈 문자열 Number(’’)는 0, parseInt(’’)는 NaN 반환 차이 주의 0/0, Math.sqrt(-1) 같은 계산에서 NaN 발생 가능 동등 비교나 switch 키로 NaN을 식별하려 하지 말 것 ...

개요 Intl.DateTimeFormat은 JavaScript 국제화 API의 일부로, 추가 라이브러리 없이 날짜와 시간을 지역화된 형식으로 포맷하는 기능 제공 브라우저와 Node.js에서 동작하며, 호스트의 기본 타임존 정보를 IANA 식별자 형태로 노출 가능 서버가 어떤 타임존으로 실행 중인지 확인할 때 resolvedOptions().timeZone 사용 핵심 개념과 정의 국제화 API: 로케일과 캘린더, 숫자 체계, 타임존 등을 기준으로 표기 형식을 결정하는 표준 인터페이스 IANA 타임존 식별자: Asia/Seoul, UTC, America/New_York 같은 표준 명칭 호스트 기본 타임존: 런타임이 인식한 시스템 타임존으로, resolvedOptions().timeZone에서 확인 오프셋과 타임존의 차이: 오프셋은 시점별 UTC와의 분 단위 차이, 타임존은 DST 등 규칙을 포함하는 영역 개념 ...

개요 즉시 실행 함수 표현 IIFE(Immediately Invoked Function Expression)는 정의 직후 바로 호출되는 함수 패턴을 의미함 ES5 시기에는 클래스나 표준 모듈이 없어 전역 스코프 오염 방지와 초기화 코드 캡슐화에 널리 사용됨 ES6 이후에는 모듈 export/import가 기본 선택지이나, 독립 실행 초기화 코드, 라이브러리 래퍼, 폴리필 등에서는 여전히 유효한 도구임 함수 선언과 함수 표현의 차이 함수 선언 Function Declaration 선언이 호이스팅되어 해당 스코프의 시작 시점에 바인딩됨 선언 이전 호출 가능 함수 표현 Function Expression ...

개요 Node.js에서 console.log로 객체를 찍다 보면 [Object], [Array]로 축약돼 상세 구조가 보이지 않는 경우가 많음 원인은 console.log가 내부적으로 util.inspect를 사용하고, 기본 depth가 2이기 때문임 아래에서 동작 방식과 옵션, 실무에서 흔히 하는 설정을 정리함 console.log가 [Object]로 축약되는 이유 console.log는 객체를 문자열로 만들 때 util.inspect를 사용함 기본 동작은 depth 2까지 펼치고 그 이후는 축약 표시 0단계 예시 { args: [Object] } 1단계 예시 { args: { take: 5, orderBy: [Array], where: [Object] } } 2단계 예시 { args: { take: 5, orderBy: [ [Object] ], where: { userId: 123 } } } 3단계 예시 { args: { take: 5, orderBy: [ { createdAt: 'desc' } ], where: { ... } } } 기본 depth가 2이므로 3단계 이상 중첩된 객체는 [Object], 배열은 [Array]로 축약 표시됨 util.inspect 간단 소개 util.inspect는 node:util 모듈에 있는 함수로, JS 값을 사람이 읽기 좋은 문자열로 직렬화하는 유틸리티 console.log(obj)는 실질적으로 util.inspect(obj, { depth: 2, colors: false })와 유사하게 동작함 ...

개요 jQuery siblings 계열 메서드와 브라우저 DOM API에서 형제 노드를 탐색하는 방법 정리 jQuery는 요소 노드 기준으로 동작, DOM API의 일부 속성은 텍스트 노드를 포함하므로 차이 주의 핵심 개념 .siblings([selector]) 선택한 요소의 형제 요소 중 선택자에 일치하는 모든 요소 선택 .next() 바로 다음 형제 요소 선택 .nextAll([selector]) 다음에 위치한 형제 요소 모두 선택, 선택자 지정 시 필터링 .nextUntil(selector) 지정한 선택자에 해당하는 요소 바로 이전까지의 모든 다음 형제 요소 선택, 종료 요소는 미포함 .prev() 바로 이전 형제 요소 선택 .prevAll([selector]) 이전에 위치한 형제 요소 모두 선택, 선택자 지정 시 필터링 .prevUntil(selector) 지정한 선택자에 해당하는 요소 바로 다음까지의 모든 이전 형제 요소 선택, 종료 요소는 미포함 DOM 탐색 속성 ...

개요 브라우저 스크립팅 수요와 10일 설계 제약 클래스보다 구현 단순, 런타임 확장 유리한 위임 모델 채택 개념 객체는 프로토타입 링크로 행동 위임 프로퍼티 조회는 체인 상향 전파 ES6 class는 프로토타입 문법 설탕 이유 동적 합성 용이, 메모리 공유로 중복 감소, 런타임 교체 가능 주의 깊은 체인 비용과 디버깅 난이도 this 바인딩 혼동, 내장 프로토타입 오염 금지 마무리 웹의 변화 속도에 맞춘 실용적 선택 외형은 class 사용 가능하나 내부 모델은 프로토타입 ...

개요 HTML5의 data-* 속성은 마크업에 보이지 않는 커스텀 데이터를 담기 위한 전역 속성 UI와 스크립트 사이 값 전달, 기능 감지 플래그, 간단한 지역화 메타데이터 등에 유용 DOM에서는 element.dataset으로 접근해 읽기/쓰기 가능 핵심 개념 속성명 규칙: data- 접두사 + 소문자 케밥케이스 사용 접근 규칙: data-foo-bar → dataset.fooBar 로 매핑 값 타입: 문자열 저장, 필요 시 직접 직렬화/파싱 처리 필요 보안 유의: 민감정보나 토큰 저장 금지, 노출 전제 데이터만 저장 표준 속성과 역할 혼동 금지, 의미적 데이터는 적절한 속성이나 요소 사용 권장 ...

개요 자바스크립트에서 + 단항 연산자는 Number 호출의 축약형으로 동작함 문자열이나 다양한 타입을 숫자로 바꾸려는 순간에 +value와 Number(value)는 같은 의미이고, parseInt는 문자열에서 정수 접두부만 뽑아내는 파서에 가까움 같아 보이지만 목적과 실패 조건이 다르므로 상황에 맞게 선택 필요 핵심 개념 unary plus +x ECMAScript의 ToNumber 규칙 적용 Number(x)와 동일한 변환 결과 반환 Number(value) 숫자 전체 표현식이어야 함 공백 트림은 허용하지만 유효하지 않은 문자가 섞이면 NaN 반환 parseInt(string, radix) 문자열의 왼쪽부터 주어진 기수(radix, 2~36)로 해석 가능한 정수 접두부만 파싱 유효하지 않은 문자를 만나면 거기서 파싱 중단 접두부 숫자가 하나도 없으면 NaN 반환 ES5+에서 기본 기수는 10이지만, 0x/0X 접두사는 16진수로 처리됨 동작 차이와 사례 전체 일치 vs 접두 파싱 Number('12px') → NaN parseInt('12px', 10) → 12 소수와 지수 표기 Number('10.5') → 10.5, Number('1e3') → 1000 parseInt('10.5', 10) → 10 (소수부 절삭) 빈 문자열과 공백 Number('') → 0, Number(' ') → 0 parseInt('') → NaN 비문자열 입력 +true → 1, +false → 0, +null → 0, +undefined → NaN parseInt(true, 10) → NaN (문자열로 변환 시 ’true’라서 숫자 접두부 없음) 진법 접두사 처리 차이 Number('0x10') → 16, parseInt('0x10') → 16 Number('0b101') → 5 (ES2015+), parseInt('0b101') → 0 참고로 parseInt('101', 2) → 5 처럼 radix를 명시해야 기대대로 동작함 BigInt 관련 +10n은 TypeError 발생 Number(10n)은 10으로 변환되나 정밀도 손실 가능성 존재 선택 기준 전체 문자열이 유효한 숫자여야 하고 실수, 지수 표기도 허용해야 함 +value 또는 Number(value) 선택 가독성 우선이면 Number(value) 추천, 축약을 선호하면 +value 선택 문자열 앞부분에서 정수만 뽑고 싶거나 비 10진수 파싱 필요 parseInt(str, radix) 선택 항상 radix 명시 권장 소수부를 보존하면서 부분 파싱이 필요 parseFloat 고려 다만 parseFloat도 접두 파싱이므로 전체 일치 검증이 필요하면 Number 사용 권장 베스트 프랙티스 숫자 변환 의도 전달이 중요할 때 Number(value) 사용 정수 파싱 시 parseInt(str, 10)처럼 radix를 항상 명시 사용자 입력 검증이 필요하면 정규식 또는 스키마 검증으로 전체 형식 검증 후 Number 변환 성능 미세 최적화보다 가독성과 실패 조건의 명확성을 우선 간단 예시 Number('12') // 12 +'12' // 12 parseInt('12',10) // 12 Number('12px') // NaN parseInt('12px',10) // 12 Number('0b101') // 5 parseInt('0b101') // 0, radix 명시 필요 parseInt('101', 2) // 5 결론 +는 Number의 축약형이 맞음 전체 숫자 표현식으로서의 유효성을 요구할 때 + 또는 Number 사용, 접두부 정수 추출이나 진법 파싱에는 parseInt 사용 의도를 코드에 드러내고, 실패 조건을 일관되게 가져가는 쪽으로 선택하는 것이 유지보수에 유리함 ...

개요 Array.prototype.map은 배열의 각 요소에 대해 지정한 콜백을 호출하고 그 반환값으로 새 배열을 만드는 메서드임 원본 배열은 변경하지 않으며 콜백의 부수효과로만 변형이 일어날 수 있음 희소 배열의 빈 슬롯은 유지되며 콜백은 값이 존재하는 인덱스에만 호출됨 구문 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback 현재 요소를 변환해 새 요소를 생성하는 함수 currentValue 현재 요소 값 index 선택 현재 요소의 인덱스 array 선택 map을 호출한 원본 배열 thisArg 선택 콜백 실행 시 this로 사용할 값 반환값 각 요소에 대해 callback을 실행한 결과로 구성된 새 배열 반환 원본 배열과 길이는 동일하고 희소성도 보존됨 ...

window load는 js css 이미지 등 모든 리소스 로드 완료 시점 발생 document DOMContentLoaded는 초기 DOM 파싱 완료 시점 발생, 외부 리소스 비대기 UI 바인딩 초기화는 DOMContentLoaded 이미지 크기 등 전체 리소스 필요 계산은 load body onload window.onload에 매핑됨 마지막 할당만 유효 덮어쓰기 방지용 addEventListener 권장 참고자료 https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload