# Vite.js(React)에서 ActiveReportsJS 보고서 뷰어 시작하기

## Content

[Vite.js](https://vitejs.dev/)는 최신 프런트 엔드 개발용 빌드 도구로, [네이티브 ES 모듈](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)을 이용하여 개발 환경을 개선하고 고도로 최적화된 프로덕션 빌드를 생성합니다. 이 자습서에서는 Vite.js React 응용 프로그램에서 ActiveReportsJS 보고서 뷰어 컴포넌트를 사용하는 방법을 보여 줍니다.

### **Vite.js React 응용 프로그램 만들기**

새 Vite.js React 응용 프로그램을 만드는 가장 쉬운 방법은 [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) 스캐폴딩 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션으로 응용 프로그램을 만듭니다.

```bash
# npm 6.x
npm init vite@latest arjs-vite-react-app --template react
```

```bash
# npm 7+, extra double-dash is needed
npm init vite@latest arjs-vite-react-app -- --template react
```

yarn을 사용하는 경우:

```bash
yarn create vite arjs-vite-react-app --template react
```

### **ActivereportsJS npm 패키지 설치**

React 보고서 뷰어 컴포넌트는 [@grapecity/activereports-react](https://www.npmjs.com/package/@grapecity/activereports-react) npm 패키지를 통해 배포됩니다. 이 패키지는 핵심 기능이 포함된 기본 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) 패키지를 사용합니다.
이러한 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.

```bash
npm install @grapecity/activereports-react
```

yarn을 사용하는 경우:

```bash
yarn add @grapecity/activereports-react
```

### **Vite.js 구성**

Vite.js React 응용 프로그램에서 ActiveReportsJS를 작동하려면 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;
```

Open the `vite.config.js` file in the root folder of the application and replace its content with the following:

```js
import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import path from "path";

export default defineConfig({
  plugins: [reactRefresh()],
  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"
        ),
      },
    ],
  },
});
```

### **ActiveReportsJS 스타일 가져오기**

`src\App.css` 파일을 열고 파일 내용을 다음 코드로 바꿉니다.
이 코드는 기본 [보고서 뷰어 컴포넌트 스타일](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Themes#built-in-themes)을 가져오고 [React 보고서 뷰어 컴포넌트](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component)를 호스트할 요소의 스타일을 정의합니다.

```css
@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

#viewer-host {
  width: 100%;
  height: 100vh;
}
```

### **응용 프로그램에 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"
      }
    ]
  }
}
```

### **응용 프로그램에 React 보고서 뷰어 컴포넌트 추가**

`src\App.jsx`의 기본 코드를 다음 코드로 바꿉니다.

```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;
```

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

응용 프로그램을 개발 모드로 실행하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.

```bash
npm run dev
```

yarn을 사용하는 경우:

```bash
yarn dev
```

`'vite'가 내부 또는 외부 명령, 실행 가능 프로그램 또는 배치 파일로 인식되지 않았습니다.`라는 오류가 발생하고 명령이 실패하는 경우 `node_modules` 폴더를 삭제하고 `npm install` 또는 `yarn`을 실행하여 필요한 모든 패키지를 다시 설치합니다. 그런 다음 `npm run dev` 또는 `yarn dev`를 다시 실행합니다. 뛰어난 응용 프로그램 빌드 성능과 핫 모듈 재로드 속도를 확인합니다.
응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 `안녕하세요, ActiveReportsJS 뷰어입니다.`라는 텍스트가 포함된 보고서가 표시됩니다. 도구 모음의 버튼을 사용하거나 보고서를 사용 가능한 형식 중 하나로 내보내 기본 기능을 테스트할 수 있습니다.