# 지역화

## Content

### ActiveReportsJS 지역화 모듈

ActiveReportsJS에서는 보고서 디자이너 UI 텍스트에 대한 `일본어(ja)`, `중국어(zh)`, `한국어(ko)`, 그리고 `프랑스어(fr)` 번역을 포함한 지역화 모듈을 제공합니다. 이 모듈은 [다운로드 패키지](https://www.mescius.co.kr/activereportsjs/download)의 `dist\locales` 폴더에서 사용할 수 있습니다. 또한 지역화 모듈은 [@mescius/activereportsjs-i18n](https://www.npmjs.com/package/@mescius/activereportsjs-i18n) 패키지와 [CDN](https://cdn.mescius.com/activereportsjs/5.latest/dist/locales/ar-js-locales.js)을 통해 배포됩니다.

### ActiveReportsJS 지역화 모듈 가져오기

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

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

Angular, React 또는 Vue 응용 프로그램은 `@mescius/activereportsjs-localization` 패키지에서 지역화 스크립트를 가져올 수 있습니다. 예를 들어 다음과 같습니다.

```js
import "@mescius/activereportsjs-i18n/dist/designer/ko-locale";
```

### 보고서 디자이너 UI 언어 설정

Angular, Vue, React 및 Svelte 보고 디자이너 컴포넌트에는 UI 언어 속성을포함하는 `DesignerConfig` 객체를 반환하는 함수로 확인(Resolve)해야 하는 `onInit` 속성을 제공합니다.

```js
import React from "react";
import { Designer } from "@mescius/activereportsjs-react";

function onInit() {
  return {
      language: "fr"
  };
}

function App() {
  return (
      <Designer onInit={onInit} />
  );
}
```

순수 JavaScript 응용 프로그램에서, [디자이너 생성자](/activereportsjs/api/classes/ReportDesigner.Designer#constructor)는 두 번째 매개변수로 `DesignerConfig` 객체를 받습니다.

```auto
var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer("#designer-host", { language: "ko" });
```

다양한 응용 프로그램에서 ActiveReportsJS 보고서 디자이너 컴포넌트 통합에 대한 자세한 내용은 [통합](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration) 페이지를 확인하십시오.
순수 JavaScript, Angular, Vue 및 React 응용 프로그램에 대한 전체 샘플은 [라이브 데모](/activereportsjs/demos/features/designer-localization)를 참조하십시오.