# 지역화

## Content

### ActiveReportsJS 지역화 모듈

ActiveReportsJS에서는 영어(en), 일본어(ja), 중국어(zh), 한국어(ko), 네덜란드어<span style="color: rgb(58, 70, 82); font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif; 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;">(nl), 이탈리아어(it), 브라질 포르투갈어(pt-br), 독일어(de), 그리고 프랑스어(fr)</span>로 번역된 보고서 뷰어 UI 텍스트가 포함된 지역화 모듈을 제공합니다. 이 모듈은 [다운로드 패키지](https://www.mescius.co.kr/activereportsjs/download)의 `dist\locales` 폴더에서 사용할 수 있습니다. 또한 지역화 모듈은 [@mescius/activereportsjs-i18n](https://www.npmjs.com/package/@mescius/activereportsjs-i18n) 패키지 내에서 배포됩니다.

### 보고서 뷰어 지역화 모듈 가져오기

순수 JavaScript 응용 프로그램에서 지역화 모듈 스크립트는 `script` 태그로 참조할 수 있습니다. 예를 들어 다음과 같습니다.

```html
<script type="text/javascript" src="https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/ar-js-locales.js"></script>
```

JavaScript 모듈을 사용하는 응용 프로그램에서 `@mescius/activereportsjs-i18n` 패키지에서 현지화 모듈을 가져올 수 있습니다. 예를 들어 다음과 같습니다.

```js
import "@mescius/activereportsjs-i18n";
```

### 보고서 뷰어 UI 언어 설정

순수 JavaScript 응용 프로그램에서 `MESCIUS.ActiveReportsJS.ReportViewer.Viewer` 생성자는 생성자는 두 번째 매개변수로 옵션을 허용하고 이러한 옵션을 사용하여 UI 언어를 설정할 수 있습니다. 예를 들어 다음과 같습니다.

```js
var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", { language: "ko" });
```

응용 프로그램에서 React, Angular, Svelte 또는 Vue 보고서 뷰어 컴포넌트를 사용 중이라고 가정합니다. 이 경우 해당 컴포넌트의 `language` 속성을 통해 언어를 설정할 수 있습니다. 예를 들어 다음은 React 뷰어 컴포넌트에 대해 한국어를 설정하는 코드입니다.

```javascript
import { Viewer as ReportViewer } from "@mescius/activereportsjs-react";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";
import "@mescius/activereportsjs-i18n";

function App() {
  return (
    <div className="App">
      <div id="viewer-host">
        <ReportViewer language="zh" />
      </div>
    </div>
  );
}
```

### 관련 링크

* [라이브 데모](/activereportsjs/demos/features/viewer-localization)