Object.keys에서 10 다음에 넣은 2가 먼저 나오는 이유
객체에 10, 2, 01, label을 차례로 넣어도 Object.keys와 Object.entries는 2를 먼저 내보낸다. 배열 인덱스와 다른 문자열 키의 열거 규칙을 Node 실행 결과로 구분하고, 메뉴의 삽입 순서를 Map이나 배열에 보존할 시점을 설명한다.
빌드노트
프런트엔드
프런트엔드 카테고리의 글입니다.
글 검색
글 목록
총 48개의 글
-
-
structuredClone 뒤 원래 ArrayBuffer 길이가 0이 됐다
structuredClone의 transfer에 넣은 ArrayBuffer는 원본에서 분리된다. 4바이트 버퍼의 일반 복제와 이전을 실행해 길이, 기존 뷰의 undefined, 새 뷰 생성의 TypeError를 비교하고 원본을 다시 쓸지에 따라 transfer 여부를 고른다.
-
첫 자식의 margin-top을 늘렸는데 부모 전체가 내려간다
부모 margin이 0이어도 첫 자식의 위쪽 margin은 부모 밖에서 합쳐질 수 있다. 실제 좌표와 화면으로 경계를 확인하고, 카드 내부 여백은 padding으로 정할지 자식 margin을 flow-root 안에 유지할지 선택한다.
-
input.value를 바꿨는데 reset하면 예전 값으로 돌아간다
텍스트 입력의 value를 바꿔도 reset 기준은 그대로일 수 있다. 현재값·defaultValue·value 속성을 비교하고, 편집 여부에 따른 기본값 반영 차이와 두 값을 함께 갱신할 시점을 설명한다.
-
빈 숫자 입력을 Number로 읽으면 0이 된다
빈 number 입력의 value는 빈 문자열이고 Number로 바꾸면 0이 된다. 실제 브라우저에서 valueAsNumber와 validity를 비교해 선택 입력의 null, 실제 0, 필수 누락과 잘못된 숫자를 구분한다.
-
z-index가 9999인 드롭다운이 가려지면 부모의 순서를 본다
드롭다운의 큰 z-index가 조상 쌓임 맥락 밖에서는 통하지 않는 이유를 확인한다. 실제 조상 스타일 조회와 같은 좌표의 요소 순서·화면 비교로 부모 순서 변경, 불필요한 경계 제거, 메뉴 렌더링 위치 변경 중 무엇을 고를지 판단한다.
-
날짜만 넣은 Date가 미국 시간대에서 하루 전으로 보이는 이유
YYYY-MM-DD를 Date로 만들면 UTC 자정이 되고, 로스앤젤레스에서는 전날로 표시될 수 있다. 세 브라우저 시간대의 ISO 값과 로컬 날짜를 비교하고, 달력 날짜 문자열 보존과 시점의 시간대 표시를 구분한다.
-
await forEach를 썼는데 저장 완료가 먼저 표시된다
forEach는 async 콜백이 반환한 Promise를 기다리지 않는다. 직접 제어한 Promise로 완료 표시가 앞서는 조건을 재현하고, for...of와 Promise.all의 시작 순서·실패 전파·남은 작업의 동작을 비교한다.
-
숫자를 sort했는데 10이 2보다 앞에 온다
숫자 배열의 기본 sort가 문자열 순서를 사용하는 이유와 원본 변경을 실제 출력으로 확인한다. 숫자 비교 함수, 복사 후 정렬, toSorted의 선택 기준을 설명하고 숫자 문자열·NaN의 변환과 검증 경계를 구분한다.
-
검색어를 바꿨는데 이전 fetch 응답이 화면을 덮었다
검색 요청 두 개의 응답 순서를 뒤집어 오래된 결과가 화면을 덮는 조건을 재현했다. fetch 취소가 통하는 범위와 JSON 수신 뒤 후처리에서 요청 번호 검사가 필요한 이유를 브라우저 기록으로 비교한다.
-
data-enabled="false"인데 조건문은 참으로 들어간다
data-enabled="false"는 불리언이 아니라 문자열이다. 새 브라우저 문서에서 false·true·빈 값·누락을 비교하고, "true" 명시 비교와 잘못된 값을 거절하는 파서 중 어떤 계약을 쓸지 정한다.
-
URLSearchParams.append로 검색어를 바꿨더니 q가 두 번 남는다
검색어를 바꾸려던 append는 기존 q를 남기고 새 값을 추가한다. 쿼리 원문과 get/getAll, loopback의 실제 요청 대상을 비교해 set으로 교체할 키와 여러 값을 보존할 키를 구분한다.