# Svelte

## Content

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

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

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

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

```text
┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  none
│
└  Your project is ready!
```

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

### ActivereportsJS npm 패키지 설치

MESCIUS는 npm 패키지를 통해 Svelte 보고서 뷰어 컴포넌트를 제공합니다.`@mescius/activereportsjs-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 Viewer",
        "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-viewer.css';
    import {Viewer} from "@mescius/activereportsjs-svelte";
</script>

<div id="viewer-host">
    <Viewer report = {{ Uri: 'report.rdlx-json' }}></Viewer>
</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/)에서 실행됩니다.
<span style="color: rgb(34, 34, 34); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Font Awesome 5 Free; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 "Hello, ActiveReportsJS Viewer"라는 텍스트가 표시된 보고서가 나타납니다. 이제 </span>[<span style="color: rgb(34, 34, 34); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Font Awesome 5 Free; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">보고서 뷰어 사용자 인터페이스</span>](/activereportsjs/docs/ReportAuthorGuide/Report-Viewer-Interface)<span style="color: rgb(34, 34, 34); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Font Awesome 5 Free; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">를 사용하여 기본 기능을 테스트할 수 있습니다. 보고서 뷰어 컴포넌트는 TypeScript 선언과 함께 제공되는 </span>[<span style="color: rgb(34, 34, 34); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Font Awesome 5 Free; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">rich API</span>](https://developer.mescius.com/activereportsjs/api/classes/ReportViewer.Viewer)<span style="color: rgb(34, 34, 34); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Font Awesome 5 Free; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">를 제공하므로 Svelte 응용 프로그램 내에서 쉽게 사용할 수 있습니다.</span>