! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

다국어 리소스 적용하기 - 디자이너 컴포넌트 > 온라인 스터디

본문 바로가기

디자이너컴포넌트 다국어 리소스 적용하기 - 디자이너 컴포넌트

페이지 정보

작성자 GCK루카스 작성일 2022-07-28 16:37 조회 555회 댓글 0건

본문

국내 기업과 솔루션의 해외 진출이 많아지면서, 각 나라의 언어(외국어)에 맞추어 Excel(엑셀) 에디터를 제공하여 여러 나라의 직원들이 유기적으로 일할 수 있는 엑셀(Excel) 기반의 시스템을 구현하자 요구가 많아 지고 있습니다.

이러한 요구 사항에 맞추어 GrapeCity에서는 개발자 분들이 조금이라도 쉽고 빠르게 웹 상에 Excel(엑셀) 스프레드시트의 UI와 엑셀 기능들을 구현할 수 있는 컨트롤과 함수를 제공하는 SpreadJS를 제공하고 있으며, 또한, 완전한 Excel 에디터 기능을 원하시 분들을 위해, SpreadJS를 기반으로 하는 SpreadJS 디자이너 컴포넌트를 제공하고 있습니다.

추가적으로 영어, 한국어, 중국어, 일본어의 다양한 언어 리소스(라이브러리)를 제공하여, 필요한 언어(외국어)에 맞추어 웹 Excel(엑셀) 화면과 기능을 개발하실 수 있도록 도움을 드리고 있습니다.


이번 글에서는 구글 시트(Google Sheet) 또는 MS Office 365와 같이 웹 엑셀 에티터를 개발하실 때 가장 많이 사용하시는 SpreadJS의 디자이너 컴포넌트(Excel 에디터)를 커스터마이징하여, 여러 언어 리소스를 동시에 불러와 적용하는 방법을 소개합니다.


해당 내용들을 참고하여 디자이너 컴포넌트에 외국어 언어 패치를 통해 다국어 지원이 되는 웹 엑셀 에디터를 구현해 보실 수 있습니다. 

* 디자이너 컴포넌트에 대한 더 많은 자료는 여기를 확인하실 수 있습니다. 


아래 화면은 실제 디자이너 컴포넌트로 구현된 화면입니다.

상단의 HTML / JS 탭을 통해 소스코드를 확인하고 바로 수정해 결과를 확인해볼 수 있습니다.


 


SpreadJS 디자이너 컴포넌트 언어 리소스

제공 언어 리소스


언어 리소스는 영어, 한국어, 일본어, 중국어가 제공되며,
SpreadJS의 언어 리소스와 디자이너 컴포넌트의 언어 리소스로 구분됩니다.

 

 SpreadJS 언어 리소스

 디자이너 컴포넌트 언어 리소스

 영어

 기본 적용 (다른 언어 리소스 미적용 시)

 gc.spread.sheets.designer.resource.en.xx.x.x.min.js

 한국어

 gc.spread.sheets.resources.ko.xx.x.x.min.js

 gc.spread.sheets.designer.resource.ko.xx.x.x.min.js

 일본어

 gc.spread.sheets.resources.ja.xx.x.x.min.js

 gc.spread.sheets.designer.resource.ja.xx.x.x.min.js

 중국어

 gc.spread.sheets.resources.zh.xx.x.x.min.js

 gc.spread.sheets.designer.resource.cn.xx.x.x.min.js


이와 같이 여러 언어 리소스를 제공하지만,

한 번에 불러온다면 가장 마지막에 적용된 리소스로 적용됩니다.


따라서 디자이너 컴포넌트의 언어를 변경하기 위해서는 setResources 메소드를 이용하여

언어 리소스를 필요할 때 적용해 주어야 하며, 언어 리소스를 setResources 메소드에 적용할 수 있는 구조로 바꿔주어야 합니다.


따라서, 아래의 과정을 진행해야 합니다.


setResources 메소드에 적용하는 언어 리소스는 별도로 제공되지 않으며, 사용하시는 버전에 따라 아래 과정을 진행해 주어야 합니다.


리소스 파일 생성 및 적용 과정

  1. 리소스 파일 생성 샘플을 통해 각 언어의 디자이너 컴포넌트 리소스 파일 생성
  2. 생성한 디자이너 컴포넌트 리소스 파일을 로드 후 setResources 메소드로 적용
  3. SpreadJS의 언어도 함께 변경


각 단계의 진행 방법을 아래에서 자세히 소개합니다.



1. 디자이너 컴포넌트의 리소스 파일 생성


우선 가장 기본적인 디자이너 컴포넌트를 생성합니다.


SpreadJS 디자이너 컴포넌트 - 빠른 시작을 따라하거나 다운 받은 라이브러리 폴더의 SpreadJS.Release.xx.x.x\Designer\Designer Component\samples\purejs 경로에서 가장 기초의 샘플을 확인할 수 있습니다.


이때, 디자이너 컴포넌트의 리소스 파일은 원하는 언어의 리소스 파일을 로드합니다.

<script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.ko.15.1.2.min.js"></script>
<!-- <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.cn.15.1.2.min.js"></script> -->
<!-- <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.en.15.1.2.min.js"></script> -->
<!-- <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.ja.15.1.2.min.js"></script> -->


아래 코드를 이용하여 리소스를 파일로 생성합니다.

var res_json_str = JSON.stringify(GC.Spread.Sheets.Designer.getResources());

//For KO Resources
var result = 'var ko_res_str = ' + "`" + res_json_str + "`;";
result = result.replaceAll('','');
saveAs(new Blob([result], { type: "text/javascript;charset=utf-8" }), 'ko_res.15.1.2.js');


리소스 파일 생성 샘플은 아래에서 확인하실 수 있습니다.

"디자이너 컴포넌트 리소스 파일 생성" 버튼을 클릭하시면, 생성된 한국어 리소스 파일이 다운로드 되는 샘플입니다.



2. 생성한 리소스 파일을 본 프로젝트에 적용

1번 단계에서 생성한 리소스 파일을 setResources 메소드를 통해 적용합니다.

GC.Spread.Sheets.Designer.setResources(JSON.parse(ko_res_str)); //디자이너 컴포넌트 언어 리소스 변경


3. SpreadJS의 언어도 함께 변경

또한 디자이너 컴포넌트 리소스 뿐만 아니라 SpreadJS의 언어도 함께 변경해줍니다.

GC.Spread.Common.CultureManager.culture("ko-kr"); //SpreadJS 언어 변경


한국어, 영어, 중국어, 일본어 드롭 다운 리스트를 생성하고 언어를 변경하는 샘플을 아래에서 확인하실 수 있습니다.


드롭 다운 리스트에서 언어를 선택할 때마다 언어가 변경됩니다.



* 디자이너 컴포넌트에 대한 더 많은 자료는 여기를 확인하실 수 있습니다.




지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

spjs.png

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.