javascript
파서를 멈추지 마라: script async와 defer의 실행 타이밍
async와 defer는 다운로드를 파싱과 병렬로 돌리지만, 실행 타이밍이 다르다. 순서·DOM 준비 여부를 기준으로 선택하면 로딩 성능과 안정성을 함께 챙길 수 있다.
javascript프론트엔드퍼블리싱
javascript
Category posts
javascript
순회는 계약이다: 일반 객체에 Symbol.iterator를 붙여 이터러블로 만들기
한 문장 결론: 이터러블은 “순회 가능한 형태로 값을 꺼내는 계약”이다. 일반 객체에 Symbol.iterator를 구현하면 for...of와 전개 연산자가 일관된 규칙으로 동작한다.
javascript프론트엔드
javascript
순회는 계약이다: 일반 객체에 Symbol.iterator를 붙여 이터러블로 만들기
한 문장 결론: 이터러블은 “순회 가능한 형태로 값을 꺼내는 계약”이다. 일반 객체에 Symbol.iterator를 구현하면 for...of와 전개 연산자가 일관된 규칙으로 동작한다.
javascript프론트엔드
javascript
선언은 위로, 값은 아래로: 자바스크립트 호이스팅의 실제 동작
호이스팅은 코드가 위로 이동하는 현상이 아니라, 실행 전에 선언 정보가 먼저 등록되는 동작입니다. var는 선언 시 undefined로 시작해 조용히 흘러가지만, let/const는 TDZ로 초기화 전 접근을 막아 실수를 빨리 드러냅니다. 함수는 선언 방식에 따라 호출 가능 시점이 달라지며, Next.js에서는 실행 위치(서버/브라우저)까지 구분하면 디버깅이 쉬워집니다.
javascript프론트엔드
javascript
의도를 자료구조로 말하라: Object·Map·Set 선택 체크리스트
직렬화(서버 전송/저장) 경계에는 Object/Array, 조회·캐시에는 Map, 선택·중복 제거에는 Set이 가장 자연스럽게 들어맞습니다.
javascript
javascript
필요한 만큼만 잘라라: slice의 비파괴 복사 규칙
slice는 원본을 유지한 채 필요한 구간만 새 값으로 잘라내는 도구다. 다만 Array / String / TypedArray / Buffer는 "새 값"의 의미가 조금씩 다르다.
javascript
javascript
lodash/fp로 조합 가능한 파이프라인 만들기
lodash/fp는 “함수 먼저, 데이터는 마지막” 규칙으로 작은 함수를 쉽게 조합하게 만들어, 로직을 “흐름”으로 읽히게 한다.
javascript
javascript
once debounce throttle로 함수 실행 제어하기
이벤트는 그대로 두고 “실행”만 줄이면, UX는 부드러워지고 비용(렌더/네트워크/배터리)은 내려간다. 자주 호출되는 함수는 대부분 “기능”이 아니라 “빈도” 때문에 문제가 됩니다.
javascript프론트엔드
javascript
val을 지우고도 “동적인 UI”는 충분히 만든다
동적으로 “행동”이 바뀌어야 한다면, 코드를 내려받아 실행하지 말고 명령(type) + 데이터(payload) 로 표현하자.
javascript프론트엔드
javascript
숨은 변환을 허용하지 마라: ==·===·Object.is 비교 기준
비교는 ===를 기본으로 두고, NaN/부호 있는 0(-0)까지 정확히 다뤄야 할 때만 Object.is로 넘어가면 된다.
javascript
javascript
yield*로 제너레이터 합성하기
yield가 “값을 한 번 내보내기”라면, yield*는 “다른 이터러블(iterable)의 순회를 통째로 위임하기”다. 제너레이터(generator)를 쓰다 보면 “값을 여러 번 내보내고 싶다”는 요구가 자주 나온다.
javascript
javascript
preventExtensions·seal·freeze로 객체를 “잠가” 불변성에 가까워지기
“불변 객체”가 필요하다면, 먼저 어디까지 막을지(확장/삭제/값 변경)를 정하고 그에 맞는 잠금 메서드를 선택하면 된다.
javascript