Javascript

비동기 이터레이션이 필요한 상황 네트워크로 데이터가 여러 번에 걸쳐 들어오는 경우가 흔합니다. 이런 데이터를 필요할 때마다 처리하려면 async 이터레이션을 사용합니다. 이를 위해 async 이터레이터와 async 제너레이터를 활용하고, 반복은 for await..of로 수행합니다 먼저 async 이터레이터가 일반 이터레이터와 어떻게 다른지 확인하고, 다음으로 async 제너레이터가 어떤 형태로 확장되는지 정리한 뒤, 실무에서 자주 나오는 페이지네이션 패턴을 예시로 살펴봅니다 async 이터레이터 문법 비동기 이터레이터는 일반 이터레이터와 구조가 비슷합니다. 차이는 반복 가능한 객체를 만들 때 쓰는 심볼과 next 반환 타입입니다 ...

배경 ES6 이후 이터러블(iterable)이나 유사 배열 객체(array-like object)를 실제 배열로 변환하는 상황은 매우 흔합니다. 대표적으로 [...iterable](전개 구문, Spread Syntax)과 Array.from() 메서드를 사용합니다. 두 방식은 대부분의 경우 동일하게 동작하는 것처럼 보이지만, 동작 원리와 지원 범위에 명확한 차이가 있어 상황에 맞게 선택해야 합니다. 핵심 차이점 두 방식의 가장 큰 차이는 변환할 수 있는 소스 객체의 타입입니다. 전개 구문 ([...iterable]) 오직 이터러블 프로토콜을 따르는, 즉 Symbol.iterator 속성을 가진 객체에만 사용할 수 있습니다. NodeList가 이터러블인 최신 브라우저 환경에서는 문제없이 동작하지만, 그렇지 않은 환경에서는 TypeError가 발생합니다. ...

개념/배경 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 사용 의도를 코드에 드러내고, 실패 조건을 일관되게 가져가는 쪽으로 선택하는 것이 유지보수에 유리함 ...