핵심 요약
미리디가 SVG 필터로 브라우저에서 이미지 보정을 구현하고, React 에디터 렌더링과 자연스럽게 연결하는 방법을 제시했습니다.
구현 방법
- feGaussianBlur, feColorMatrix, feComponentTransfer 등 프리미티브를 조합한 파이프라인 구성
- 하나의 에 여러 프리프리티브를 배치하고 in/result로 연결
- React의 props/state로 필터 파라미터를 바인딩해 실시간 반영
주요 결과
- DOM 선언적 적용으로 구조 확인과 유지 관리가 용이
- 다중 효과를 하나의 파이프라인으로 관리해 구현 복잡성 감소
- React 연동으로 에디터 보정 기능의 확장성과 재사용성 향상
