전체 글13 WeakSet은 왜 다르게 동작할까 (참조, GC, 메모리) 이 글은 JavaScript Set 내부 구조를 파헤치는 시리즈의 3편입니다.1편: Hash Table, 처음부터 제대로 이해하기2편: V8은 Set을 어떻게 구현했을까 (OrderedHashTable)3편: WeakSet은 왜 다르게 동작할까 (참조, GC, 메모리) ← 지금 여기WeakSet은 Set과 비슷해 보이는데 막상 쓰려고 하면 제약이 많다.const weakSet = new WeakSet();weakSet.add("문자열"); // ❌ TypeErrorweakSet.add(42); // ❌ TypeErrorweakSet.add({id: 1}); // ✅for (const v of weakSet) {} // ❌ iterable 아님weakSet.size; .. 2026. 3. 21. V8은 Set을 어떻게 구현했을까 (OrderedHashTable) 이 글은 JavaScript Set 내부 구조를 파헤치는 시리즈의 2편입니다.1편: Hash Table, 처음부터 제대로 이해하기2편: V8은 Set을 어떻게 구현했을까 (OrderedHashTable)3편: WeakSet은 왜 다르게 동작할까 (참조, GC, 메모리)프로그래머스 전화번호 목록 문제를 풀다가 효율성 테스트에서 시간 초과가 났다. 원인을 파헤치다 보니 Set의 내부 동작까지 들여다보게 됐다. Hash Table의 기본 개념(bucket, 충돌, Rehashing)은 1편에서 다뤘으니, 여기서는 V8이 그걸 어떻게 구현했는지에 집중한다.문제: 왜 시간 초과가 났을까?처음 짠 코드는 대략 이런 구조였다.const valueSet = map.get(item[0]) || new Set();if (.. 2026. 3. 8. Hash Table, 처음부터 제대로 이해하기 이 글은 JavaScript Set 내부 구조를 파헤치는 시리즈의 1편입니다.1편: Hash Table, 처음부터 제대로 이해하기2편: V8은 Set을 어떻게 구현했을까 (OrderedHashTable)3편: WeakSet은 왜 다르게 동작할까 (참조, GC, 메모리)프론트엔드 개발을 하다 보면 Set.has()가 빠르다는 건 알면서도, 왜 빠른지는 막연하게 넘어가는 경우가 많다. "Hash Table 기반이라서요"라는 말을 들어도 Hash Table이 정확히 뭔지 설명하기 어렵고.이 글은 Hash Table을 처음 접하는 사람도 이해할 수 있게, 왜 필요한지부터 시작해서 내부 구조까지 순서대로 짚어본다.왜 Hash Table이 필요한가배열에서 특정 값을 찾으려면 처음부터 하나씩 봐야 한다.const a.. 2026. 3. 7. tailwind-merge로 클래스 충돌 해결하기 TL;DR tailwind-merge, twin.macro와 같은 NPM 패키지를 활용하면 하나의 요소에 같은 속성을 정의하는 className이 두 개 이상일 경우, 가장 마지막에 위치한 클래스가 최종적으로 적용되게 할 수 있습니다. 문제 상황 저는 요즘 React, TailwindCSS, TypeScript를 이용한 UI 공통 컴포넌트 라이브러리를 만들고 있는데요. BaseButton이라는 기본 Button UI 컴포넌트를 만든 후에 BaseButton 컴포넌트를 사용하는 기본 Chip 컴포넌트를 만들었습니다. 스토리북으로 문서화하기 위해 스토리를 작성하던 중에 예상한 대로 동작하지 않아서 개발자 도구를 함께 열어보고 확인해보았습니다. // BaseChip.tsx interface Props { ch.. 2024. 4. 11. IndexedDB 활용해보기 사내 백오피스 웹 페이지를 개선하는 작업을 진행하던 중에, 서버에서 관리하기에는 비용이 많이 들고 임시로 관리하면 되는 데이터이면서 URI에는 노출되지 않아야 할 데이터를 클라이언트에서 관리하게 되었습니다. IndexedDB API를 활용하여 데이터를 관리하면서 고려했던 점과 예시 코드를 정리해보고자 합니다. IndexedDB는 파일이나 blob 등의 데이터를 클라이언트에 저장할 수 있는 API로 JavaScript 기반의 객체지향 데이터베이스입니다. 인덱스 키를 통해 데이터를 저장하고 검색할 수 있기 때문에 빠르게 탐색할 수 있습니다. 보안에 취약하고 용량이 제한되어 있는 Web Storage API(Local Storage, Session Storage)에 비해 IndexedDB는 다음과 같은 장점을.. 2024. 3. 31. requestAnimationFrame() 알아보기 최근에 이벤트 루프의 개념을 다시 짚어보던 중에 requestAnimationFrame을 접하게 되어 좀 더 자세히 알아보았습니다. 효율적인 페이지 렌더링이나 매끄러운 애니메이션과 인터랙션 구현에 관심 있으시다면 requestAnimationFrame을 활용해보셔도 좋을 것 같아요. requestAnimationFrame은 웹 애니메이션을 구현할 때 자주 사용되는 Web API 중 하나입니다. 우선 어떤 방식으로 사용하는지 살펴보겠습니다. window.requestAnimationFrame() 메서드 프레임(frame)은 화면에 표시되는 이미지 단위를 의미합니다. 움직이는 애니메이션을 보여주기 위해서는 연속적으로 조금씩 변화하는 이미지를 표시해서 하나의 연속된 동작으로 인식하도록 합니다. requestA.. 2024. 3. 17. 이전 1 2 3 다음
