마이크로소프트에서 jQuery 글로벌 플러그인 다운받아요~

Posted by 미나빠!
2010.06.14 18:00 ScottGu's Blog



스캇 구쓰리의 글이 하나 올라왔습니다. ㅎㅎ
jQuery에 대해 무지한 상태라 공부해야지라고 생각하던 참에 관련 글이 하나 올라오니 참~ 모든건 내뜻대로? 되는듯 합니다. 훗
그냥 번역아닌 번역을 할 터이니 원본을 직접보시는게 좋을듯합니다. 제가 지금부터 써내려가는 것은 듣보잡의 번역글이라... 뭔말인지 아시죠? 그럼 써내려갑니다~


원문 : http://weblogs.asp.net/scottgu/archive/2010/06/10/jquery-globalization-plugin-from-microsoft.aspx

지난 달 마이크로소프트가 어떻게 jQuery 기여를 할 코드를 만들기 시작했는지와 우리가 작업한 jQuery 템플릿과 데이터 링크 지원 이라는 첫 코드에 관한 글을 썼다.
오늘, 우리는 자바스크립트 어플리케이션에 글로벌화를 지원해줄 새 jQuery 글로벌 플러그인의 프로토타입을 릴리즈했다. 이 플러그인은 게일어, 프리즐란드어, 헝가리어, 일본어, 캐나다 영어 등 350여개의 문화권을 걸친 글로벌한 정보를 담고있다. 우리는 이 플러그인을 오픈소스 커뮤니티에 올려놓을 것이다.

이 플러그인의 프로토타입 다운로드는 Github 에서 받을수 있다.

http://github.com/nje/jquery-glob

또한 간단한 사용 예의 데모 샘플을 여기서 받을수 있다.

글로벌에 대해 알아보자

이번 jQuery 글로벌 플로그인은 자바스크립트로 다른 문화권의 숫자포맷, 통화, 날짜등을 쉽게 파싱하도록 해준다. 예를들어, 글로벌 플러그인을 이용해서 문화권에 맞는 적절한 통화단위를 표시할 수 있다.



또한 날과 달의 이름을 정확하게 번역하고 표시하기 위해  글로벌 플러그인의 데이트(date) 포맷을 사용할수 있다.



위를 보면, 아라비아의 년도가 1431로 표시되어있다. 이는 년도가 아라비아의 달력으로 변환되었기 때문이다.

다른 통화, 다른 달 이름과 같이 문화차이는 분명하다. 다른 문화의 차이점들은 놀랍고 파악하기 힘든 미묘함이 있다. 예를들어, 어떤 문화권에서는 숫자들을 일정치않게 그룹을 짓는다. "te-IN"(인도의 텔루구 어) 문화권에서는 3자리로 그룹을 짓고 그 다음에는 2자리로 그룹을 짓는다. 수 1000000(백만)는 "10,00,000" 이렇게 쓴다. 어떤 문화에서는 숫자들에 그룹을 짓지 않는다. 이러한 다른 문화권의 모든 미묘한 차이점들을 jQuery 글로벌 프로그인을 통해 자동으로 처리할 수 있다.

올바른 날짜를 가져오는 것은 특히 까다로울 수 있다. 다른 문화권은 Gregorian 달력(일반), UmAlQura 달력(사우디아라비아쪽?) 같은 다른 달력을 사용한다. 단일 문화권에서도 심지어 여러개의 달력을 사용할 수 있다. 예를 들어, 일본 문화권에서는 Gregorian 달력과 일본 천황의 이름을 딴 일본 달력 둘 모두를 사용한다. 글로벌 플러그인은 이러한 다른 문화권의 모든 달력들 사이의 날짜를 변환하기 위한 메쏘드를 포함하고 있다.

언어 태그 사용하기

jQuery 글로벌 플러그인은 언어권(다른 문화권의 언어)을 확인하기위해 RFC 4646과 RFC 5646 표준에 정의된 언어 태그를 사용한다(여기 http://tools.ietf.org/html/rfc5646). 언어 태그는 하이픈(-)으로 구분된 하나, 그 이상의 서브태그들로 구성되어 있다. 예를들면 다음과 같다.

Language Tag Language Name (in English)
en-AU English (Australia)
en-BZ English (Belize)
en-CA English (Canada)
Id Indonesian
zh-CHS Chinese (Simplified) Legacy
Zu isiZulu

영어와 같은 한 언어도 여러개의 언어 태그를 가질 수 있다.
캐나다 영어권의 사람은 숫자, 통화, 날짜 포맷을 오스트레일리아나 US 영어권의 사람과는 다른 관습을 따른다. 당신은 여기(http://rishida.net/utils/subtags/)에 있는 서브태그로 언어를 찾아주는 툴을 사용하여 특정문화권의 언어태그를 찾을 수 있다.

jQuery 글로벌 플러그인을 다운받으면 globinfo 폴더가 있다. 이 폴더는 350 개의 문화의 각각의 정보를 갖고 있다. 실제로, 이 폴더는 각 파일의 축소버전과 아닌 버전 둘 모드를 포함하고 있기 때문에 700개 보다 많은 파일을 포함하고 있다.

예를들어, globinfo 폴더는 오스트레일리아 영어를 위한 jQuery.glob.en-AU.js, 인도네시아를 위한 jQuery.glob.id.js,  그리고 중국의 간체자를 위한 jQuery.glob.zh-CHS.js라는 이름의 자바스크립트 파일을 포함하고 있다.

예제 : 특정 문화 세팅하기

독일 사이트를 만든다고 생각해보자. 클라이언트단에서는 정확한 독일 포맷 규약에 따른 숫자, 통화, 날짜를 표현하길 원할것이다. 이 해당페이지는 다음과 같다.



위 스팬(span) 태그를 보자. 이것들은 글로벌 플러그인을 사용하여 포맷팅을 할 페이지의 영역을 잡고 있다. 우리는 제품가격, 제품 입수일, 재고량을 포맷팅하기를 원한다.

jQuery 글로벌 프러그인을 사용하자. 페이지에 jQuery 라이브러리, 글로벌 플러그인, 특정 문화권 정보를 담고있는 세 개의 자바스크립트 파일을 추가한다.  



이번 예제에서는, 독일 문화권 정보를 담고 있는 jQuery.glob.de-DE.js 파일을 정적으로 추가했다. 독일은 "de-DE" 언어태그를 사용한다.

이제 필요한 모든 스크립트들을 추가했다. 나는 다음과 같이 클라이언트단의 자바스크립트에서 제품가격, 제품 입수일, 재고량을 포맷팅하기 위해 글로벌 플러그인을 사용할 수 있다.

jQuery 글로벌 플러그인은 jQuery 라이브러리에 새로운 메쏘드를 추가 확장했다. 새 메쏘드는 preferCulture()format()이다. preferCulture() 메쏘드는 jQuery 글로벌 플러그인 메쏘드를 사용하여 디폴트 문화를 세팅하도록 한다. preferCulture() 메쏘드는 언어태그를 받는다. 이 메쏘드는 언어태그와 매치되는 가장 근접한 문화권을 찾는다.

$.format() 메쏘드는 숫자, 통화, 날짜의 실제 포맷을 위해 사용된다. 이 메쏘드의 두번째 파라미터에는 포맷 형식이 전달된다.
예를들어, "c"를 인자로 넘기면 통화형식을 포맷팅한다. 다양한 포맷 형식이 의미하는 것을 자세하게 보고 싶다면 github의 ReadMe 파일을 보자.
http://github.com/nje/jquery-glob

브라우저에서 이 페이지를 열면, 독일 언어권의 규약에 따라 모든것이 정확하게 포맷팅되어있다. 통화는 유로 표시로 되어있고, 날짜는 독일의 날, 달력이름으로 포맷팅 되어 있다. 마지막으로, 숫자 구분자로 콤마 대신 점을 사용하고 있다.



다운로드 받은 샘플예제안에 3_GermanSite.html 파일을 열면 위와 같은 결과를 볼 수 있다.

예제 : 사용자가 다이나믹하게 문화권을 선택하기

이전 예제에서는 확실하게 독일 문화권을 표현하길 원했다.(jQuery.glob.de-DE.js 파일을 참조했다.) 이제 동적으로 문화권을 세팅하는 방법에 대한 몇 예제중 첫 예제를 보자.

페이지에 350개 문화권 모두를 드랍다운 리스트에 표시한다고 생각해보자. 누군가가 드랍다운 리스트에서 한 문화를 선택했을때, 그 페이지 안에 있는 모든 날짜들이 선택된 문화권으로 포맷팅되길 원한다.



이것은 그 페이지를 위한 HTML 이다.



data-date 속성이 있는 <span> 태그안에 날짜들이 있다.(data-* 속석은 HTML5 의 새 기능이다. 이는 이전 버전의 브라우저에서도 잘 작동한다.) 우리는 사용자가 드랍다운 리스트를 통해 문화권을 선택할 때 data-date 속성에 의해 date 표현을 포맷팅 할 것이다. 

가능한 모든 문화권에 대한 date를 표현하기 위해 jQuery.glob.all.js 파일을 포함시킬 것이다.



jQuery 글로벌 플러그인은 jQuery.glob.all.js 라는 이름의 JavaScript 파일을 포함하고 있다. 이 파일은 글로벌 플러그인에서 지원하는 350 문화권 이상의 모든 글로벌 정보를 담고 있다. 이 파일의 크기는 축소해도 367KB로 작지 않다. 이 파일의 크기 때문에, 한번에 모든 문화를 사용하는 것이 정말로 필요한 상황을 제외하고는, 모든 문화가 결합된 jQuery.glob.all.js 파일 대신 특정 문화에 대한 각각의 JavaScript 파일을 추가하는 것을 추천한다. 다음 예제에서 단지 필요한 언어파일을 동적으로 로드하는 방법을 볼 것이다.

다음은 모든 문화를 포함시킨 드랍다운 리스트가 있다. $.cultures 속성을 사용하여 로드된 문화권의 모든 것을 가져올 수 있다.



마지막으로 data-date 속성을 가진 모든 span 엘리먼트들을 가져와 date 포맷팅을 하는 jQuery 코드를 작성한다.



jQuery 글로벌 플러그인의 parseData() 메쏘드는 문자열로 표현된 날짜를 JavaScript date로 변환하기 위해 사용된다. 플러그인의 format() 메쏘드는 날짜로 포맷팅하기위해 사용된다. "D" 포맷 형식은 long date 포맷을 사용하여 날짜가 포맷팅된다.

그리고 지금 컨텐츠는 사용자가 방문하여 페이지를 선택하면 350 언어 어떤것에도 관계없이 올바르게 글로벌하게 표현될 것이다. 샘플 다운을 받아 4_SelectCulture.htm 파일을 열면 작동하는 예제를 볼 수 있다.

예제 : 동적으로 글로벌 파일 로드하기

이전 섹션에서 언급했던 것처럼, jQuery.glob.all.js 파일은 너무 크기때문에 가능하면 페이지에 추가하는 것을 피해야한다. 더 나은 대안으로는 필요한 글로벌 정보를 동적으로 로드하는 것이다.

예를들어, 언어들을 보여주는 드랍다운 리스트를 만든다.



다음은 드랍다운 리스트로부터 새로운 언어를 선택했을때 수행되는 jQuery 코드이다. 이 코드는 선택된 언어와 연관된 글로벌 파일이 이미 로드가 된 것인지 체크한다. 글로벌 파일이 로드가 되지 않았으면 jQuery의 $.getScript() 메쏘드를 사용하여 동적으로 글로벌 파일을 로드한다.



globalizePage() 메쏘드는 요청된 글로벌 파일이 로드가 되면 호출되고, 글로벌화가 수행되는 클라이언트단에 포함된다.

이러한 접근은 전체를 담고 있는 jQuery.glob.all.js 파일을 로드하는 것을 피하도록 해준다. 대신 필요한 파일들만 로드하고 하나 그 이상의 파일들은 로드할 필요가 없다.

샘플 코드의 5_Dynamic.htm 파일이 이것을 구현한 데모이다.

예제 : 자동으로 시용자 기본 언어 세팅하기

많은 웹사이트는 글로벌 컨텐츠의 경우 사용자의 기본 언어를 그들의 웹사이트 세팅정보르부터 자동으로 찾는다. 사용자는 그들의 브라우저에 기본 언어를 세팅할 수 있다. 그러면, 사용자가 페이지를 요청할때마다, 요청 정보 안의 Accept-Language 헤더에 기본언어가 포함된다.

마이크로소프트 인터넷 익스플로러를 사용할 때, 다음의 스텝대로 기본 언어를 세팅할 수 있다.

1. 도구 메뉴에서 인터넷 옵션을 선택한다.
2. 일반 탭을 선택한다.
3. 모양 섹션에서 언어(L)버튼을 클릭한다.
4. 추가(A)버튼을 클릭하여 언어 리스트에서 새 언어를 추가한다.
5. 기본으로 할 언어를 리스트의 맨위로 이동시킨다



기본 언어 설정 창에서 많은 언어를 리스트에 추가할 수 있다. 이 모든 언어들은 Accept-Language 헤더에 포함되어 보내진다.
    
  Accept-Language: fr-FR,id-ID;q=0.7,en-US;q=0.3

이상하게도, 자바스크립트로 클라이언트에서 Accept-Language 헤더의 값을 가져올 수 없다. 인터넷 익스플로러와 파이어폭스는 window.navigator.browserLanguage와 window.navigator.language와 같은 window.navigator 객체의 속성들로 언어들을 가져올 수 있게 지원한다. 그러나 이 속성들은 OS에 세팅된 언어나 브라우저의 편집 언어를 표시한다. 이 속성들로는 사용자가 기본언어로 세팅한 언어를 가져올 수 없다.

단지 사용자의 기본 언어(Accept-Language 헤더의 값)를 가져오는 방법은 서버 코드로 작성하는 것이다. 예를들어, ASP.NET 페이지에서 Request.UserLanguages 속성을 사용하여 사용자의 기본언어를 클라이언트의 자바스크립트 변수 acceptLanguage에 할당하는 것이다.(이렇게 하면, 클라이언트단의 자바스크립트를 사용하여 해당 값에 액세스할 수 있다)



이 코드를 작동하기 위해, acceptLanguage의 값에 있는 문화권의 정보를 페이지에 포함시켜야한다. 예를들어, 누군가의 기본언어가 fr-FR(프랑스어-프랑스)면, jQuery.glob.fr-FR.js나 jQuery.glob.all.js 자바스크립트 파일을  페이지에 포함시켜야한다. 그렇지 않으면, 문화권 정보를 사용할 수 없다. 샘플에 이를 구현한 데모는 "6_AcceptLanguages.aspx" 이다.

사용자의 기본언어의 문화권 정보가 페이지에 포함되어 있지 않다면, $.preferCulture() 메쏘드는 대표언어(neutral culture - 예를들어, jQuery.glob.fr-FR.js 대신 jQuery.glob.fr.js 를 사용)에 의존할 것이다. 대표 문화권 정보도 사용할 수 없다면 $.preferCulture() 메쏘드는 디폴트 언어(English)로 세팅할 것이다.

예제 : jQuery UI DatePicker에 글로벌 플러그인 사용하기

이번 글로벌 플러그인의 목표 하나는 쉽게 다른 문화권들이 사용할 수 있는 jQuery 위젯을 쉽게 만드는 것이다.

DatePicker 플로그인과 같이 존재하는 jQuery UI 플러그인에 jQuery 글로벌 플러그인이 작동하는 것을 원했다. 이를 위해, 달력이 렌더될때 글로벌 플러그인을 사용하여 DataPicker 플러그인의 패치버전을 만들었다. 아래 이미지는 페이지에 패치된 jQuery UI DatePicker 플러그인과 jQuery 글로벌 플러그인을 추가하여 사용자가 기본언어를 Indonesian으로 선택하였을때 발생하는 것에 대한 예제 그림이다.



요일은 인도의 요일 이름의 약어가 표현되어 있다. 게다가, 달이름도 인도어로 되어 있다.

jQuery UI DatePicker 패치 버전은 github 웹사이트에서 다운받을 수 있다. 또는 샘플 7_DatePicker.html 파일에서 사용된 버전을 사용할 수 있다.

요약

나는 jQuery 커뮤니티에 계속 참여하는것이 흥분된다. 이번 글보벌 플러그인은 우리가 릴리즈한 세번째 jQuery 플러그인이다.

우리는 이번 연초에 릴리즈한 데이타 링킹 프로토타입과 jQuery 템플릿에 관한 모든 디자인 제안과 훌륭한 피드백에 대해 너무나 감사를 드린다. 우리는 또한 이번 플러그인을 만들고 같이 작업을 해준 jQuery와 jQuery UI 팀에게도 감사한다.

이것이 도움이 되길,

스캇.

추신. 블로깅에 추가적으로 나는 빠른 업데이트 정보, 링크를 공유하기 위해 Twitter를 사용하고 있다. twitter.com/scottgu를 팔로우할수 있다.


이렇게 한번 번역아닌 번역을 해봤습니다. 이 글이 6월10일에 올라온 것이니 4일 후에 번역이 올라온셈. 더 빨리 올리는것에 노력을 해보겠습니다. ㅎㅎ

신고
이 댓글을 비밀 댓글로