# ActiveReportsJS: 설치 ## Content ActiveReportsJS는 크로스 플랫폼 디자이너 응용 프로그램과 여러 JavaScript 라이브러리로 구성되어 있습니다. 이 페이지에서는 해당 컴포넌트와 각 컴포넌트에 대한 설치 지침을 대략적으로 설명합니다. ### 설치 패키지 [Windows](https://s3.amazonaws.com/hive.host/activereportsjs/release/ActiveReportsJS_2.1_Win.zip), [macOS](https://s3.amazonaws.com/hive.host/activereportsjs/release/ActiveReportsJS_2.1_Mac.zip) 및 [Linux](https://s3.amazonaws.com/hive.host/activereportsjs/release/ActiveReportsJS_2.1_Linux.zip) 설치 패키지를 제공합니다. 사용 중인 운영 체제에 해당하는 패키지를 다운로드하고 보관 파일의 내용을 추출합니다. ### 독립 실행형 보고서 디자이너 응용 프로그램 독립 실행형 보고서 디자이너는 [Electron](https://www.electronjs.org/)으로 빌드된 크로스 플랫폼 데스크톱 응용 프로그램입니다. 독립 실행형 디자이너를 사용하여 보고서를 작성할 수 있습니다. 자세한 내용은 [보고서 작성자 가이드](../ReportAuthorGuide/Get-Started-Get-Started-With-Designer-App)를 참조하십시오. 설치 프로그램은 다운로드한 설치 패키지의 ```designer``` 폴더에 있습니다. 평가 버전은 30일 동안 사용할 수 있습니다. ### 핵심 라이브러리 이 라이브러리는 핵심 기능을 포함하고 있고 응용 프로그램의 코드 내에서 사용할 수 있는 여러 [유형](@api/modules/core.html)을 제공합니다. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```dist``` 폴더에서 찾을 수 있는 ```ar-js-core.js``` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js))를 통해 사용할 수 있습니다. ### Polyfill 라이브러리 이 라이브러리에는 ActiveReportsJS 컴포넌트가 Internet Explorer 11 내에서 작동하도록 하는 데 필요한 보충 코드가 포함되어 있습니다. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 polyfill 라이브러리가 포함된 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```dist``` 폴더에서 찾을 수 있는 ```ie-polyfills.js``` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.grapecity.com/activereportsjs/2.latest/dist/ie-polyfills.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/ie-polyfills.js))를 통해 사용할 수 있습니다. ### PDF 내보내기 라이브러리 이 라이브러리에는 보고서를 PDF 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 [보고서 내보내기](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export) 페이지를 참조하십시오. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 PDF 내보내기 기능이 포함된 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```dist``` 폴더에서 찾을 수 있는 ```ar-js-pdf.js``` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js))를 통해 사용할 수 있습니다. ### XLSX 내보내기 라이브러리 이 라이브러리에는 보고서를 XLSX 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 [보고서 내보내기](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export) 페이지를 참조하십시오. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 XLSX 내보내기 기능이 포함된 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```dist``` 폴더에서 찾을 수 있는 ```ar-js-xlsx.js``` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js))를 통해 사용할 수 있습니다. ### HTML 내보내기 라이브러리 이 라이브러리에는 보고서를 HTML 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 [보고서 내보내기](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export) 페이지를 참조하십시오. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 HTML 내보내기 기능이 포함된 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```dist``` 폴더에서 찾을 수 있는 ```ar-js-html.js``` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js))를 통해 사용할 수 있습니다. ### 보고서 뷰어 라이브러리 이 라이브러리에는 [JavaScript 보고서 뷰어](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Overview) 컴포넌트가 포함되어 있습니다. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 보고서 뷰어 컴포넌트가 포함된 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```dist``` 폴더에서 찾을 수 있는 ```ar-js-viewer.js``` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-viewer.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-viewer.js))를 통해 사용할 수 있습니다. ### 보고서 디자이너 라이브러리 이 라이브러리에는 [JavaScript 보고서 디자이너](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) 컴포넌트가 포함되어 있습니다. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 보고서 디자이너 컴포넌트가 포함된 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```dist``` 폴더에서 찾을 수 있는 ```ar-js-designer.js``` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js))를 통해 사용할 수 있습니다. ### Angular NPM 패키지 이 패키지에는 [Angular 보고서 뷰어](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Angular-Component)와 [Angular 보고서 디자이너](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Angular-Component) 컴포넌트가 포함되어 있습니다. Angular 응용 프로그램에서 사용하려면 [@grapecity/activereports-angular](https://www.npmjs.com/package/@grapecity/activereports-angular) NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오. 기본 자습서를 보려면 [Angular 보고서 뷰어 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart/QuickStart-Angular) 및 [Angular 보고서 디자이너 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Angular) 페이지를 참조하십시오. ### React NPM 패키지 이 패키지에는 [React 보고서 뷰어](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/React-Component)와 [React 보고서 디자이너](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/React-Component) 컴포넌트가 포함되어 있습니다. React 응용 프로그램에서 사용하려면 [@grapecity/activereports-react](https://www.npmjs.com/package/@grapecity/activereports-react) NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오. 기본 자습서를 보려면 [React 보고서 뷰어 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart/QuickStart-React) 및 [React 보고서 디자이너 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-React) 페이지를 참조하십시오. ### Vue NPM 패키지 이 패키지에는 [Vue 보고서 뷰어](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Vue-Component)와 [Vue 보고서 디자이너](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Vue-Component) 컴포넌트가 포함되어 있습니다. Vue 응용 프로그램에서 사용하려면 [@grapecity/activereports-vue](https://www.npmjs.com/package/@grapecity/activereports-vue) NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오. 기본 자습서를 보려면 [Vue 보고서 뷰어 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart/QuickStart-Vue) 및 [Vue 보고서 디자이너 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Vue) 페이지를 참조하십시오. ### 보고서 뷰어 지역화 라이브러리 ActiveReportsJS에는 [보고서 뷰어](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Localization) 사용자 인터페이스의 중국어 및 일본어 번역이 포함되어 있습니다. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 해당 번역이 포함된 [@grapecity/activereports-localization](https://www.npmjs.com/package/@grapecity/activereports-localization) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```dist\locales``` 폴더에서 찾을 수 있는 ```ar-js-locales.js``` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.grapecity.com/activereportsjs/2.latest/dist/locales/ar-js-locales.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/locales/ar-js-locales.js))를 통해 사용할 수 있습니다. ### 보고서 디자이너 지역화 라이브러리 ActiveReportsJS에는 [보고서 디자이너](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Localization) 사용자 인터페이스의 중국어 및 일본어 번역이 포함되어 있습니다. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 해당 번역이 포함된 [@grapecity/activereports-localization](https://www.npmjs.com/package/@grapecity/activereports-localization) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```dist\locales\designer``` 폴더에서 찾을 수 있는 ```ja-locale.js``` 및 ```zh-locale.js``` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 해당 스크립트는 CDN 참조를 통해 사용할 수 있습니다. * [https://cdn.grapecity.com/activereportsjs/2.latest/dist/locales/designer/ja-locale.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/locales/designer/ja-locale.js) * [https://cdn.grapecity.com/activereportsjs/2.latest/dist/locales/designer/zh-locale.js](https://cdn.grapecity.com/activereportsjs/2.latest/dist/locales/designer/zh-locale.js) ### 보고서 뷰어 UI 테마 ActiveReportsJS에는 [보고서 뷰어](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Overview) 컴포넌트를 위한 여러 가지 UI 테마가 포함되어 있습니다. 자세한 내용은 [보고서 뷰어 테마 페이지](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Themes)를 참조하십시오. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 이러한 테마가 포함된 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램은 다운로드한 설치 패키지의 ```styles``` 폴더에서 찾을 수 있는 ```ar-js-ui.css```, ```ar-js-viewer.css```, ```dark-yellow-ui.css```, ```dark-yellow-viewer.css```, ```green-ui.css```, ```green-viewer.css```, ```light-blue-ui.css``` 및 ```light-blue-viewer.css``` 스타일에 대한 참조가 포함될 수 있습니다. 또는 해당 스크립트는 CDN 참조를 통해 사용할 수 있습니다. * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-viewer.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-viewer.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/dark-yellow-ui.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/dark-yellow-ui.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/dark-yellow-viewer.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/dark-yellow-viewer.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/green-ui.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/green-ui.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/green-viewer.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/green-viewer.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/light-blue-ui.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/light-blue-ui.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/light-blue-viewer.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/light-blue-viewer.css) ### 보고서 디자이너 UI 테마 ActiveReportsJS에는 [보고서 디자이너](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) 컴포넌트를 위한 여러 가지 UI 테마가 포함되어 있습니다. 자세한 내용은 [보고서 디자이너 테마 페이지](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Themes)를 참조하십시오. 모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 이러한 테마가 포함된 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) NPM 패키지를 ```package.json``` 파일의 종속성 목록에 추가할 수 있습니다. 순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 ```styles``` 폴더에서 찾을 수 있는 ```ar-js-ui.css```, ```ar-js-designer.css```, ```dark-yellow-ui.css```, ```dark-yellow-designer.css```, ```green-ui.css```, ```green-designer.css```, ```light-blue-ui.css``` 및 ```light-blue-designer.css``` 스타일에 대한 참조가 포함될 수 있습니다. 또는 해당 스크립트는 CDN 참조를 통해 사용할 수 있습니다. * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-designer.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-designer.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/dark-yellow-ui.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/dark-yellow-ui.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/dark-yellow-designer.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/dark-yellow-designer.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/green-ui.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/green-ui.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/green-designer.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/green-designer.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/light-blue-ui.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/light-blue-ui.css) * [https://cdn.grapecity.com/activereportsjs/2.latest/styles/light-blue-designer.css](https://cdn.grapecity.com/activereportsjs/2.latest/styles/light-blue-designer.css)