MDN, 웹 컴포넌트(Web Components)와 Lit로 프런트엔드(Frontend) 대대적 개편
MDN은 기존 React 기반 프런트엔드(Frontend)의 기술 부채(Technical Debt) 문제를 해결하기 위해 리빌딩을 진행함
웹 컴포넌트(Web Components)와 Lit를 도입하여 UI 컴포넌트(UI Component) 개발 및 유지보수성을 개선함
JSX 컴파일(JSX Compilation) 필요성 제거 및 DOM API(DOM API)와의 통합을 통해 개발 생산성을 향상시킴
Scrimba와의 협업을 통해 실제 프로덕션 환경(Production Environment)에서의 웹 컴포넌트(Web Components) 활용 사례를 제시함
기술 부채(Technical Debt) 문제와 프런트엔드(Frontend) 리빌딩의 배경
MDN은 기존 React 기반 프런트엔드(Frontend)에서 기술 부채(Technical Debt) 누적으로 인한 유지보수 어려움을 겪었다. 특히, 복잡한 Webpack 설정과 Sass, CSS 변수의 혼용은 CSS 스코핑(CSS Scoping) 문제를 야기하여 UI 컴포넌트(UI Component) 변경 시 예상치 못한 부작용을 초래했다. 이러한 문제들은 MDN 프런트엔드(Frontend) 리빌딩의 주요 원인이 되었다.
웹 컴포넌트(Web Components)와 Lit의 도입 및 장점
MDN은 웹 컴포넌트(Web Components)와 Lit를 도입하여 UI 컴포넌트(UI Component) 개발 생산성을 향상시켰다. Lit는 JSX와 유사한 HTML-ish 문법을 지원하지만, 별도의 컴파일 과정 없이 네이티브 자바스크립트(Native JavaScript)로 동작하여 개발 편의성을 높였다. 또한, DOM API(DOM API)와의 통합을 통해 기존 React 기반 환경에서 발생했던 이중 구현(Duplicate Implementation) 문제를 해결했다.
스크림바(Scrimba)와의 협업을 통한 실질적인 활용 사례
MDN은 Scrimba와의 협업을 통해 웹 컴포넌트(Web Components)를 실제 프로덕션 환경(Production Environment)에 적용했다. Scrimba의 대화형 학습 환경을 MDN에 임베딩(Embedding)하는 과정에서 Lit를 활용하여 UI 컴포넌트(UI Component)의 재사용성(Reusability)과 유지보수성(Maintainability)을 확보했다. 특히, Lit의 `@close` 및 `@click`과 같은 이벤트 바인딩(Event Binding) 기능을 통해 DOM 조작(DOM Manipulation) 코드의 간결성을 높였다.
React의 한계와 웹 컴포넌트(Web Components)의 대안
기존 React 기반 프런트엔드(Frontend)는 정적 콘텐츠(Static Content)를 감싸는 래퍼(Wrapper) 역할에 그쳐, HTML 콘텐츠를 React 앱에 통합하기 위해 과도한 파싱(Parsing) 및 로직(Logic) 처리가 필요했다. 웹 컴포넌트(Web Components)는 이러한 문제를 해결하고, JSX 컴파일(JSX Compilation)의 필요성을 제거하여 개발 효율성을 높였다. 이는 MDN의 프런트엔드(Frontend) 아키텍처(Architecture)를 개선하는 데 기여했다.
