# Svelte.js 에서 ActiveReportsJS 리포트 디자이너 시작하기

## Content

### **Svelte 응용 프로그램 생성**

`Svelte` 애플리케이션을 만드는 가장 쉬운 방법은 [degit 도구](https://github.com/Rich-Harris/degit)를 사용하고 `Svelte` 템플릿 중 하나를 복제하는 것입니다. 이 튜토리얼에서는 [webpack 템플릿](https://github.com/sveltejs/template-webpack)을 사용합니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 Typescript 및 webpack을 사용하는 새 Svelte 애플리케이션을 만듭니다.

```bash
npx degit sveltejs/template-webpack arjs-viewer-svelte-app
cd arjs-viewer-svelte-app
node scripts\setupTypeScript.js
npm install
# or `yarn` if you use yarn
```

이러한 명령이 성공적으로 실행되면 Visual Studio Code와 같은 즐겨 사용하는 IDE에서 새로 생성된 `arjs-viewer-svelte-app`을 열 수 있습니다.

<br>
### **ActivereportsJS npm 패키지 설치**

`@grapecity/activereports` npm 패키지에는 Svelte 애플리케이션에 통합할 수 있는 *순수* `ActiveReportsJS Report Viewer` 컴포넌트가 포함되어 있습니다.
이 패키지의 최신 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하십시오.

```bash
npm install @grapecity/activereports
# or `yarn add @grapecity/activereports` if you use yarn
```


### **Webpack 5 에서 node code 모듈을 위한 폴리필(Polyfill) 설치**

v5까지 `webpack`은 기본적으로 브라우저에 [node.js 코어 모듈](https://www.w3schools.com/nodejs/ref_modules.asp)의 구현을 제공했습니다.
webpack v5 이상에서는 더 이상 그렇지 않습니다. 따라서 약간의 추가 구성이 필요합니다.
먼저 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 `crypto-browserify` 및 `stream-browserify` 패키지를 설치합니다.

```bash
npm install crypto-browserify stream-browserify
# or `yarn add crypto-browserify stream-browserify` if you use yarn
```

그런 다음 `webpack.config.js` 파일의 `resolve` 객체에 다음 노드를 추가합니다.

```js
 fallback: {
     "crypto": require.resolve("crypto-browserify"),
     "stream": require.resolve("stream-browserify")
 }
```


### **응용 프로그램에 ActiveReportsJS 리포트 추가하기**

ActiveReportsJS는 보고서 템플릿 파일에 `JSON` 형식과 `rdlx-json` 확장자를 사용합니다.
애플리케이션의 'public' 폴더에 'report.rdlx-json'이라는 새 파일을 생성하고 다음 내용을 삽입합니다.

```json
{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt",
          "PaddingLeft": "5pt",
          "PaddingTop": "5pt"          
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```


### **ActiveReportsJS 스타일 설정하기**

`src\global.css` 파일을 열고 그 내용을 [기본 보고서 뷰어 스타일](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Themes#%EA%B8%B0%EB%B3%B8-%EC%A0%9C%EA%B3%B5-%ED%85%8C%EB%A7%88)을 가져오는 다음 코드로 대체합니다.

```css
@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";
```


### **응용 프로그램에 보고서 뷰어 컴포넌트 추가하기**

`src\App.svelte` 파일의 기본 콘텐츠를 다음 코드로 바꿉니다.

```html
<script lang="ts">
    import {Viewer} from "@grapecity/activereports/reportviewer";
    import {PdfExport, HtmlExport, TabularDataExport} from "@grapecity/activereports";
    import { onMount } from 'svelte';
    
    onMount(() => {
        let viewer = new Viewer("#viewer-host");
        viewer.open('report.rdlx-json');
    });
</script>

<div id="viewer-host"></div>

<style>
    #viewer-host {
        width: 100%;
        height: 100vh;
    }
</style>
```


### **응용 프로그램 실행하기**

`yarn run dev` 또는 `npm run dev` 명령을 사용하여 애플리케이션을 실행할 수 있습니다. 기본적으로 프로젝트는 [http://localhost:8080/](http://localhost:8080/)에서 실행됩니다.

이 URL을 탐색하면 ActiveReportsJS 보고서 뷰어가 페이지에 나타납니다. 뷰어는 'Hello, ActiveReportsJS Viewer' 텍스트를 보여주는 보고서를 표시합니다. [보고서 뷰어 사용자 인터페이스](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Viewer-Interface)를 사용하여 기본 기능을 테스트할 수 있습니다.