마법 없는 웹 개발: Inglorious Web 프레임워크로 생산성 UP!
by DD
5개월 전
조회수 30
자바스크립트(JavaScript) 프레임워크의 과도한 '마법' 현상, 즉 예측 불가능한 동작과 디버깅의 어려움을 지적하며, React, Vue, Svelte의 문제점을 구체적으로 분석함
Redux의 세 가지 원칙, 게임 엔진의 ECS 아키텍처(Entity Component System Architecture), lit-html의 DOM 업데이트 방식을 결합한 새로운 웹 프레임워크 Inglorious Web을 개발
Inglorious Web은 단순한 JavaScript 객체, 이벤트 핸들러, lit-html을 사용하여 컴파일 과정 없이 동작하며, 테스트 용이성과 성능 향상을 강조함
기존 프레임워크와 달리 엔티티 중심 아키텍처(Entity-centric Architecture)를 채택하여, 상태 관리와 UI 로직을 분리하고, 테스트 코드 간결화를 실현함
향후 시리즈를 통해 Inglorious Web의 아키텍처 상세 설명, 성능 벤치마크, 생태계 분석을 제공할 예정
Inglorious Web의 핵심 아키텍처: 엔티티 중심 설계
Inglorious Web은 기존 컴포넌트 중심 프레임워크와 달리 엔티티 중심 아키텍처(Entity-centric Architecture)를 채택하여, 애플리케이션을 엔티티(Entity)들의 집합으로 간주한다.
엔티티(Entity): 상태(State)와 동작(Behavior)을 캡슐화하며, UI 렌더링(UI Rendering)과 독립적으로 테스트 가능
타입(Type): 엔티티의 동작을 정의하며, ECS 아키텍처의 컴포넌트(Component)와 유사한 역할 수행
Redux의 세 가지 원칙: 단일 진실 공급원(Single Source of Truth), 읽기 전용 상태(State Is Read-Only), 순수 함수를 통한 변경(Changes Through Pure Functions)을 준수
이러한 설계는 상태 관리(State Management)와 UI 로직(UI Logic)의 분리를 가능하게 하며, 코드의 예측 가능성과 유지보수성을 향상시킨다.
Inglorious Web vs. 기존 프레임워크: 마법의 부재
Inglorious Web은 React, Vue, Svelte와 달리 컴파일러(Compiler)나 프록시(Proxy)를 사용하지 않아 예측 가능한 동작을 보장한다.
React: useEffect의 의존성 배열(Dependency Array) 문제와 컴포넌트 계층 구조(Component Hierarchy)의 비효율성
Vue 3: 반응형 객체(Reactive Object)의 구조 분해(Destructuring) 시 반응성 손실 문제
Svelte: 룬(Runes) 도입으로 컴파일러의 역할 증대 및 코드의 의미 변화
Inglorious Web은 순수한 JavaScript 객체, 이벤트 핸들러, lit-html을 사용하여, 개발자가 코드의 동작을 직관적으로 이해하고 디버깅할 수 있도록 돕는다.
Inglorious Web의 성능 및 테스트 용이성
Inglorious Web은 lit-html의 효율적인 DOM 업데이트를 통해 렌더링 성능을 최적화하고, Mutative 라이브러리를 사용하여 불변성(Immutability)을 유지한다.
lit-html: 변경된 DOM 노드만 업데이트하여 불필요한 렌더링(Unnecessary Rendering) 최소화
Mutative: Immer와 유사한 구조 공유(Structural Sharing) 방식으로 상태 변경 시 성능 저하 방지
테스트 용이성: 순수 함수(Pure Function) 기반의 상태 로직(State Logic)으로 인해, 테스트 코드(Test Code) 작성 간소화
결과적으로 Inglorious Web은 성능과 테스트 용이성 모두를 확보하여, 개발 생산성을 향상시킨다.
Inglorious Web의 생태계 및 향후 전망
Inglorious Web은 아직 초기 단계이지만, Redux, ECS 아키텍처, lit-html 등 검증된 기술을 기반으로 하여 잠재력을 보여준다.
생태계: Vite 플러그인(Vite Plugin)을 통해 Vue, React와 유사한 문법 지원
향후 계획: TodoMVC, config-driven industrial HMI 등 실제 사례(Real-world Example)를 통해 확장성 검증 예정
성능 벤치마크: React(naive, memoized, RTK), Recharts와 비교하여 성능 수치 공개 예정
Inglorious Web은 '마법' 없는 웹 개발을 지향하며, 개발자에게 새로운 선택지를 제시한다.
