기술노트

자바스크립트 Date의 함정을 정리한 Temporal API 입문. 불변 객체·1부터 시작하는 월·타임존 처리, PlainDate/ZonedDateTime 타입과 폴리필로 지금 쓰는 법까지.

안드로이드 뒤로 가기로 메뉴가 아니라 페이지가 통째로 닫히던 문제를 CloseWatcher API가 해결합니다. Esc와 뒤로 가기를 하나의 close 이벤트로 다루고 중첩 UI와 취소·폴백까지 처리하는 법을 살펴봅니다.

window.resize로는 못 잡는 개별 요소의 크기 변화를 ResizeObserver로 감지합니다. borderBoxSize 사용법, 악명 높은 loop 에러 회피, 컨테이너 기준 반응형 실전 패턴까지 정리했습니다.

fetch 타임아웃에 더는 setTimeout·clearTimeout이 필요 없습니다. AbortSignal.timeout()과 any()로 취소 로직을 한 줄로 줄이고 타임아웃과 사용자 취소를 구분하는 최신 패턴을 소개합니다.

str.length가 이모지 하나를 8로 세는 이유와 해법을 파헤칩니다. Intl.Segmenter로 grapheme·단어·문장을 로케일 규칙에 맞게 정확히 쪼개고 글자 수를 제대로 세는 실전 패턴과 성능 팁까지 정리했습니다.

검색어 하이라이트에 더는 span을 끼워 넣지 마세요. CSS Custom Highlight API로 DOM은 그대로 두고 Range와 ::highlight()만으로 텍스트를 강조하는 3단계 패턴과 우선순위·제약을 정리했습니다.

프레임워크마다 따로 구현하던 반응성을 자바스크립트 언어 표준으로 만들려는 TC39 Signals 제안. Signal.State/Computed API와 이펙트를 스펙에서 뺀 이유, 지금 실무에서 어떻게 대해야 할지 정리했다.

긴 자바스크립트 작업을 scheduler.yield()로 잘게 쪼개 메인 스레드를 양보하고 INP를 개선하는 법. setTimeout·requestIdleCallback·Web Worker와 무엇이 다른지, 언제 써야 하는지 예제로 정리했다.

나중에 JS로 추가한 버튼에 addEventListener가 안 먹는 이유와, 부모에 한 번만 걸어 모두 처리하는 이벤트 위임 패턴을 정리한다.

0 == "", null == undefined, [] == ![]... == 는 타입을 멋대로 변환해 직관을 배신한다. === 를 기본으로 써야 하는 이유를 규칙으로 정리.

둘 다 "값이 없음"이지만 의미가 다르다. undefined는 "아직 할당 안 됨", null은 "의도적으로 비움". 언제 뭐가 튀어나오는지 정리한다.

JavaScript에서 0.1 + 0.2가 0.30000000000000004가 되는 건 버그가 아니라 부동소수점의 원리다. 왜 그런지와 돈 계산을 안전하게 하는 법.