중단된 프레임워크 단점
- 최신 모듈 기법을 쓰기 어려움.
- 모든 의존 모듈을 한꺼번에 로딩해야 함.
- 필요한 모듈 집합만 로딩하려면 사람이 의존 관계를 다 파악해야 함.
- 유지보수에 비용이 많이 듦.
- vanila JS도 마찬가지로 유지 보수가 어려움.
- 상태 관리 라이브러리를 도입하기 어려워 사이드 이펙트가 많은 경우 흐름 파악이 안됨.
- 오래된 프레임워크의 개발지원이 아예 끊기면 큰 비용을 강제로 지출해야 함.
- 채용에 도움됨.
프레임워크의 장점
- 안정성 확보
- 베스트 프렉티스 개발로 코드 가독성이 올라감.
- 좋은 자료가 많음.
- 컴포넌트 재사용성, 결합성 향상 → 유연성, 확장성
- 라이브러리 크기, 속도 등 성능 향상
- 생산성 도구 도입 용이
- jest, mocha, jasmine
- vue, testing-library
- storybook
- E2E - playwright, cypress
- 괜찮은 서드파티 라이브러리가 많음.
왜 점진적인가?
- 보통은 한두달 잡고 전면 교체를 함.
- 다만 큰 규모의 프로젝트는 1년 이상 서비스를 중단해야 하기 때문에 점진적으로 해야 함.
- 모든 기능과 디자인을 이전과 똑같이 규현해야 함.
- 버그 픽스, 소스관리, 신규 기능 추가 등 똑같은 개발을 두 번 해야할 수 있음.
- 따라서 리스크가 크기 때문에 점진적으로 해야 함.
- 컴포넌트 단위로 분해하고 하나씩 교체해야 함.
- SPA와 마이크로 프런트엔드.
교체 전 필수 준비 사항
- 문서화.
- 서비스 기획서 확보.
- 보통 기능 별로 기획서가 만들어짐.
- QA 테스트 케이스(사용자 액션 기반의 기능 명세) 문서 확보.
- 엣지 케이스도 테스트가 추가됨.
- 가장 중요한 문서!!
- 엑셀 문서가 많음.
- 최신 API 문서 정보.
- 백엔드 개발자가 보통 만듦.
- 화면별, 컴포넌트별 사용하는 API를 사전 파악해두면 좋음.
- 코드를 통한 기능 파악.
- 라이브러리를 커스터마이즈한 경우 필수.
- webpack 등 빌드 환경을 업데이트하거나 변경하는 경우.
- 통합 테스트 유무 확인.
- 가능하다면 테스트 먼저 구축해야 함. 버그를 쉽게 검출할 수 있기 때문.
- 서비스가 클수록 테스트 구축에 시간이 오래 걸림.
- cypress 등의 테스트 자동화 도구 사용하기!
점진적으로 프레임워크 교체하기
- 웹 페이지 구조 결정.
- 마이크로 FE의 앱별 통합 과정 두 가지 (빌드 타임, 런타임)
- SPA를 포기하고 별도의 페이지로 분리.
- SPA를 유지하면서 내부에 iframe 사용.
- SPA를 유지하면서 프레임워크를 통합.
- DOM 내부에 Vue 컴포넌트 추가하는 방법
- Vue Dynamic 컴포넌트 활용법.
- 비동기 로딩으로 성능 늘리기.
- vue에서 import 함수는 promise를 return함.
- 두 프레임워크 간 통신하는 방법.
- Vue의 리액티브 시스템 활용.
- data와 props를 변경.
- 라우터 데이터를 vue에 계속 전달.
- Vuex dispatch, commit 사용.
- vuex-module-decorators (스터어를 모듈로 import하는 방식).
- 이벤트 수신으로 데이터를 받는 여러 방법
- 일반적인 함수 사용.
- 이벤트 버스 사용.
- Vuex subscribe, subscribeAction 사용.
- 컴포넌트 단위로 빠르게 개발하기.
- storybook 활용해서 개발속도 올리기.
프레임워크 교체 전후 비교
성과 측정을 하는 것이 중요함.
- 회귀 테스트.
- 리소스 크기 및 요청수 비교.
- 로딩 성능 비교.
- 로딩 성능 지표
- DCL(DOMContentLoaded) 이벤트 - HTML 파싱 완료 시점.
- L(Load) 이벤트 - 모든 리소스 로딩 완료 시점.
- FMP(First Meaningful Paint) 이벤트 - 화면에 렌더링이 되는 시점(없어짐).
- 최신 지표는 LCP(Lagest Contentful Paint)로 변경됨.