피드로 돌아가기
Dev.toFrontend
원문 읽기
JS Zero 기반 CSS 전용 렌더러를 통한 차트 번들 크기 제거
Building Charts with Pure CSS — No SVG, No Canvas, No JS Required
AI 요약
Context
Chart.js, D3 등 외부 라이브러리 도입에 따른 과도한 번들 사이즈 증가 문제 발생. 단순 시각화 구현을 위해 런타임 JavaScript 연산과 DOM 복잡도를 감수해야 하는 기존 방식의 비효율성 확인.
Technical Solution
- clip-path: polygon() 기반의 시각적 라인 셰이핑을 통한 SVG/Canvas 의존성 제거
- CSS Custom Properties(--st-p1~p8)를 데이터 저장소로 활용한 상태 관리 최적화
- FSCSS Mixin을 통한 Build-time 컴파일 방식으로 브라우저 런타임 연산 비용 제거
- Scoped CSS Variables를 통한 개별 요소의 데이터 Override 구조 설계로 다중 라인 확장성 확보
- JS style.cssText 조작을 통한 데이터 주입 방식으로 런타임 동적 업데이트와 CSS Transition 연동 구현
실천 포인트
- 정적 데이터 시각화 시 외부 라이브러리 대신 브라우저 네이티브 CSS 기능 검토 - 런타임 연산을 Build-time 컴파일 단계로 전이하여 클라이언트 부하 감소 설계 - 데이터 상태를 CSS 변수로 관리하여 스타일과 데이터의 결합도 최적화