AG-GRID 소개

1. AG-GRID 소개

자바스크립트 기반의 오픈 소스 그리드로 무료와 상용버전을 제공합니다.

무료만으로도 많은 기능을 제공하며 상용도 비싸지 않으니 그리드를 도입하려고 한다면 충분히 고려해볼 만한 제품입니다.  

홈페이지 : https://www.ag-grid.com/

데모 화면 

커뮤니티 버전에서 엔터프라이즈로 전환하고자 한다면 라이브러리만 교체하면 바로 적용이 됩니다. 

개발자 수로 라이센스를 결정하는데 하나의 도메인에서 사용한다면 개발자당 $750입니다. 

여러 애플리케이션을 개발한다면 $1200달러를 추천합니다. 

유로 버전의 경우 피봇 기능, AGGREGATION 기능 등을 제공하는데 일단 써보고 필요 시 전환하면 좋을 거 같습니다. 

 

레퍼런스를 보면 엔터프라이즈는 기능 옆에 빨간색 e가 붙는 것을 볼 수 있습니다.  

레퍼런스에는 자세한 설명과 더불어 바로 확인해 볼 수 있는 샘픔을 제공하며 상단에 Code 탭을 클릭하면 코드도 확인 가능합니다. 

설명이 좀 난해하다고 생각되면 샘플과 코드를 보면 이해에 도움이 됩니다.  

코드 선택시 보여 지는 화면. 

2. Pros  and cons

장점

무료지만 막강한 기능 제공을 하며 상용버전도 저렴합니다. 

자바스크립트 기반으로 어떤 플랫폼에서도 사용이 가능합니다. 

설치가 쉽습니다.. 라이브러리 하나만 코드안에 넣으면 설치는 끝입니다. 무료에서 상용 전환시 라이브러리만 바꾸면 정상 작동합니다.  

사용이 쉽습니다. 초급 개발자라도 몇가지 기능을 배우고 나면 쉽게 사용할 수 있습니다.

자세한 레퍼런스와 샘플, 코드들을 제공합니다. 

확장성이 좋습니다. 사용하는 개발자의 역량에 따라 서비스에 맞는 컴포넌트 등을 추가 개발하여 이용하기 쉽습니다. 

단점 

그리드만 제공합니다. 보통 "그리드 뭐 씁니다" 이러면 다양한 차트와 그래프에 대해 질문을 하는데 오직 그리드만 제공합니다. 차트와 그래프는 적당한걸 찾아서 별도로 이용해야 합니다. 

한글 가이드문서가 없습니다. 오직 영어뿐이라 처음에는 보기 힘든데 어려운 영어가 많지 않고 다양한 샘플과 코드가 함께 있기 때문에 큰 문제는 없을거라고 생각합니다. 

참고 레퍼런스의 부족 : 구글 또는 네이버에서 검색 시 검색 결과가 많지 않습니다. 오직 ag-grid에서 제공하는 문서에 의존할 수 밖에 없습니다. 개발자 커뮤니티가 활성화 되어 있지 않다 보니 이슈 발생 시 도움 받을 곳이 거의 없습니다. 

3. 프로젝트 도입 및 후기 

그리드의 필요성 대두 

"상단 메뉴는 고정 시켜 주시고 하단 데이터는 그 부분만 스크롤 되게 해주세요."

"상단 데이터 또는 하단에 합계를 보여 주는 부분을 고정 시켜 주세요."

"엑셀 처럼 두개의 필드는 고정 시켜 주고 나머지는 스크롤 안되나요?"

"헤더 누르면 정렬 되어야 하는 거 아닌가요?"

"필드 위치를 마우스로 바꿀 수 없나요?"

기존에 그리드 쓰던 사람들이 써본 경험이 많은지라 요구사항이 엄청납니다. 

그리드를 쓸 수 밖에 없는 상황이 되었습니다. 

기존 그리드의 문제점 

기존에 다른 서비스에서 사용하던 그리드는 문제점이 첫번째 너무 비쌌습니다. core당 400만원인데 8 core면 3200만원입니다. 만약 서버를 여러대 쓰게 되면 라이센스 비용이 장난이 아니게 됩니다. 두번째 문제점은 Active-x 기반이라 윈도우에서만 사용이 가능했습니다. 서버에도 몇가지 설치를 해줘야 하고 사용자도 윈도우 환경에서만 사용이 가능한데 엄청 불편했습니다. 

그리드 검토 

새로운 프로젝트를 수행하는데 엄청난 서비스가 아니라서 간단하고 저렴한 그리드를 찾게 되었습니다. 

검토 조건 

1. 무료 또는 저렴할것

2. Active-x 설치 절대 안됨 

3. 사용이 쉬울 것 

세가지 조건으로 검토를 했고 그러다 발견한 것이 ag-grid였습니다. 

데모와 샘플을 보고 "와 우리가 찾던거다" 싶었습니다. 

Document를 보니 금방 사라질 제품도 아니고 꾸준히 업데이트가 되는 것을 보고 결정하게 되었습니다.  

사용후기 

써보고 아니다 싶으면 바로 다른 그리드로 바꿔야지 했는데 의외로 사용도 쉽고 괜찮았습니다.  

사용하는데 문제점은 참고 레퍼런스가 거의 없고 스스로 문서를 찾아 보고 해결해야 한다는 것입니다. 

이 문제는 그리드가 아닌 모든 오픈소스, 제품에 해당하는 문제라고 생각합니다. 문제에 봉착했을 때 해결하거나 다른 방법으로 우회할 수 있는 능력이 어느 정도 있어야 도입을 할 수 있다고 생각합니다. 쉽게 포기하지 마세요. 

개발을 하다가 모르는 기능을 알게 되어 기존에 삽질하던 소스를 다시 고치는 작업을 초기에 많이 했습니다.

초.중급 개발자들이 개발하는데 큰 문제는 없었습니다. 고급 개발자 한명 정도는 꾸준히 코드 리뷰를 하면서 전체적인 퀄리티를 맞춰주면 좋을 거같습니다. 

새롭게 그리드를 도입하고자 한다면 AG-GRID 추천드립니다.

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID 설치 및 기본구조

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID 칼럼 정의

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID GRID OPTIONS 정의

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID 기본 예제

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID cellRenderer 예제

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID Data 선택 이벤트 처리 예제

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID 필터와 정렬 예제

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID 추가/수정/삭제 예제

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID Datepicker 예제

2019/01/30 - [UI(Front-End)/ag-grid] - AG-GRID 칼럼 동적 HIDE/SHOW 예제

Github 링크

https://github.com/kkaok/examples