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

## Content

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

`Svelte` 응용 프로그램을 생성하는 가장 쉬운 방법은 [SvelteKit](https://kit.svelte.dev/) 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 아래 명령어를 실행하세요.

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

기능에 대한 몇 가지 질문이 있으며, 아래에서 추천 답변을 확인할 수 있습니다.

```text
┌  Welcome to the Svelte CLI! 
│
◇  Which template would you like?
│  SvelteKit minimal (barebones scaffolding for your new app)
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  What would you like to add to your project? (use arrow keys/space bar)
│  none
│
◇  Which package manager do you want to install dependencies with?
│  npm
```

명령을 성공적으로 실행하면, Visual Studio Code와 같은 원하는 IDE에서 새로 만든 `arjs-svelte-desinger-app`을 열 수 있습니다.

### ActivereportsJS npm 패키지 설치

MESCIUS는 `@mescius/activereportsjs-svelte` npm 패키지를 통해 Svelte 보고서 디자이너 컴포넌트를 제공합니다. 이 패키지는 컴포넌트의 작동에 필수적인 핵심 기능을 포함하는 기본 `@mescius/activereportsjs`패키지를 기반으로 구축됩니다.
`@mescius/activereportsjs-svelte` 패키지의 최신 버전과 종속성을 설치하기 위해, 응용 프로그램의 루트 디렉터리에서 아래 명령어를 실행하세요.

```bash
npm install @mescius/activereportsjs-svelte@latest
# or if you use yarn
yarn add @mescius/activereportsjs-svelte@latest
```

### 응용 프로그램에 ActiveReportsJS 보고서 추가

ActiveReportsJS는 보고서 템플릿 파일에 `JSON` 형식과 `rdlx-json` 확장명을 사용합니다.
응용 프로그램의 `static` 폴더에 `report.rdlx-json`이라는 새 파일을 만들고 다음 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 '@mescius/activereportsjs/styles/ar-js-ui.css';
    import '@mescius/activereportsjs/styles/ar-js-designer.css';
    import {Designer} from "@mescius/activereportsjs-svelte";
</script>

<div id="viewer-host">
    <Designer= {{ Uri: 'report.rdlx-json' }}></Designer>
</div>

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

### 서버 사이드 렌더링 비활성

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

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

### 응용 프로그램 실행 및 테스트

`yarn run dev` 또는 `npm run dev` 명령어를 사용하여 응용 프로그램을 실행할 수 있습니다. 기본적으로 프로젝트는 [http://localhost:5173/](http://localhost:5173/)에서 실행됩니다.
이 URL을 탐색하며느 ActiveReports 보고서 디자이너는 응용 프로그램의 시작 페이지에 나타나고 보고서 디자인을 표시합니다. 보고서 항목을 추가하고, 속성을 설정하고, 데이터 소스를 생성하는 등의 방식으로 기본 기능을 테스트할 수 있습니다. 보고서 디자아ㅣ너 컴포넌트를 사용하는 더 자세한 방법은 [보고서 디자이너 인터페이스](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface)에서 확인할 수 있습니다. 보고서 디자이너 컴포넌트는 TypeScript 선언과 함께 제공되는 풍부한 [API](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner)를 제공하므로, Svelte 응용 프로그램에서 이것을 쉽게 사용할 수 있습니다.