Web

tailwind-merge로 클래스 충돌 해결하기

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

IndexedDB 활용해보기

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

requestAnimationFrame() 알아보기

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

Node.js와 TypeScript, Selenium으로 웹 스크래퍼 만들기 (1) 준비와 설계

최근에 사내 프로젝트에 필요한 데이터를 주기적으로 수집하는 웹 스크래퍼를 개발했습니다. 클라이언트가 API를 별도로 제공하지 않아서 클라이언트가 제공하는 웹 사이트로부터 실시간으로 추가되는 데이터를 수집하여 사내 DB의 데이터를 업데이트해야 하는 상황이었는데요. DB의 데이터를 업데이트하는 API를 통해 전달되는 데이터 형태는 동일하지만 클라이언트 웹 사이트가 10곳 이상 추가될 예정이었습니다. 그래서 구조 설계를 할 때 언제든지 새롭게 추가된 사이트에 대한 코드를 작성하여 기능을 추가하더라도 일관된 구조로 개발하고 유지할 수 있게 하는 것을 가장 중요하게 생각했어요. 현재는 개발 및 배포를 마쳐 모니터링을 진행하고 있는데 지금까지의 개발 과정을 되짚어보려고 합니다. 이번에는 웹 스크래퍼 개발 전 준비 ..

가상 DOM 없이 효율적으로 DOM 요소 추가하기 (feat. DocumentFragment 노드)

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