# ActiveReportsJS 보고서 뷰어 JavaScript 컴포넌트 시작하기
## Content
### JavaScript 응용 프로그램 만들기
이러한 응용 프로그램은 HTML 마크업, CSS 스타일, JavaScript 코드로 구성됩니다. 자주 사용하는 텍스트 편집기에서 ```index.html``` 파일을 만들고 다음 코드를 해당 파일에 삽입할 수 있습니다.
```html
ARJS Report Viewer
```
### ActivereportsJS 설치
CDN 및 NPM을 통해 ActiveReportJS 스크립트와 스타일을 배포합니다. JavaScript 응용 프로그램용 ActiveReportsJS 보고서 뷰어를 가장 쉽게 설치하는 방법은 CDN 기반 참조를 HTML 페이지의 `head` 태그에 추가하는 것입니다. 필요한 스크립트 및 스타일에 대한 자세한 내용은 [설치](/activereportsjs/docs/v2.2/GettingStarted/Installation)를 참조하십시오.
```html
```
### 보고서 뷰어 호스트 요소 추가
보고서 뷰어를 호스트할 `div` 요소를 `body` 태그에 추가합니다.
```html
```
`viewer-host` 요소의 스타일을 `head` 태그에 추가합니다.
```html
```
### ActiveReportsJS 보고서를 응용 프로그램에 추가
ActiveReportsJS는 보고서 템플릿 파일에 [JSON 형식](https://www.json.org/json-en.html) 및 ```rdlx-json``` 확장자를 사용합니다. 응용 프로그램의 루트 폴더에서 ```report.rdlx-json```이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.
```json
{
"Name": "Report",
"Body": {
"ReportItems": [
{
"Type": "textbox",
"Name": "TextBox1",
"Value": "Hello, ActiveReportsJS Viewer",
"Style": {
"FontSize": "18pt"
},
"Width": "8.5in",
"Height": "0.5in"
}
]
}
}
```
### 보고서 뷰어 컴포넌트 초기화
`viewer-host` 요소 바로 뒤의 `body` 태그에 다음 스크립트를 추가하여 요소가 렌더링된 후 이 스크립트가 실행되도록 합니다. 이 코드는 [보고서 뷰어 컴포넌트](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/VanillaJS)의 인스턴스를 초기화하고 이전 단계에서 추가한 보고서 템플릿을 엽니다.
```html
```
### 응용 프로그램 실행 및 테스트
어떤 [정적 웹 서버](https://gist.github.com/willurd/5720255)를 사용해도 응용 프로그램을 실행할 수 있습니다. 예를 들어, [http-server](https://www.npmjs.com/package/http-server) 패키지가 [전역으로 설치](https://docs.npmjs.com/downloading-and-installing-packages-globally)된 경우 응용 프로그램의 루트 폴더에서 ```http-server``` 명령을 실행할 수 있습니다. localhost(또는 127.0.0.1)에서 실행되는 앱을 열어야 합니다. 응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 "안녕하세요, ActiveReportsJS 뷰어입니다"라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.
### 관련 링크
- [라이브 데모](/activereportsjs/demos/features/viewer-integration/purejs)
- [JavaScript 개발자 가이드](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/VanillaJS)