JavaScript
1.Object 대신에 Map을 더 많이 사용해보자!
자바스크립트의 객체를 사용할 때 내용의 변경이 발생하는 key-value 값을 저장하는 경우 일반 객체 대신 map을 활용하자!객체의 delete 연산자는 성능 저하로 이슈가 많지만 map은 key를 제거하는데에 최적화가 되어 있어서 훨씬 빠르다고 합니다.위의 사진은
2.JS 가비지 컬렉터 이해하기
웹 어플리케이션 내부에서 메모리 누수는 범위가 크고 추적하기가 어려워서 나중에 대응하는데 어려움이 존재합니다.그래서 가비지 컬렉터가 어떻게 동작하는지 이해한다면 충분히 도움이 될 수 있을 것이라고 생각합니다!자바스크립트는 객체가 가비지 컬렉터에 수집되는 시점을 감지하는
3.자바스크립트로 API 재시도 전략 구현하기
API 요청 후 에러가 발생하면 재요청할 때 재시도 횟수에 따라 지연 시간이 점차 증가합니다.API 요청 후 에러가 발생하면, API를 재요청할 때 사용자가 설정한 값에 따라 지연 시간이 일정하게 증가합니다.API 요청 후 에러가 발생하면, 사용자가 설정한 일정한 지연
4.Promise를 취소하는 방법
자바스크립트는 Promise를 취소하는 API를 제공하지 않기 때문에 다른 방법으로 결과를 무시하는 방법을 소개합니다.Promise.withResolver는 2024년에 새로 등장했습니다.기존에는 Promise를 활용한다면 아래처럼 반드시 Resolve 함수와 Reje
5.HTML 속성(Attributes)과 DOM 프로퍼티(Properties)의 차이점
일반적으로 HTML에서 속성과 프로퍼티는 다른 개념으로 다르게 설정할 수 있습니다.속성을 부여한 엘리먼트는 직렬화가 가능하지만 프로퍼티는 볼 수 없습니다.속성은 항상 문자열 형태만 가능하지만 프로퍼티는 모든 타입으로 설정할 수 있습니다.속성의 key값은 대소문자를 구분
6.깊은 DOM의 위험성
일반적으로 DOM의 크기가 크면 브라우저의 메모리 사용량이 증가하고 스타일들을 계산하는데 많은 비용이 발생합니다.DOM의 크기뿐만 아니라 깊이도 성능에 중요한 영향을 미칩니다. Lighthouse와 같은 성능 측정 도구를 사용하면 DOM의 깊이와 관련된 성능 문제를 분
7.# ECMAScript 2024 새로운 기능
2024년 6월 26일에 ECMAScript 2024이 승인되어 공식적으로 표준이 되었습니다.Object.groupBy() 메소드가 추가되면서 별도의 연산을 통해 그룹화 기능이 추가되었습니다.Map.groupBy 메소드가 추가되면서 위와 동일하게 별도의 연산을 통해
8.BFCache 알아보기
BFCache란 backwards / forwards Cache의 약자로 브라우저가 렌더링된 웹 페이지의 스냅샷을 메모리에 저장해 두었다가, 사용자가 뒤로 또는 앞으로 이동할 때 즉시 페이지를 렌더링하는 메커니즘입니다. 이 기능 덕분에 페이지가 빠르게 전환되며, BFC
9.height: fit-content와 min-height 관계
현업에서 개발을 진행하다가 부모 엘리먼트에 height: fit-content와 min-height가 동시에 적용될 경우 자식 엘리먼트가 제대로 높이를 못 잡는 이슈가 발생했다. 왜 이런 현상이 발생했을까?파란색 영역은 height가 fit-content이지만 min-