removeEventListener를 호출했는데 클릭이 계속 처리된다
같은 내용의 익명 함수로는 등록된 클릭 리스너를 제거할 수 없다. 실제 브라우저 클릭으로 함수 참조와 capture 일치, 중복 등록의 경계, AbortController 취소 전후를 비교하고 정리할 수명에 맞는 방식을 고른다.
빌드노트
프런트엔드
프런트엔드 카테고리의 글입니다.
글 검색
글 목록
총 48개의 글
-
-
top을 줬는데 sticky가 사라지면 조상 overflow부터 확인한다
top이 적용된 sticky가 페이지 스크롤에서 사라진다면 가까운 overflow 조상을 확인한다. 같은 HTML의 hidden·visible·auto와 페이지·내부 스크롤 좌표를 비교하고, 잘림과 레이아웃을 보존할 수정 조건 및 clip의 한계를 설명한다.
-
Grid의 1fr 두 칸인데 긴 문자열이 옆 칸을 밀어낸다
Grid의 1fr은 자동 최소 크기를 포함한다. 세 뷰포트에서 열 너비와 문자열의 scrollWidth를 비교해 minmax(0, 1fr), 아이템의 min-width: 0, 줄바꿈의 적용 범위를 구별한다.
-
pointer-events: none 버튼이 키보드로는 눌리는 이유
pointer-events: none은 포인터의 대상 선택을 바꾸지만 버튼의 Tab 초점과 Enter 활성화는 막지 않는다. 같은 네이티브 버튼의 정상·CSS 적용·disabled 조건을 실제 좌표 클릭과 키 입력으로 비교하고, 사용 불가 상태를 구현할 때 바꿀 지점을 설명한다.
-
display: contents를 줬더니 자식은 남고 배경과 테두리가 사라진다
display: contents에서 배경·테두리·padding 값이 남아도 wrapper의 박스는 생기지 않는다. 기존 요소의 display와 자식 크기를 짧게 조회하고, 공통 장식이 필요할 때 박스를 복원하는 방법과 실제 Chrome 관찰을 설명한다.
-
input.value를 바꿨는데 input 이벤트가 오지 않을 때
input.value 대입은 현재 값만 바꾸며 input 이벤트를 만들지 않는다. 같은 텍스트 입력에서 키 입력·대입·합성 이벤트의 횟수와 isTrusted를 비교하고, 공유 갱신 함수를 직접 호출할지 다른 DOM 리스너에 알릴지 판단한다.
-
Array(3).map으로 만든 목록에 항목이 없는 이유
Array(3)과 명시적 undefined 배열의 콜백 호출 수·자체 속성 존재를 비교한다. length와 JSON 로그만으로는 빈 슬롯을 알아볼 수 없는 이유를 확인하고, Array.from의 생성 콜백으로 세 항목을 만든다.
-
취소 후 다시 검색했는데 새 fetch도 바로 취소된다
취소 뒤 새 검색도 바로 거절된다면 fetch 직전 signal.aborted와 reason을 확인한다. 같은 signal의 서버 수신 0건과 새 signal의 HTTP 200을 로컬 브라우저에서 비교하고, 검색을 시작할 때마다 controller를 새로 만드는 코드로 수정한다.
-
문자열 배열에 map(parseInt)를 썼더니 NaN이 섞인다
map이 넘기는 인덱스가 parseInt의 진법 인자로 들어가면 같은 문자열도 NaN이나 엉뚱한 숫자가 된다. 실제 Node 실행으로 한 인자 래퍼, 명시 진법 10, Number를 비교하고 접미 문자와 빈 문자열의 변환 차이에 맞춰 수정한다.
-
같은 문자열인데 정규식 test()가 true와 false를 오가는 이유
같은 JavaScript 정규식으로 같은 문자열을 검사해도 g 플래그의 lastIndex 상태 때문에 결과가 바뀔 수 있다. 호출 전후 위치를 직접 비교하고, 포함 판별에서 g를 제거할 때와 호출마다 0으로 초기화할 때를 구별한다.
-
클릭 핸들러에서 await 뒤에 막았는데 링크가 이동한다
비동기 click 핸들러에서 뒤늦게 preventDefault를 호출하면 취소 값이 true여도 링크는 이미 이동할 수 있다. 실제 URL과 이벤트 상태를 비교하고, 먼저 취소한 뒤 허용 결과에 따라 이동하는 코드와 즉시 완료된 Promise의 함정을 설명한다.
-
form.submit()으로 보내면 required 검사가 빠지는 이유
form.submit()은 required 검사와 submit 이벤트를 생략한다. 새 Chrome 프로필과 로컬 수신 서버로 네 제출 경로를 비교하고, 검증·이벤트·버튼의 name=value가 필요한 경우 requestSubmit에 무엇을 넘길지 설명한다.