GoJS는 인터랙티브한 다이어그램을 구현할 수 있는 오픈 소스 JavaScript 라이브러리입니다. 웹 페이지에 다이어그램이나 그래프를 추가하고 싶다면 이 라이브러리가 훌륭한 선택이 될 수 있습니다. 이 글에서는 GoJS 사용의 핵심 개념과 기본적인 활용 방법을 소개합니다.
GoJS의 모델-뷰(Model-View) 아키텍처
GoJS는 모델-뷰 아키텍처를 기반으로 동작합니다. 모델(Model)은 노드와 링크를 설명하는 JavaScript 객체 배열을 보관하며, 다이어그램(Diagram)은 뷰(View) 역할을 하여 이 데이터를 실제 Node와 Link 객체로 시각화합니다.
GoJS로 다이어그램을 생성하면 지정된 DIV 요소 내부에 HTML5 Canvas 요소가 자동으로 생성되어 배치됩니다. 덕분에 별도의 복잡한 설정 없이도 브라우저에서 바로 다이어그램을 렌더링할 수 있습니다.
다이어그램 그리기 시작하기
GoJS를 사용하려면 먼저 HTML 문서에 라이브러리를 선언하고 로드해야 합니다. GoJS 라이브러리 파일인 go.js를 로드하는 것이 첫 번째 단계입니다.
라이브러리는 CDNJS에서 제공하는 링크를 통해 추가할 수 있으며, 원한다면 GoJS 라이브러리 파일을 직접 다운로드해서 사용하는 방법도 가능합니다.
CDNJS를 통한 라이브러리 추가
CDNJS를 이용해 GoJS를 추가하는 방법은 다음과 같습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.20/go-debug.js"></script>
참고: 개발 단계에서는 런타임 오류 검사를 위해 go-debug.js를 로드하는 것이 좋습니다. 반면 실제 배포 시에는 오류 검사 기능이 제외된 "go.js"를 사용하는 것이 성능 면에서 유리합니다.