웹 컴포넌트의 도입 배경 및 활용

• Hotwire 기반 서비스의 UI 통합 과제: Classy는 Hotwire를 채택한 신규 서비스에서 기존 Angular 기반의 사내 UI 컴포넌트(버튼, 헤더, 캘린더 등)를 재사용하고자 했습니다. 그러나 Hotwire는 서버가 HTML을 렌더링하는 방식이므로, Angular 컴포넌트를 직접 삽입하면 프레임워크 런타임 부재로 동작하지 않는 문제가 있었습니다.

• 웹 컴포넌트의 선택: SPA 전환이나 Rails 측 관리 부담 증가 없이 UI 컴포넌트를 통합하기 위해 웹 표준 사양인 웹 컴포넌트(Web Components)를 도입했습니다. 특히, Custom Elements를 활용하여 UI 컴포넌트를 HTML 요소처럼 사용할 수 있도록 변환했습니다.

• 장점: 웹 컴포넌트는 프레임워크에 독립적이므로 브라우저에서 직접 동작하며, Rails와 웹 표준 인터페이스를 통해 느슨하게 결합되어 UI 라이브러리 변경에 강하고 운영이 용이합니다.

UI 컴포넌트의 웹 컴포넌트 변환 및 통합

• 프레임워크 지원: Angular와 같이 웹 컴포넌트 변환을 위한 API를 자체적으로 제공하는 프레임워크를 활용하여 컴포넌트의 입출력(I/O)을 웹 표준 사양에 매핑하고 Custom Elements로 등록했습니다.

• 단계적 도입: 상호작용이 없는 단순한 컴포넌트(아이콘, 푸터)부터 시작하여 점진적으로 복잡한 컴포넌트를 도입했습니다.

Rails와의 데이터 연동 방식

• HTML 속성: 가장 간단한 방식으로, 문자열 데이터만 전달 가능하며 선언적으로 HTML에 직접 삽입합니다.

• DOM 프로퍼티: JavaScript 데이터 타입(숫자, 불리언, 함수, 객체 등)을 전달할 수 있으나, 사용자 입력이 포함될 경우 XSS 취약점에 노출될 위험이 있습니다.

• 커스텀 데이터 속성: 보안을 강화한 방식입니다. JSON 데이터를 HTML에 이스케이프하여 data-* 속성에 전달하고, JavaScript에서 이를 파싱하여 사용합니다. 다소 번거로울 수 있으나, 새로운 변환 로직 없이 안전하게 데이터를 전달할 수 있습니다.

Rails 폼 헬퍼와의 연동 및 재사용성 개선

• 초기 문제점: 캘린더와 같은 입력 요소를 Custom Elements로 도입 시, Rails의 form_helper와는 별개로 캘린더와 input 요소 간의 데이터 연동 로직을 매번 수동으로 작성해야 했습니다. 이는 코드의 재사용성을 저해하고 복잡도를 높였습니다.

• 재사용 단위 재정의: input 요소와 캘린더를 하나의 Custom Element로 재구성했습니다. 이 Custom Element는 네이티브 HTML input 요소의 속성(name, id, value)을 인터페이스로 노출하여 form_helper와의 연동을 용이하게 했습니다.

• Rails FormBuilder 확장: Rails의 FormBuilder 확장 API를 활용하여 기존 form_helper의 동작을 오버라이드했습니다. 이를 통해 form_helper가 자동으로 생성하는 input 요소의 속성을 Custom Element에 전달하고, input 요소를 Custom Element로 대체할 수 있었습니다. 결과적으로 Rails 모델과 Custom Element 간의 연동이 form_helper 하나로 통합되어 개발 편의성과 코드의 간결성을 확보했습니다.