프론트엔드
PHP, jQuery 환경에서 Vue.js 2로 점진적 전환하기
두줄요약
PHP·jQuery 레거시를 Vue.js 2로 페이지별 점진 전환한 과정을 소개했습니다.\n빌드 분기, 컴포넌트화, mixins, QA로 전환 리스크를 관리했습니다.
문제 상황
- PHP(Laravel)·Bootstrap·jQuery 기반 단일 프로젝트와 일부 Vue.js 1 데이터 바인딩 구조
- 기능 증가에 따른 복잡성, 프론트엔드 역할 분리와 레거시 축소 요구
- 기존 UI·기능 동일성 유지, 데스크톱·모바일 및 레거시·전환 환경의 동시 관리 부담
선택 이유
- 제한된 개발 리소스에서 React.js·Angular 대비 점진적 전환에 적합한 Vue.js 2 선택
- 신규 개발 소스의 레거시 증가 차단과 데이터 바인딩 코드 전면 리팩토링 목표
해결 방법
- 페이지별 순차 전환·배포, gulp 개선과 webpack 도입으로 레거시·마이그레이션 빌드 분기
- Laravel 템플릿의 HTML/CSS/JavaScript를 .vue 파일로 재작성하고 관심사별 컴포넌트 분리
- jQuery 의존 기능의 Vue.js 2 라이프사이클·API 전환, Vuex 도입과 mixins 기반 데스크톱·모바일 공통 함수 공유
성능/운영 포인트
- 기획서·디자인 가이드 기반 QA와 페이지별 진척 체크 시트 운영
- 80개 이상 페이지 전환 후 코드량 감소, 관심사 분리, 생산성·확장성 및 기능 제공 주기 개선
