# ActiveReportsJS: 설치

## Content

ActiveReportsJS는 크로스 플랫폼 디자이너 응용 프로그램과 여러 JavaScript 라이브러리로 구성되어 있습니다. 이 페이지에서는 해당 컴포넌트와 각 컴포넌트에 대한 설치 지침을 대략적으로 설명합니다.

### **설치 패키지**

ActiveReportsJS에서는 Windows, Mac, Linux 설치 패키지를 제공합니다. 사용 중인 운영 체제에 해당하는 패키지를 홈페이지에서 다운로드할 수 있습니다.

* [ActiveReportsJS 다운받기](https://www.grapecity.co.kr/download/activereportsjs)

### **독립 실행형 보고서 디자이너 응용 프로그램**

독립 실행형 보고서 디자이너는 [Electron](https://www.electronjs.org/)으로 빌드된 크로스 플랫폼 데스크톱 응용 프로그램입니다. 독립 실행형 디자이너를 사용하여 보고서를 작성할 수 있습니다. 자세한 내용은 [보고서 작성자 가이드](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App)를 참조하십시오.
설치 프로그램은 다운로드한 설치 패키지의 `designer` 폴더에 있습니다.
평가 버전은 30일 동안 사용할 수 있습니다.

### **Core 라이브러리**

이 라이브러리는 핵심 기능을 포함하고 있고 응용 프로그램의 코드 내에서 사용할 수 있는 여러 [유형](@api/modules/core.html)을 제공합니다.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 `dist` 폴더에서 찾을 수 있는 `ar-js-core.js` 스크립트에 대한 참조가 포함될 수 있습니다.
또는 이 스크립트는 CDN 참조([https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js))를 통해 사용할 수 있습니다.

### **PDF 내보내기 라이브러리**

이 라이브러리에는 보고서를 PDF 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 [보고서 내보내기](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export) 페이지를 참조하십시오.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 PDF 내보내기 기능이 포함된 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 `dist` 폴더에서 찾을 수 있는 `ar-js-pdf.js` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js))를 통해 사용할 수 있습니다.

### **HTML 내보내기 라이브러리**

이 라이브러리에는 보고서를 HTML 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 [보고서 내보내기](https://demo.mescius.co.kr/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export) 페이지를 참조하십시오.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 HTML 내보내기 기능이 포함된 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 `dist` 폴더에서 찾을 수 있는 `ar-js-html.js` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js))를 통해 사용할 수 있습니다.

### **표 형식 데이터 내보내기 라이브러리**

이 라이브러리에는 보고서를 표 형식 데이터(CSV) 형식으로 내보낼 수 있는 코드가 포함되어 있습니다. 이 항목에 대한 자세한 내용은 [보고서 내보내기](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export) 페이지를 참조하십시오.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 테이블 형식 데이터 내보내기 기능이 포함된 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 `dist` 폴더에서 찾을 수 있는 `ar-js-tabular-data.js` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js))를 통해 사용할 수 있습니다.

### **보고서 뷰어 라이브러리**

이 라이브러리에는 [JavaScript 보고서 뷰어](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Overview) 컴포넌트가 포함되어 있습니다.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 보고서 뷰어 컴포넌트가 포함된 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 `dist` 폴더에서 찾을 수 있는 `ar-js-viewer.js` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js))를 통해 사용할 수 있습니다.

### **보고서 디자이너 라이브러리**

이 라이브러리에는 [JavaScript 보고서 디자이너](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) 컴포넌트가 포함되어 있습니다.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 보고서 디자이너 컴포넌트가 포함된 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 `dist` 폴더에서 찾을 수 있는 `ar-js-designer.js` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 이 스크립트는 CDN 참조([https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js))를 통해 사용할 수 있습니다.

### **Angular NPM 패키지**

이 패키지에는 [Angular 보고서 뷰어](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component)와 [Angular 보고서 디자이너](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Angular-Component) 컴포넌트가 포함되어 있습니다.
Angular 응용 프로그램에서 사용하려면 [@mescius/activereportsjs-angular](https://www.npmjs.com/package/@mescius/activereportsjs-angular) NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오.
기본 자습서를 보려면 [Angular 보고서 뷰어 시작하기](/activereportsjs/docs/GettingStarted/QuickStart/QuickStart-Angular) 및 [Angular 보고서 디자이너 시작하기](/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Angular) 페이지를 참조하십시오.

### **React NPM 패키지**

이 패키지에는 [React 보고서 뷰어](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component)와 [React 보고서 디자이너](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/React-Component) 컴포넌트가 포함되어 있습니다.
React 응용 프로그램에서 사용하려면 [@mescius/activereportsjs-react](https://www.npmjs.com/package/@mescius/activereportsjs-react) NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오.
기본 자습서를 보려면 [React 보고서 뷰어 시작하기](/activereportsjs/docs/GettingStarted/QuickStart/QuickStart-React) 및 [React 보고서 디자이너 시작하기](/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-React) 페이지를 참조하십시오.

### **Vue NPM 패키지**

이 패키지에는 [Vue 보고서 뷰어](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/Vue-Component)와 [Vue 보고서 디자이너](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Vue-Component) 컴포넌트가 포함되어 있습니다.
Vue 응용 프로그램에서 사용하려면 [@mescius/activereportsjs-vue](https://www.npmjs.com/package/@mescius/activereportsjs-vue) NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오.
기본 자습서를 보려면 [Vue 보고서 뷰어 시작하기](/activereportsjs/docs/GettingStarted/QuickStart/QuickStart-Vue) 및 [Vue 보고서 디자이너 시작하기](/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Vue) 페이지를 참조하십시오.

### **Svelte NPM 패키지**

이 패키지에는 [Svelte 보고서 뷰어](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/svelte-컴포넌트)와 [Svelte 보고서 디자이너](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/svelte-컴포넌트) 컴포넌트가 포함되어 있습니다.
Svelte 응용 프로그램에서 사용하려면 [@mescius/activereportsjs-svelte](https://www.npmjs.com/package/@mescius/activereportsjs-svelte) NPM 패키지를 응용 프로그램의 종속성 목록에 추가하십시오.
기본 자습서를 보려면 [Svelte 보고서 뷰어 시작하기](/activereportsjs/docs/GettingStarted/QuickStart/svelte) 및 [Svelte 보고서 디자이너 시작하기](/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/svelte) 페이지를 참조하십시오.

### **보고서 뷰어 지역화 라이브러리**

ActiveReportsJS에는 [보고서 뷰어](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Localization) 사용자 인터페이스의 중국어, 일본어, 한국어, 네덜란드어, 독일어, 이탈리아어 및 브라질 포르투갈어로 번역이 포함되어 있습니다.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용할 계획이라고 가정해 보겠습니다. 이 경우 해당 번역이 포함된 [@mescius/activereportsjs-i18n](https://www.npmjs.com/package/@mescius/activereportsjs-i18n) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 `dist\locales` 폴더에서 찾을 수 있는 `ar-js-locales.js` 스크립트에 대한 참조가 포함될 수 있습니다.
또는 이 스크립트는 CDN 참조([https://cdn.mescius.com/activereportsjs/5.latest/dist/locales/ar-js-locales.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/locales/ar-js-locales.js))를 통해 사용할 수 있습니다.

### **보고서 디자이너 지역화 라이브러리**

ActiveReportsJS에는 [보고서 디자이너](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Localization) 사용자 인터페이스의 중국어, 한국어 및 일본어 번역이 포함되어 있습니다.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 해당 번역이 포함된 [@mescius/activereportsjs-i18n](https://www.npmjs.com/package/@mescius/activereportsjs-i18n) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 `dist\locales\designer` 폴더에서 찾을 수 있는 `ja-locale.js`, `ko-locale.js` 및 `zh-locale.js` 스크립트에 대한 참조가 포함될 수 있습니다. 또는 해당 스크립트는 CDN 참조를 통해 사용할 수 있습니다.

* [https://cdn.mescius.com/activereportsjs/5.latest/dist/locales/designer/ja-locale.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/locales/designer/ja-locale.js)
* [https://cdn.mescius.com/activereportsjs/5.latest/dist/locales/designer/ko-locale.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/locales/designer/ko-locale.js)
* [https://cdn.mescius.com/activereportsjs/5.latest/dist/locales/designer/zh-locale.js](https://cdn.mescius.com/activereportsjs/5.latest/dist/locales/designer/zh-locale.js)

### **보고서 뷰어 UI 테마**

ActiveReportsJS에는 [보고서 뷰어](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Overview) 컴포넌트를 위한 여러 가지 UI 테마가 포함되어 있습니다. 자세한 내용은 [보고서 뷰어 테마 페이지](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Themes)를 참조하십시오.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 이러한 테마가 포함된 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램은 다운로드한 설치 패키지의 `styles` 폴더에서 찾을 수 있는 `ar-js-ui.css`, `ar-js-viewer.css` 파일에 대한 참조가 포함될 수 있습니다. 또는 해당 스크립트는 CDN 참조를 통해 사용할 수 있습니다.

* [https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css](https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css)
* [https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css](https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css)

### **보고서 디자이너 UI 테마**

ActiveReportsJS에는 [보고서 디자이너](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) 컴포넌트를 위한 여러 가지 UI 테마가 포함되어 있습니다. 자세한 내용은 [보고서 디자이너 테마 페이지](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Themes)를 참조하십시오.
모듈 번들러(예: [webpack](https://webpack.github.io/))를 사용하여 컴파일하는 응용 프로그램에서 ActiveReportsJS를 사용하려고 합니다. 이 경우 이러한 테마가 포함된 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM 패키지를 `package.json` 파일의 종속성 목록에 추가할 수 있습니다.
순수 JavaScript 응용 프로그램에는 다운로드한 설치 패키지의 `styles` 폴더에서 찾을 수 있는 `ar-js-ui.css`, `ar-js-designer.css` 파일에 대한 참조가 포함될 수 있습니다. 또는 해당 스크립트는 CDN 참조를 통해 사용할 수 있습니다.

* [https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css](https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css)
* [https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css](https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css)

## ActiveReportsJS CLI 도구

ActiveReportsJS CLI는 명령줄 유틸리티를 통해 프로젝트 관리 및 유지 관리를 간소화하도록 설계된 개발자 툴킷입니다. 현재 이 도구는 마이그레이션 자동화 기능을 제공하며, 향후 릴리스에서 더 많은 명령이 추가될 예정입니다.
npx를 사용하면 수동 설치 없이 CLI 도구를 실행할 수 있습니다.

```bash
npx @mescius/activereportsjs-cli <command>
```

### 사용 가능한 명령어

#### migrate

`migrate` 명령어는 기존 `@grapecity` 패키지에서 업데이트된 `@mescius` 패키지로의 전환을 자동화합니다. 이는 기존 프로젝트를 최신 버전의 ActiveReportsJS로 업그레이드할 때 특히 유용합니다.
이 명령어를 실행하면 다음과 같은 작업이 수행됩니다.

* **패키지 업데이트**: 기존 `@grapecity` 패키지를 제거하고 해당 `@mescius` 버전을 설치합니다.
* **코드 리팩토링**: 프로젝트 전체에서 가져오기 및 코드 식별자(예: `GC.ActiveReports`를 `MESCIUS.ActiveReportsJS`로 변경)를 자동으로 업데이트합니다.
* **안전 백업**: 변경 사항을 적용하기 전에 수정된 모든 파일의 복사본이 포함된 `mescius-backup` 디렉터리를 생성합니다.

#### help

명령줄 인터페이스(CLI) 또는 특정 명령에 대한 도움말 정보를 표시합니다.

```bash
npx @mescius/activereportsjs-cli help [command]
```

### Options

| 옵션 | 설명 |
| :--- | :--- |
| `-v, --version` | CLI 도구의 현재 버전을 출력합니다. |
| `-h, --help` | 해당 도구 및 명령에 대한 도움말 문서를 표시합니다. |