1. AUIPivot 소개 및 사용 방법

1.1 AUIPivot 란?

AUIPivot은 다차원 집계, 그룹화, 교차 분석을 웹에서 제공하는 JavaScript 피벗 컴포넌트입니다. 원본 데이터를 행, 열, 값, 필터로 구성하여 대화형 보고서를 만듭니다.

• 복잡한 보고서나 통계 데이터를 실시간으로 집계/분석
• Excel 피벗 테이블 유사 인터페이스
• 사용자가 직접 드래그로 필드를 구성해 다차원 분석 지원

1.2 지원 브라우저

Chrome	Edge	Firefox	Safari	Opera	Android	iOS
Yes	Yes(IE 모드 지원 안함)	Yes	Yes	Yes	Yes	Yes

1.3 지원 개발 환경

AUIPivot은 순수 JavaScript 컴포넌트로 다양한 프레임워크에서 쉽게 사용할 수 있습니다.

• 순수 JS(Vanilla JS)
• jQuery
• Vue
• React

1.4 AUIPivot 사용 방법

AUIPivot은 독립적으로 실행되는 JavaScript 피벗 컴포넌트입니다. 제공받은 AUIPivotLicense.js, AUIPivot.js, 언어 파일과 CSS를 배치합니다.

아래 예제는 한국어 화면입니다. 언어 파일은 엔진보다 먼저 로드하며, 상대 경로는 실제 설치 위치에 맞춥니다.

<!-- 피벗의 화면 스타일과 이미지 폴더를 함께 배치합니다. -->
<link rel="stylesheet" href="./AUIPivot/AUIPivot_style.css" />
<!-- 사용 권한과 화면 언어를 먼저 설정합니다. -->
<script src="./AUIPivot/AUIPivotLicense.js"></script>
<script src="./AUIPivot/messages/AUIPivot.messages.kr.js"></script>
<!-- 피벗 엔진은 한 번만 로드합니다. -->
<script src="./AUIPivot/AUIPivot.js"></script>

CSS가 참조하는 images 폴더를 함께 배치하세요. 생성은 AUIPivot.create(), 원본 입력은 AUIPivot.setGridData()를 사용합니다. 실제 동작은 Quick Start에서 확인할 수 있습니다.

비상업용 버전의 CDN으로 시작하기

로컬 환경에서 무료로 시작하려면 비상업용 CDN 안내를 참고하세요. 데이터를 포함한 HTML 예제 하나로 피벗 보고서를 실행할 수 있습니다. 라이브러리와 프레임워크 샘플은 비상업용 GitHub 저장소에서도 내려받을 수 있습니다.

localhost, 127.0.0.1 외의 접속 도메인이나 IP에서는 30일 평가판을 제공합니다. 정품과 동일한 기능으로 사전 평가, 적합성 검토(PoC), 테스트에 사용할 수 있습니다. 평가판 사용 안내를 확인하세요.

1.5 폴더 구조

제품 패키지를 압축을 해제하면 다음 디렉토리가 보입니다.

• AUIPivot: AUIPivot 라이브러리와 스타일(css)
• AUIPivot-React: React.js용 서브 컴포넌트
• AUIPivot-Vue: Vue.js용 서브 컴포넌트
• documentation: 공식 문서 (index.html 포함)
• export_server_samples: 서버 내보내기 샘플(PHP, JSP, ASP)
• pdfkit: PDF 출력용 라이브러리
• samples: JavaScript 샘플
• samples-React.js: React JavaScript 샘플
• samples-React.tsx: React TypeScript 샘플
• samples-Vue.js: Vue JavaScript 샘플
• samples-Vue.ts: Vue TypeScript 샘플

1.6 일반 JS 샘플 실행 방법

1. 제품 패키지를 압축 해제한 후 라이선스가 허용하는 웹 서버에 배치합니다. 비상업용 버전은 localhost 또는 127.0.0.1에서 실행합니다.
2. /samples 또는 /documentation 폴더의 index.html을 브라우저로 실행합니다.
3. AUIPivot 샘플 기능을 바로 확인하고 테스트할 수 있습니다.

1.7 Vue, React 샘플 실행 방법

설치와 네 서브 컴포넌트의 사용 예제는 React, Vue 및 TypeScript에서 사용하기를 참고하십시오.

폴더명	프레임워크	빌드 도구	실행 명령어
samples-React.js	React (JSX 기반)	Vite	npm install && npm run dev
samples-Vue.js	Vue 3 (JS 기반)	Vite	npm install && npm run dev
samples-React.tsx	React (TypeScript 기반)	Vite	npm install && npm run dev
samples-Vue.ts	Vue 3 (TypeScript 기반)	Vite	npm install && npm run dev

공통 실행 흐름:

cd [샘플폴더]
npm install
npm run dev