# 보고서를 정적 자산으로 로드

## Content



정적 자산은 웹 응용 프로그램이 축소, 다른 리소스와 번들링 또는 캐시 버스팅 같은 변형을 적용하지 않고 처리하는 리소스입니다. 응용 프로그램 코드에서 컴파일된 응용 프로그램의 루트 폴더에 대한 상대 경로를 사용하여 해당 리소스를 참조할 수 있습니다. 일반적인 정적 자산은 이미지와 글꼴입니다.
다음과 같은 경우 정적 자산을 보고서 템플릿에 사용하는 것이 좋습니다. 

* 보고서 템플릿이 자주 변경되지 않는 경우
* 보고서를 로드하기 전에 수정할 필요가 없는 경우 
* 보고서 템플릿에 [런타임 데이터 바인딩](/activereportsjs/docs/v2.2/ReportAuthorGuide/Databinding#runtime-data-binding)이 필요 없는 경우 
* 직접 다운로드하도록 보고서 템플릿을 노출할 수 있는 경우

### Angular 응용 프로그램에서 보고서를 정적 자산으로 로드

Angular 응용 프로그램의 기본 [자산 구성](https://angular.io/guide/workspace-config#asset-config)에서는 ```src/assets``` 폴더를 있는 그대로 출력에 복사합니다. 따라서 보고서 템플릿을 해당 폴더에 복사한 후 [Angular 보고서 뷰어 컴포넌트](Angular-Component)의 ```open``` 메서드에 대한 인수에 상대 보고서 파일 경로를 사용할 수 있습니다.

```js
import { Component, ViewChild } from '@angular/core';
import { ViewerComponent } from '@grapecity/activereports-angular';

@Component({
  selector: "app-root",
  template:
    '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </gc-activereports-viewer></div> ',
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open('assets/report.rdlx-json');
  }
}
```

이 방법의 단계별 지침은 [ActiveReportsJS 보고서 뷰어 Angular 컴포넌트 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart/QuickStart-Angular) 페이지를 참조하십시오.

### React 응용 프로그램에서 보고서를 정적 자산으로 로드

[React 앱 만들기](https://create-react-app.dev/)를 사용하면 개발자가 [정적 자산](https://create-react-app.dev/docs/using-the-public-folder/)을 ```public``` 폴더에 유지할 수 있습니다. 따라서 보고서 템플릿을 해당 폴더에 복사한 후 [React 보고서 뷰어 컴포넌트](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/React-Component)의 ```report``` 속성에 상대 보고서 파일 경로를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

```javascript
import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;
```

이 방법의 단계별 지침은 [ActiveReportsJS 보고서 뷰어 React 컴포넌트 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart/QuickStart-React) 페이지를 참조하십시오.

또는 [viewer.open](@api/classes/reportviewer.viewer.html#open) 메서드를 통해 보고서 템플릿의 URL을 전달할 수 있습니다.

```js
function App() {
  const viewerRef = React.useRef<Viewer>(null);
  React.useEffect(() => {
    const viewerInstance = viewerRef.current.Viewer;
    viewerInstance.open('report.rdlx-json');
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
};
```

이 방법을 사용하는 전체 예제는 [보고서 로드 라이브 데모](/activereportsjs/demos/features/viewer-report-loading/react)를 참조하십시오.

### Vue 응용 프로그램에서 보고서를 정적 자산으로 로드

[Vue CLI](https://cli.vuejs.org/)를 사용하면 개발자가 [정적 자산](https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder)을 ```public``` 폴더에 유지할 수 있습니다. 따라서 보고서 템플릿을 해당 폴더에 복사한 후 [Vue 보고서 뷰어 컴포넌트](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Vue-Component)의 ```report``` 속성에 상대 보고서 파일 경로를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

```html
<template>
  <div id="viewer-host">
    <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";

export default {
  name: "App",
  components: {
    JSViewer: Viewer,
  },
};
</script>
```

이 방법의 단계별 지침은 [ActiveReportsJS 보고서 뷰어 Vue 컴포넌트 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart/QuickStart-Vue) 페이지를 참조하십시오.

또는 [viewer.open](@api/classes/reportviewer.viewer.html#open) 메서드를 통해 보고서 템플릿의 URL을 전달할 수 있습니다.

```html
<template>
  <div id="viewer-host">
    <JSViewer ref="reportViewer"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";


export default {
  name: "App",
  components: {
    JSViewer: Viewer
  },
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    viewer.open('report.rdlx-json');
  }
};
```
이 방법을 사용하는 전체 예제는 [보고서 로드 라이브 데모](/activereportsjs/demos/features/viewer-report-loading/vue)를 참조하십시오.

### JavaScript 응용 프로그램에서 보고서를 정적 자산으로 로드

해당 응용 프로그램에서 보고서 템플릿을 응용 프로그램의 배포 폴더에 복사한 후 [JavaScript 보고서 뷰어 컴포넌트](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/VanillaJS)의 ```open``` 메서드에 대한 인수에 상대 보고서 파일 경로를 사용할 수 있습니다.

```html
<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open("report.rdlx-json");
</script>
```

이 방법의 단계별 지침은 [ActiveReportsJS 보고서 뷰어 JavaScript 컴포넌트 시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart/QuickStart-Vanilla) 페이지를 참조하십시오.