MDMS

데이터베이스 속성명 표준화 및 메타데이터 시각화 서비스

프로젝트 개요

데이터베이스의 속성명을 행정안전부 표준 용어를 기반으로 표준화하고, 테이블 간의 연관 관계를 시각적으로 표현하여 데이터 거버넌스를 강화하는 서비스를 개발했습니다.

팀 구성

Frontend: 2명
Backend: 1명
본인 역할: 프로젝트 팀장, 프론트엔드 개발

주요 기능

속성명 표준화: 표준 및 커스텀 용어를 활용해 속성 명 표준화 및 SQL DDL 생성
표준 용어 관리: 표준 용어 검색, 설명 제공, 커스텀 용어 등록 기능 제공
메타데이터 관리: 테이블 메타데이터와 속성 명 설명 제공, 테이블 조회 제공
데이터 맵 생성: 테이블과 용어를 기준으로 데이터 연관 관계 시각화 제공

기술 스택

구분	기술
언어	JavaScript, Java
프레임워크	Vue.js, Spring Boot
라이브러리	amChart5
DB	MariaDB

역할 및 업무

프로젝트 관리 및 발표 준비

팀원을 관리하고 작업을 분배하며 프로젝트 전반을 진행
기업 멘토와 회의 일정 조율 및 회의실 예약 등 프로젝트 관련 일정 관리
팀 프로젝트 경연(1차) 및 4개 대학이 참여한 마지막 발표회(2차)에서 프로젝트 발표를 수행

페이지 설계 및 구현

로그인, 회원가입 등 모든 페이지 레이아웃을 설계하고 개발

표준 용어 기반 테이블 생성 기능 개발

행정안전부 표준 용어 DB 연동으로 검색 및 설명 확인 기능 지원
원하는 표준 용어가 없으면 커스텀 용어 생성 후 테이블 생성 가능
테이블 생성 완료 후 SQL DDL을 제공하고 연동된 DB 서버에 자동 생성 지원

데이터베이스 조회 및 시각화

서버 내 저장된 테이블 정보를 SQL 없이 조회 가능한 페이지 개발
amChart5로 테이블 간 연관 관계를 시각적으로 표현

API 연동 및 데이터 관리

표준 용어 DB 및 커스텀 용어 CRUD 기능을 API 서버와 통신하여 구현
데이터를 효과적으로 관리하며 사용자 요청에 신속히 대응 가능한 구조 설계

차트 라이브러리 그래프 제거 메소드: 메모리 누수 문제 해결

amChart5 dispose() 메소드 호출에도 제거되지 않는 문제를 해결
JavaScript 프로토타입 체인을 활용하여 dispose() 메소드 문제 해결

주요 문제 해결

amChart 라이브러리: 그래프 데이터의 메모리 누수 현상

amCharts5 라이브러리를 활용해 데이터베이스 메타데이터를 시각화하는 과정에서, 기존 차트 객체를 제거하기 위해 dispose() 메소드를 호출했으나 일부 조건에서 해당 메소드가 올바르게 동작하지 않았습니다. 이로 인해 이전에 생성된 차트 객체들이 메모리에 남아있는 문제가 발생하였고, 기존 그래프가 남아있는 문제가 발생하였습니다.

차트 객체 추적 amCharts5가 제공하는 am5.registry.rootElements 배열을 사용하여 현재 생성된 모든 차트 객체를 파악하였습니다.

명시적 제거 그래프 객체 배열을 순회하며, 각 차트 객체에 대해 dispose() 메소드를 명시적으로 호출하는 코드를 추가하였습니다.

if (this.chart) {
  am5.array.each(am5.registry.rootElements, (re, index) => {
    am5.registry.rootElements[index].dispose(); // 각 차트 객체를 명시적으로 제거
  });
}

모든 차트 객체가 제대로 제거됨으로써, 메모리에 불필요하게 남아있는 객체가 없어졌고, 그 결과 메모리 누수 문제가 해결되며 그래프를 확실하게 제거, 재생성할 수 있었습니다.

이 문제를 해결하는 과정에서, 프로토타입 체인을 통해 dispose() 메소드가 상속되는 원리를 이해하고, amCharts5의 객체 관리 방식에 대해 심도 있게 파악할 수 있었습니다. 또한, 차트 라이브러리의 내부 구조와 자바스크립트 메모리 관리 메커니즘에 대한 학습 경험을 쌓는 계기가 되었습니다.

성과

속성명 표준화 및 메타데이터 시각화 구현

표준·커스텀 용어 검색 기능을 통한 속성명 표준화 도구 개발
Vue.js 및 amChart5를 활용한 데이터베이스 메타데이터 관계 시각화 툴 구축

기술 역량 및 학습 성장

데이터베이스 및 메타데이터에 대한 심층적인 이해를 통한 비즈니스 로직 설계 주도
Vue.js 신규 도입 및 활용 능력 강화, 프로젝트 특성에 맞는 기술 선택 역량 확보
자바스크립트 프로토타입 체인을 활용한 dispose() 메소드 도입으로 그래프 메모리 누수 문제 해결

수상 경력

경북 지역 4개 대학교 프로젝트 경연 대회에서 1등 및 최우수상 수상, 프로젝트 성과 인정