# Svelte.js 애플리케이션에서 ActiveReportsJS 보고서 디자이너 시작하기

## Content

### Svelte 애플리케이션 만들기

Svelte 애플리케이션을 만드는 가장 쉬운 방법은 [SvelteKit](https://kit.svelte.dev/) 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행합니다.

```bash
npm create svelte@latest arjs-svelte-designer-app
```

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

### ActivereportsJS npm 패키지 설치

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

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

### Vite.js 구성

Svelte는 `Vite.js`개발 모드에서 애플리케이션을 실행하고 프로덕션용으로 빌드하기 위해 내부적으로 사용합니다. ActiveReportsJS가 Vite.js와 함께 작동하도록 하려면 Vite.js 구성을 조정해야 합니다. `alias.js`애플리케이션의 루트에서 호출되는 새 파일을 만들고 다음 코드를 추가합니다.

```js
import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;
```

그런 다음 응용 프로그램의 루트 폴더에서 를 열고 `vite.config.js file`내용을 다음으로 바꿉니다.

```js
import { sveltekit } from '@sveltejs/kit/vite';
import path from "path";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  resolve: {
    alias: [
      {
        find: /^moment$/,
        replacement: path.resolve(__dirname, "./alias.js"),
      },
      {
        find: /^gc-dv$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
        ),
      },
      {
        find: /^\@grapecity\/ar-js-pagereport$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
        ),
      },
      {
        find: /^barcodejs$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
        ),
      },
    ],
  },
};
export default config;
```

### 애플리케이션에 ActiveReportsJS 보고서 추가

ActiveReportsJS는 보고서 템플릿 파일의 `JSON`형식과 확장자를 사용합니다.`rdlx-json`
`static`응용 프로그램의 폴더 에서 라는 새 파일을 만들고 `report.rdlx-json`다음 내용을 삽입하십시오.

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

### 애플리케이션에 보고서 디자이너 구성 요소 추가

파일 의 기본 내용을 `src\routes\+page.svelte`다음 코드로 바꿉니다.

```html
<script lang="ts">
    import "@grapecity/activereports/styles/ar-js-ui.css";
    import "@grapecity/activereports/styles/ar-js-designer.css";    
    import {Designer} from "@grapecity/activereports/reportdesigner";
    import { onMount } from 'svelte';
   
    onMount(() => {
        let designer = new Designer("#designer-host");
        designer.setReport({id: "report.rdlx-json"});
    });
</script>

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

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

### 서버 측 렌더링 비활성화

기본적으로 SvelteKit은 서버에서 먼저 모든 페이지를 렌더링하고 클라이언트에 HTML로 보냅니다. 그러나 ActiveReportsJS는 클라이언트 측에서만 작동할 수 있습니다. 따라서 보고서 뷰어가 포함된 페이지에 대한 서버측 렌더링을 비활성화해야 합니다. `+page.js`다음 내용이 포함된 파일 을`+page.svelte`

```js
export const prerender = false;
export const ssr = false;
```

### 애플리케이션 실행 및 테스트

`yarn run dev`또는 명령을 사용하여 응용 프로그램을 실행할 수 있습니다 `npm run dev`. 기본적으로 프로젝트는 [http://localhost:5173/](http://localhost:5173/) 에서 실행됩니다 . 이 URL을 탐색하면 ActiveReportsJS, ActiveReportsJS 보고서 디자이너가 응용 프로그램의 시작 페이지에 나타나고 보고서 디자인이 표시됩니다. 보고서 항목 추가, 해당 속성 설정, 데이터 소스 생성 등을 통해 기본 기능을 테스트할 수 있습니다. 보고서 디자이너 구성 요소를 사용하는 방법에 대한 자세한 내용은 [보고서 디자이너 인터페이스](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Designer-Interface) 페이지를 참조하십시오 . 보고서 디자이너 구성 요소는 TypeScript 선언과 함께 제공되는 풍부한 [API를](https://demo.grapecity.co.kr/activereportsjs/api/modules/ReportDesigner) 노출하므로 Svelte 애플리케이션 내에서 쉽게 사용할 수 있습니다.