LMS 플랫폼 고도화(하이러닝·뉴쎔), 2022.07 ~ 2024.07 설계와 구현
jQuery 화면을 전면 재작성 없이 Vue 컴포넌트 구조로 전환하고 응답 규격 통일
빌드 체계가 없는 환경에서 JSP 화면에 Vue 컴포넌트를 마운트하는 방식으로 전환하고, JSP로 필드마다 매핑하던 응답을 공통 응답 객체의 JSON으로 바꿈
문제와 배경
- 기존 화면은 jQuery와 콜백 방식 ajax로 만들어져 있었습니다.
- 2023년 5월에 리뉴얼을 시작해, 9월에 구버전을 함께 운영하지 않고 새 화면으로 오픈해야 했습니다.
- npm 빌드와 배포 체계가 없었습니다.
- 기존 API는 api JSP가 응답 필드를 하나씩 매핑해 JSON을 만들었고, API마다 응답 형식이 달랐습니다.
결과
- 전면 SPA 재작성 없이 Vue 컴포넌트 구조로 전환해 2023년 9월에 오픈했습니다.
- 같은 레이아웃과 공통 컴포넌트 위에서 팀이 같은 방식으로 화면을 만들었습니다. 저장소 기준으로 새 화면 구조에서 Vue를 마운트하는 페이지 JS가 133개입니다.
- 공통 응답 객체의 JSON 응답을 팀 API에 적용했습니다. 저장소 기준으로 컨트롤러 45개 파일이 이 형식을 씁니다.
설계와 구현
전환 방식 선택
- 전환 방침은 팀 회의로 정했고, 전환 리드로서 최종 선택을 했습니다.
| 기준 | 검토한 방식: SPA 전면 재작성 | 선택한 방식: JSP 화면에 Vue 마운트 |
|---|---|---|
| 빌드와 배포 | npm 빌드와 배포 체계를 새로 만들어야 함 | <script> 태그로 라이브러리를 불러와 기존 배포 그대로 |
| 라우팅과 세션 | 클라이언트 라우팅과 세션 처리를 다시 구성 | 서버가 view name으로 페이지를 돌려주는 흐름 유지 |
| 다시 만들 범위 | 전체 화면 | 페이지별 body JSP와 페이지 JS |
- Tiles를 Vue와 함께 새로 도입했습니다. Tiles는 head, GNB, footer 같은 공통 JSP 조각과 페이지별 body JSP를 하나의 레이아웃으로 조립하는 JSP 템플릿 프레임워크입니다.
- 레이아웃의 head에서 Vue, 공통 통신 함수, 공통 컴포넌트를 한 번 불러오고, 페이지마다 body JSP만 둡니다. 웹과 모바일은 레이아웃을 따로 두었습니다.
- 화면 데이터는 서버가 채우지 않습니다. GNB, body, footer 모두 JSP에 Vue 템플릿을 두고 브라우저에서 마운트합니다. body는 페이지 JS가 Vue를 마운트한 뒤 API로 받은 데이터로 그립니다.
공통 응답 규격
- 기존 API는 컨트롤러가 Model에 값을 담으면, api JSP가 JSON 태그 라이브러리로 응답 필드를 하나씩 매핑해 내려보냈습니다. 화면에 필요한 값이 늘면 JSP의 매핑도 함께 고쳐야 했습니다.
- 백엔드와 협의해, 컨트롤러가 공통 응답 객체(code, message, result)를 그대로 JSON으로 돌려주게 바꿨습니다. 화면은 받은 값 가운데 필요한 것을 골라 씁니다.
공통 통신 함수와 공통 컴포넌트
- axios 기반 공통 통신 함수를 만들었습니다. GET, POST, DELETE, multipart 요청마다 공통 함수를 두고, 함수 안에서 입력값을 검사합니다. 통신이 실패하면 공통 오류 객체로 바꿔 error 콜백에 넘겼습니다.
- modal, select, tab을 웹과 모바일 공통 컴포넌트로 만들어 전역 등록하고, 새 화면에서 재사용하게 했습니다.