2018년 이직한 S회사에서 대시보드 개발을 담당하여 JQuery 라이브러리인 GridStack을 VueJS로 커스터 마이징 한 프로젝트.
회사 요구 사항에 맞게 GridStack의 동작 방식 및 구조를 변경하여 오리지널 라이브러리와는 다르게 동작함.
- 위젯의 배치 알고리즘 변경 > 완전 자율 배치되는 오리지널과 달리 브라우저 해상도에 따라 자동으로 배치되므로 모든 위젯들은 시퀀스를 가지며 이를 기준으로 위젯을 배치한다.
- VueJS 지원 > JQuery 기반의 라이브러리 모듈이므로 VueJS 프로젝트에서 사용할 수 있도록 Vue Wapper 및 Props를 새롭게 작성하였다.
- 화면 / 동작 로직 완전 분리 > 템플릿 영역은 VueJS로 동작 로직은 JQuery로 완전 분리되어 유지보수에 용이하도록 수정하였다.
- 최대한 많은 이벤트 지원 > 위젯의 상태 변경 (추가, 수정, 삭제, 크기 변경, 위치 이동, 개별 위젯 이벤트 등) 및 GridLayout 상태 변경 (위젯 추가, 수정, 삭제, 레이아웃 추가, 수정, 삭제, 초기화, 해상도 변경, 불러오기 등)의 기본 기능이 구현되어 있다.
- 최대화 기능 구현 > VueJS 컴포넌트로 브라우저에 꽉차는 팝업을 생성하여 위젯의 최대화를 지원한다.
현재 다니는 회사의 프로젝트를 기준으로 작업하였으므로 가능하면 범용 사용 래핑 프로젝트인 VueGridStack 모듈을 사용하길 권장한다.
VueGridStack: [https://github.com/kim1124/VueGridStack]