데구르르

TL;DR tailwind-merge, twin.macro와 같은 NPM 패키지를 활용하면 하나의 요소에 같은 속성을 정의하는 className이 두 개 이상일 경우, 가장 마지막에 위치한 클래스가 최종적으로 적용되게 할 수 있습니다. 문제 상황 저는 요즘 React, TailwindCSS, TypeScript를 이용한 UI 공통 컴포넌트 라이브러리를 만들고 있는데요. BaseButton이라는 기본 Button UI 컴포넌트를 만든 후에 BaseButton 컴포넌트를 사용하는 기본 Chip 컴포넌트를 만들었습니다. 스토리북으로 문서화하기 위해 스토리를 작성하던 중에 예상한 대로 동작하지 않아서 개발자 도구를 함께 열어보고 확인해보았습니다. // BaseChip.tsx interface Props { ch..

사내 백오피스 웹 페이지를 개선하는 작업을 진행하던 중에, 서버에서 관리하기에는 비용이 많이 들고 임시로 관리하면 되는 데이터이면서 URI에는 노출되지 않아야 할 데이터를 클라이언트에서 관리하게 되었습니다. IndexedDB API를 활용하여 데이터를 관리하면서 고려했던 점과 예시 코드를 정리해보고자 합니다. IndexedDB는 파일이나 blob 등의 데이터를 클라이언트에 저장할 수 있는 API로 JavaScript 기반의 객체지향 데이터베이스입니다. 인덱스 키를 통해 데이터를 저장하고 검색할 수 있기 때문에 빠르게 탐색할 수 있습니다. 보안에 취약하고 용량이 제한되어 있는 Web Storage API(Local Storage, Session Storage)에 비해 IndexedDB는 다음과 같은 장점을..

최근에 이벤트 루프의 개념을 다시 짚어보던 중에 requestAnimationFrame을 접하게 되어 좀 더 자세히 알아보았습니다. 효율적인 페이지 렌더링이나 매끄러운 애니메이션과 인터랙션 구현에 관심 있으시다면 requestAnimationFrame을 활용해보셔도 좋을 것 같아요. requestAnimationFrame은 웹 애니메이션을 구현할 때 자주 사용되는 Web API 중 하나입니다. 우선 어떤 방식으로 사용하는지 살펴보겠습니다. window.requestAnimationFrame() 메서드 프레임(frame)은 화면에 표시되는 이미지 단위를 의미합니다. 움직이는 애니메이션을 보여주기 위해서는 연속적으로 조금씩 변화하는 이미지를 표시해서 하나의 연속된 동작으로 인식하도록 합니다. requestA..

가상 DOM을 사용하지 않고 성능을 위해 최적화를 한다면 어떻게 해야 할까? → DocumentFragment 노드를 사용하자. DOM을 변경하는 처리에 비용이 많이 든다. 특히 DOM 요소 노드를 반복해서 추가(e.g. appendChild)하는 건 매우 비효율적이다. 따라서 가급적 DOM을 변경하는 횟수를 줄이는 게 성능에 유리하다. 미리 가짜 document를 만들어 여기에 요소들을 추가한 다음, 한번에 document에 추가해서 진짜 document는 한 번만 조작하도록 해보자. DOM 변경 자바스크립트 코드에서 DOM API로 DOM이나 CSSOM을 변경하면 → 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 → 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 리플로우(refl..