점진적으로 웹 FE 프레임워크 교체하기

1. 프레임워크 교체 이유

• 지원이 중단된 프레임워크
• 유지보수 비용이 너무나도 많이든다
• angular ver1 사례
• 최신 모듈 기법 미지원
• (번들파일 크기, 모든파일로딩)
• 필요한 모듈의 의존 관계 사림이 직접 파악
• vanillaJS의 경우
• 자체 패턴으로 인해 매번 인수인계해야하는 어려움
• 상태라이브러리 미도입으로 인한 sideEffect 파악의 어려움

• 최신 기술의 도입 필요성
• React, Vue, 등의 도입
• 안정성이 확보된 프레임워크
• best practice, 가독성 좋음
• 생산성향상 및 UI 테스트를 위하여

• 채용의 도움
• 회사입장에서도, 개발자 입장에서도 최신 기술들을 원한다.

2. 왜 점직적인가

리스크란?

• 개발이 끝나고 바로 배포해야함

• 리팩토링 기간 동안 개발을 두 번해야함
• 신규기능 추가, 버그픽스, 소스관리 2set

리스크를 줄이는 방법

• 컴포넌트 단위로 분해하고, 개별 리팩토링

• 서비스별 하나씩 리팩토링

• Monolith FrontEnd → Micro FrontEnd

점진적 교체의 장점

• 리스크가 낮음
• 결과물을 빠르게 확인 가능
• 분산된 교체 비용
• 서비스 무중단 가능

3. 교체 전 필수 준비사할

필수 문서!!

• 서비스 기획서

• Q/A 테스트 케이스 문서 확보

• 최신 API 문서 확보

• 코드를 통한 기능파악

• 통합 테스트 유무 확인

1) 서비스 기획서

모든 기능 명세를 나타내는 기획서 (ex.PPT, ..)

• 서비스 전체 기획서 혹은 기능별 기획서 반드시 필요

2) Q/A 테스트 케이스 문서

최초 개발 시 확인해야할 목록을 사용자 액션 기반으로 명세한 자료 (ex. 주로 excel파일)

• 기획서는 변경이 잦아, 더 소중한 문서

3) 최신 API 문서

• Swagger 등을 통한 전체 API 문서 확인

• API 문서가 최신화 된 것을 반드시 확인해야함

4) 코드를 통한 기능 파악

• 라이브러리를 customize 한 경우 반드시 필요

• 라이브러리의 교체 경우, 기능 검토 필요
• moment → dayjs, date-fns
• boostrap → vuetify

• webpack등 빌드 환경 점검

5) 통합테스트 유무 확인

• 기존 프로젝트에서 테스트가 없다면 반드시 도입 이후에 리팩토링 하는 것을 권장

• Jest 및 testing-library
• testing-library 좋더라. 문서를 통해 도입해보기

• E2E 테스트 - cypress, playwright

4. 점진적으로 프레임워크 교체하기

• 웹 페이지 구조 결정(iframe, SPA in SPA)

• DOM 내부에 Vue 컴포넌트 추가하는 방법

• Vue Dynamic 컴포넌트 활용법

• 비동기 로딩으로 성능 올리기

• 두 프레임워크 간 통신하는 방법
• 컨테이너 앱 => 서브 앱
• 서브 앱 => 컨테이너 앱

• Storybook으로 컴포넌트 단위로 빠르게 개발하기

웹페이지 구조 결정

• SPA 도입 유무 결정
• 장점: 깜빡임현상 해결, 로딩성능저하 해결
• 단점: webpac 비효율, js-css 로드 초기 비용

• SPA 내부 iframe 사용
• 프레임간 통신 방법 제약이 크다
• 라우팅 처리 까다로움

• SPA 내부 프레임워크 2가지 통합
• 장점: 특정 영역만을 Vue로 전환하기 용이, 두 프레임워크 간 데이터 공유가 쉬움
• 단점: CSS 충돌 가능성, 라우터 관리를 부모에서만 가능하도록 처리

DOM 내부에서 일부만 Vue컴포넌트로 대체하기

• 빨간 부분의 컴포넌트만 Vue로 교체 (나머지 뼈대는 angular)

• 비동기 컴포넌트

화면에 렌더링되는 JS 파일만 다운로드 하도록 함

• ex. 주소록 nav 탭을 눌렀을 경우에, 해당하는 js파일들을 다운로드 하도록 함
• 초기로딩속도 향상 효과!
• Vue 예제코드
code 보기

const app = Vue.createApp({...});

// 컴포넌트 전역 등록
app.component('my-component', () => import('./my-component'));

// 컴포넌트 지역 등록
Vue.createApp({
  components: {
    'my-component': () => import('./my-async-component')
  }
});

두 프레임워크 간 통신 방법

• 데이터 전달 컨테이너 앱(angular) ⇒ 서브앱(vue)

• 이벤트 수신 서브 앱(vue) → 컨테이너 앱(angular)

데이터 전달

• Vue의 리액티브 시스템
• 데이터가 바뀌면 뷰가 바뀐다
• props로 데이터를 내려준다
• watch, computed, methods 사용 가능
• 사례
• router값 변경 시 변경된 router 값을 container(angular)에서 vue로 넘겨준다.
• vue에서는 전달된 값을 받아 추가 동작을 실행한다.
 

• Vuex dispatch, commit 사용
• store 자체를 Import 하여, store를 기준으로 연결한다.
• 장점 : vue의 리액티브 시스템은, Vue 인스턴스가 계속 보관해야하는 번거러움있지만, 이 방식은 store만 바라보면 된다는 장점

• [new] 스토어를 모듈로 import 사용하는 방식
• vuex-module-decorators 를 활용
• 초기 러닝커브 있으나, 코드 가독성, 타입스크립트의 타입추론, 상수 비사용등으로 얻는 효과가 더 크다

데이터 수신

• 서브앱(vue) ⇒ 컨테이너 앱(angular)

• 1번. 일반함수 사용
• 컨테이너에서 핸들러 함수를 만들고, 서브앱에서 해당 함수를 import 하여 사용하여 데이터 전달

• 2번. 이벤트 버스 사용
• ex. 컨테이너에서 띄운 모달을 서브앱에서 닫는 방법

• 3번. Vuex subscribe, subscribeAction 사용
• 외부앱과 서브앱의 연결성을 최소화 하는 장점으로 자주 사용
코드

• 컨테이너 router.js

export function updateRouter(state, title, url) {
  window.history.pushState(state, title, url);
}

export function onActionDispatchListener({type, payload}) {
  if (type === 'contact/changePath') {
    const { state, title, url } = payload;
    updateRouter(state, title, url);
  }
}

• 서브앱

import { onActionDispatchListener } from '@src/container/router';

// 서브 앱에서 액션 리스너 등록
store.subscribeAction(
  onActionDispatchListener
);

export default {
  methods: {
    onClick(url) {
      this.$store.dispatch('contact/changePath', {
        state,
        title,
        url
      });
    }
  }
}

• 주의 라우터 처리는 컨테이너 앱 한 곳에서만 하는 것이 유리!

5. 프레임워크 교체 전후 비교 (성능비교, 테스트)

성과 측정이 반드시 필요, 느낌으로 성능을 대변할 수 없다.

• 일 잘하는 것 === 측정가능한 단위의 일을 하는 것
• 즉 교체 작업 전, 미리 기존 프로젝트의 성능을 측정해두어야 함

• 기존 기능의 문제는 어떠한 지 파악하기

• 리소스 크기 비교
• vue를 추가했음에도 크기 변화 거의 없다

• 로딩 성능 지표
• • DCL(DOMContentLoaded) 이벤트 – HTML 파싱 완료 시점
• SPA에서는 js로 렌더하기 때문에 중요하지는 않음
• • L(Load) 이벤트 – 모든 리소스 로딩 완료 시점
• FMP (First Meaningful Paint) 이벤트 – 화면에 렌더링이 되는 시점
• 최신 지표는 LCP(Largest Contentful Paint)로 변경됨

• 전후 로딩성능 비교
• 성능지표 FMP가 빨라졌다
• 개선 이유 파악
 

질의응답

Q1. 점진적으로 프레임워크를 교체해야한다고 하셨는데 예를 들어 리액트를 뷰로 바꾼다고 했을 때는 어떻게 하나요? 두 체제의 코딩 스타일이나 사용하는 라이브러리 자체가 다른데 일부만 바꿔서 점진적으로 바꿀 수 없지 않나요?

• react가 컨테이너 vue가 내부 앱이라면, 연결 포인트만이 중요하다
• 즉 react의 useRef로 DOM Element를 접근할 수 있다.
• Vue는 DOM Element에 인스턴스를 로드한다.
• 즉 react에서 useRef로 특정 DOM을 Vue로 넘겨주면 해결

Q2. E2E 테스트의 bestPractice를 잘 찾지 못하겠는데, 관련 자료나 팁이 있을까요>?

• 공식문서를 활용하는 것이 가장 좋다

• 하나의 테스트에서는 하나의 목적만 검증하는 것이 좋다
• E2E지만 하나의 관심사에 대해서 테스트 하는 것이 좋다.
• 일련의 이전 목킹 코드들은 함수로 만들어서 호출하는 방식 사용

Q3. iframe이 어떻게 처리하는 방식일까요?

• 페이지안의 페이지를 삽입하는 기술
• ex. 모바일 청첩장 안의 네이버 지도 모듈

• 완전히 독립적인 페이지를 넣는 기술
• 메모리 및 라우터 등 모든 것이 따로 동작

Q4. 두 프레임워크가 공존되면 빌드는 어떤식으로 되는건가요?

• webpack으로 build 도구를 통일 한 후 진행
• entry point만 잘 지정하면 js 파일의 import 방식이기 때문에 문제없이 가능