애버커스 · 2024.07 - 2025.05

LG전자 CQIS

고객품질 인텔리전스 프론트엔드 리드

화면 및 구조

CQIS dashboard

Vue3TypeScriptVitePiniaChart.jsGlobeJS

LG전자 CQIS에서는 프론트엔드 PL로 참여해 Vue3/TypeScript 기반 공통 프레임워크와 품질 지표 대시보드를 구축했습니다. 개발 생산성과 코드 일관성을 우선으로 구조를 정리했고, 시각화 컴포넌트의 생명주기를 관리해 대시보드 안정성을 개선했습니다.

Vue3/TypeScript 기반 표준 프로젝트 구조와 도메인 기반 폴더 구조를 설계했습니다.

Pinia, Vue Router, Axios 공통 모듈, ESLint/Prettier, Vite 설정을 정리했습니다.

ChartJS와 GlobeJS 초기화, 갱신, 제거 로직을 composable로 공통화했습니다.

PR마다 빌드 테스트와 불필요한 로그 잔존 여부를 확인하며 코드 리뷰를 진행했습니다.

문제

이전 프로젝트 설정을 그대로 가져오며 사용하지 않는 플러그인 충돌과 Vite 배포 경로 문제가 있었고, GlobeJS 객체가 화면 이동 후에도 해제되지 않았습니다.

해결

불필요한 플러그인을 제거하고 Vite 설정을 필요한 항목만 다시 구성했으며, 화면 전환 시 dispose 로직을 실행하도록 정리해 빌드·배포 안정성과 메모리 사용량을 개선했습니다.

프레임워크 범위를 테스트/CI까지 과도하게 넓히기보다 개발 생산성과 코드 일관성 확보에 우선순위를 뒀습니다.

GlobeJS 객체는 화면 이동 시 dispose를 강제해 백그라운드 메모리 잔존을 막았습니다.

PR 리드타임을 약 50% 줄였습니다.

목록형 신규 기능 개발 기간을 5일에서 2일로 단축했습니다.

GlobeJS 메모리 누수와 불필요한 객체 생성을 정리해 메모리 사용량을 약 60% 절감했습니다.

공통 프레임워크는 모든 규칙을 한 번에 넣는 것보다 팀이 바로 쓰는 구조부터 표준화해야 효과적이라는 점을 배웠습니다.

시각화 라이브러리는 컴포넌트 unmount 시점의 정리 로직까지 설계해야 안정적으로 운영됩니다.