jsp에서 호출할 vue 컴포넌트 모듈 구현

---

내용

현재 jsp에서 vue 리소스를 받아 서빙하는 구조로 프로젝트가 이루어져 있습니다. jsp 댓글 이벤트 페이지에서 vue에서 사용하는 댓글 목록(CommentList) 및 댓글 작성 박스(CommentBox) 컴포넌트를 사용하고 싶어하는 요구사항이 있었습니다.

정리

핵심 성과

1. 레거시 시스템 통합 솔루션 개발

JSP 기반 레거시 시스템에서 Vue 컴포넌트를 재사용할 수 없는 문제가 있었습니다. 이를 해결하기 위해 Vue 컴포넌트를 표준 Web Component로 변환하는 범용 래퍼 시스템을 설계하고 구현했습니다. 그 결과 기존 Vue 컴포넌트를 수정 없이 JSP 환경에서 즉시 사용할 수 있게 되었습니다.

2. 재사용 가능한 변환 프레임워크 구축

createWebComponent 헬퍼 함수를 개발했습니다. Vue 플러그인 자동 주입(Pinia, Router, VueCookies 등)을 지원하며, Main App의 globalProperties를 공유하여 일관된 API를 제공합니다. observedAttributes 기반 반응형 속성 변경 감지를 구현했고, Shadow DOM 옵션도 제어할 수 있습니다. 새로운 컴포넌트를 추가할 때 3줄의 코드만으로 Web Component 변환이 완료되도록 확장성을 확보했습니다.

3. 실제 비즈니스 컴포넌트 적용

CommentAll Web Component를 구현했습니다. 레시피/브랜드스퀘어 댓글 시스템을 JSP에서 사용할 수 있도록 변환했으며, 4개의 동적 속성(type, content-id, comment-id, is-keypad-show)을 지원합니다. JSP 템플릿 엔진과 완벽하게 호환됩니다.

기술적 구현 상세

아키텍처 설계

1. Vue App (SPA)
2. createWebComponent (변환 레이어)
3. Web Component (표준 API)
4. JSP / Legacy System

Vue App (SPA)
    ↓
createWebComponent (변환 레이어)
    ↓
Web Component (표준 API)
    ↓
JSP/Legacy System

핵심 기술 구현

1. 플러그인 생태계 통합

// Main App의 모든 플러그인과 globalProperties를 Web Component에 자동 주입
configureApp(app) {
    plugins.forEach(plugin => app.use(plugin));
    app.use(router);
    app.use(pinia);
    // globalProperties 복사로 $api, $utils 등 전역 메서드 공유
}

2. 반응형 속성 시스템

observedAttributes를 Vue props로 자동 매핑하는 구조를 구현했습니다. kebab-case에서 camelCase로의 자동 변환을 지원하며, 속성 변경 시 컴포넌트가 자동으로 리렌더링됩니다.

3. 타입 안정성 확보

TypeScript 기반 타입 정의(WebComponentOptions)를 적용했습니다. Generic 타입을 지원하여 컴파일 타임에 에러를 방지합니다.

비즈니스 임팩트

개발 생산성 향상

Vue 컴포넌트를 JSP에서 재작성 없이 즉시 사용할 수 있어 코드 재사용률이 높아졌습니다. 새로운 Web Component 추가 시 3줄의 설정 코드만 필요하여 개발 시간이 단축되었으며, 단일 Vue 컴포넌트 수정으로 SPA와 JSP 환경에 동시 반영되어 유지보수 효율이 향상되었습니다.

기술 부채 해소

레거시 JSP 시스템과 모던 Vue 앱 간 기술 격차를 해소했습니다. 점진적 마이그레이션 전략 수립이 가능해졌으며, 표준 Web Components API를 사용하여 프레임워크 독립성을 확보했습니다.

실사용 예시

<!-- JSP에서 Vue 컴포넌트를 HTML 태그처럼 사용 -->
<comment-all type="recipe" content-id="<%= recipeId %>"></comment-all>

품질 보증

테스트 커버리지

7개의 단위 테스트 케이스를 작성했습니다. Web Component 등록/생성/제거, 속성 전달 및 변경 감지, 다중 인스턴스 동시 사용, 동적 생성 시나리오를 검증했습니다. 테스트 도구로는 Jest와 Vue Test Utils를 사용했습니다.

코드 품질

TypeScript 기반으로 타입 안정성을 확보했습니다. JSDoc 주석으로 사용법을 문서화했으며, 에러 핸들링 및 경고 메시지를 구현했습니다.

기술 스택 & 도구

• Frontend: Vue 3 Composition API, TypeScript
• State Management: Pinia
• Routing: Vue Router
• Web Standards: Custom Elements API, Shadow DOM
• Testing: Jest
• Build: Vue CLI

코드 통계

신규 파일 7개, 수정 파일 1개를 작업했습니다. 추가 코드는 +385줄이며, 테스트 코드는 137줄입니다.