프로그램 개발서

문제와 사용 상황typeof error === "error"는 동작하지 않고 instanceof Error는 iframe, worker, Node.js vm처럼 다른 realm에서 만들어진 오류에 false가 될 수 있습니다. Error.isError()는 실제 Error 계열을 Boolean으로 판별하는 정적 메서드입니다.테스트 환경·버전·날짜2026-08-07 KST에 Node.js v24.14.0에서 node:vm cross-realm 오류와 일반 객체·null·문자열을 검사했습니다. Node.js v23.11.1에서는 API 미지원 상태를 확인해 기능 감지 경로만 기록했습니다.최소 재현 코드const nativeError = new Error("database timeout");console.lo..

문제와 사용 상황async generator나 Node.js 스트림처럼 비동기적으로 값을 내보내는 입력을 배열로 모을 때 for await...of와 Promise.all()을 상황별로 나누어 사용하게 됩니다. Array.fromAsync()는 async iterable, 일반 iterable, array-like 입력을 배열로 만들고 mapper 결과도 await합니다.반환값은 배열 자체가 아니라 배열로 이행되는 Promise입니다. 따라서 await가 필요합니다. 모든 작업을 동시에 시작할 목적이면 순차적으로 값을 기다리는 Array.fromAsync() 대신 Promise.all()을 선택해야 합니다.테스트 환경·버전·날짜2026-08-06 KST에 외부 패키지 없이 Node.js v24.14.0에..

문제와 사용 상황oklch()는 밝기(L), chroma(C), 색상 각도(H)를 나누어 CSS 색상을 표현합니다. 다만 지원하지 않는 브라우저에서 최신 선언만 남기면 배경색이나 글자색이 사라질 수 있습니다. 기존 색상을 먼저 선언한 뒤 @supports 안에서 OKLCH 값을 덮어쓰면 지원 여부에 따라 안전하게 점진적으로 향상할 수 있습니다.기존 색상 표기를 일반 선언으로 둡니다.@supports (background-color: oklch(...))가 참일 때만 최신 값을 적용합니다.브라우저 이름이 아니라 기능 지원 여부를 검사합니다.테스트 환경·버전·날짜2026-08-05 KST에 Node.js v24.14.0 정적 검사와 Node.js 내장 HTTP 서버를 사용했습니다. 실제 브라우저 검사는 Go..

문제와 사용 상황jQuery 3.x에서 오래 운영한 화면을 4.0.0으로 올린 뒤 $.trim is not a function 또는 $.parseJSON is not a function 오류가 나면 CDN 장애보다 제거 API를 먼저 확인해야 합니다. jQuery 4.0 공식 발표와 업그레이드 가이드에는 jQuery.trim, jQuery.parseJSON, jQuery.type, jQuery.now 등 폐기됐던 함수가 4.0에서 제거됐다고 명시돼 있습니다.이 변경은 함수 이름만 네이티브 API로 바꾸면 끝나는 문제가 아닙니다. jQuery 3.7.1의 $.trim(null)은 빈 문자열을 반환하지만 String(null).trim()은 "null"을 반환합니다. $.type(null)은 "null", ..

문제와 사용 상황검색창에 입력한 문자열을 정규식으로 찾아 강조하거나, 사용자가 고른 파일명을 필터링할 때 new RegExp(input)처럼 동적 정규식을 만들기 쉽습니다. 문제는 입력값이 평범한 문자열이 아니라 정규식 문법으로 해석된다는 점입니다.예를 들어 사용자가 a.b를 입력했다고 가정해 보겠습니다. 점(.)은 정규식에서 “줄바꿈을 제외한 임의의 한 문자”라는 뜻입니다. 따라서 아래 코드는 a.b뿐 아니라 aXb도 일치시킵니다.const input = "a.b";const pattern = new RegExp(`^${input}$`);console.log(pattern.test("a.b")); // trueconsole.log(pattern.test("aXb")); // true: 의도하지 않은 일..

문제와 사용 상황삭제 확인, 결제 확인, 설정 변경처럼 사용자의 결정을 잠시 기다려야 할 때 모달 창을 사용한다. 화면 가운데 박스를 띄우는 것만으로는 모달이 완성되지 않는다. 키보드 사용자는 창이 열린 사실과 현재 포커스 위치를 알아야 하고, 배경의 링크나 버튼으로 포커스가 빠져나가면 안 되며, 닫은 뒤에는 작업을 시작한 위치로 돌아갈 수 있어야 한다.직접 만든 div 모달은 이 동작을 모두 구현해야 한다. 반면 네이티브 를 showModal()로 열면 브라우저가 top layer, 배경 inert 처리, 초기 포커스, Esc 닫기 같은 기본 동작을 제공한다. 다만 적절한 제목, 초기 포커스 대상, 명시적인 닫기 버튼은 작성자가 정해야 한다.이 글은 되돌리기 어려운 “계정 삭제 확인”을 예로 든다. 첫..

문제와 사용 상황검색 필터, 체크박스, 다중 선택 입력을 URL에 남기면 같은 이름의 쿼리 매개변수가 여러 번 나타날 수 있다.?tag=javascript&tag=web이 값을 URLSearchParams.get("tag")로 읽으면 첫 번째 값인 "javascript"만 나온다. 오류가 발생하지 않기 때문에 두 번째 값이 조용히 사라진 것처럼 보일 수 있다. 반대로 getAll("tag")는 ["javascript", "web"]처럼 같은 이름의 값을 배열로 모두 반환한다.핵심은 매개변수의 의미를 먼저 정하는 것이다. 페이지 번호처럼 하나만 허용하는 값은 get()으로 읽고, 태그·카테고리처럼 여러 값을 허용하는 항목은 getAll()로 읽는다. URL을 수정할 때도 값을 추가하려면 append(), ..

문제와 사용 상황주문번호, 결제번호, 데이터베이스의 64비트 정수처럼 자릿수가 긴 값을 JSON으로 전달할 때 화면에 나온 숫자가 원본과 달라지는 경우가 있습니다. JSON 문법은 긴 숫자를 허용하지만, JavaScript의 일반 숫자형인 Number가 모든 정수를 정확하게 표현하는 것은 아니기 때문입니다.JavaScript에서 정확하게 다룰 수 있는 최대 안전 정수는 Number.MAX_SAFE_INTEGER, 즉 9007199254740991입니다. 이 범위를 넘는 숫자를 일반 JSON.parse()로 읽으면 파싱 자체는 성공해도 값이 반올림될 수 있습니다. 오류가 발생하지 않기 때문에 로그 ID나 주문번호가 조용히 바뀌는 문제가 더 위험합니다.이번 글에서는 실제로 정밀도 손실을 재현하고, JSON...