언어: JavaScript 및 HTML | VB/C#/C++ 및 XAML
이 항목은 아직 평가되지 않았습니다.- 이 항목 평가

빠른 시작: UI 리소스 번역(JavaScript 및 HTML을 사용하는 Windows 스토어 앱)

UI용 문자열 리소스를 리소스 파일에 넣습니다. 그러면 코드 또는 태그로부터 해당 문자열을 참조할 수 있습니다.

지침

  1. 문자열을 코드나 태그에 바로 넣는 대신 리소스 파일에 넣습니다.
    1. Microsoft Visual Studio에서 package.appxmanifest를 열고 응용 프로그램 UI 탭으로 이동한 다음 기본 언어를 "en-US"로 설정합니다.

      참고  이렇게 하면 프로젝트의 기본 언어가 지정됩니다. 기본 언어 리소스는 사용자의 기본 설정 언어 또는 표시 언어가 응용 프로그램에 제공된 언어 리소스와 일치하지 않을 경우 사용됩니다. 속성 페이지, JavaScript를 참조하세요.

    2. 리소스 파일을 포함할 폴더를 만듭니다.
      1. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가 > 새 폴더를 선택합니다.
      2. 새 폴더의 이름을 "strings"로 지정합니다.
      3. 솔루션 탐색기에 새 폴더가 표시되지 않으면 프로젝트가 선택되어 있는 상태에서 Visual Studio 메뉴에서 프로젝트 > 모든 파일 표시를 선택합니다.
    3. 영어(미국)에 대한 하위 폴더와 리소스 파일을 만듭니다.
      1. strings 폴더를 마우스 오른쪽 단추로 클릭하고 아래에 새 폴더를 추가한 다음 이름을 "en-US"로 지정합니다. BCP-47(영문) 언어 태그에 대해 이름이 지정된 리소스 파일이 폴더에 배치됩니다. 언어 한정자 및 일반 언어 태그 목록에 대한 자세한 내용은 한정자를 사용하여 리소스 이름을 지정하는 방법을 참조하세요.
      2. en-US 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > 새 항목…을 선택합니다.
      3. "리소스 파일(.resjson)"을 선택합니다.
      4. 추가를 클릭합니다. 그러면 기본 이름 Resources.rejson이 지정된 리소스 파일이 추가됩니다. 이 기본 파일 이름을 사용하는 것이 좋습니다. 앱은 리소스를 다른 파일로 분할할 수 있지만 리소스를 올바르게 참조하도록 주의해야 합니다. 문자열 리소스를 로드하는 방법을 참조하세요.

      5. 새 파일에는 기본 콘텐츠가 포함되어 있습니다. 이 콘텐츠를 다음 콘텐츠로 바꿉니다. (기본 콘텐츠와 매우 유사할 수 있습니다.)

        strings/en-US/resources.resjson

        json
        복사 
        
{
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}

        이는 마지막 쌍을 제외한 각 이름/값 쌍 뒤에 쉼표를 추가해야 하는 엄격한 JSON(JavaScript 개체 표기법) 구문입니다. 이 샘플에서 "greeting" 및 "farewell"은 표시할 문자열을 식별합니다. 다른 쌍("_greeting.comment" 및 "_farewell.comment")은 문자열을 설명하는 주석입니다. 주석은 문자열을 다른 언어로 지역화하는 번역사에게 특별한 지침을 제공할 수 있는 위치입니다.

  2. 코드 및 태그에 문자열 리소스 식별자를 추가합니다.
    1. JavaScript용 Windows 라이브러리에 대한 참조를 HTML 파일에 추가합니다(없는 경우).
      HTML
      복사 
      
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>

      이 예제에서는 Microsoft Visual Studio Express 2012 for Windows 8에서 새로운 빈 응용 프로그램 프로젝트를 만들 때 생성되는 Default.html 파일의 HTML을 보여 줍니다. 여기에는 JavaScript용 Windows 라이브러리에 대한 참조가 이미 포함되어 있습니다.

    2. HTML 파일과 함께 제공되는 JavaScript 코드에서 HTML이 로드될 때 WinJS.Resources.processAll 함수를 호출합니다.

      JavaScript
      복사 
      
WinJS.Application.onloaded = function(){
    WinJS.Resources.processAll();
}

      추가 HTML이 WinJS.UI.Pages.PageControl 개체에 로드되면, 페이지 컨트롤의 IPageControlMembers.ready 메서드에서 WinJS.Resources.processAll(element)을 호출합니다. 여기에 HTML 요소 (element 및 하위 요소)가 로드됩니다. 이 예제는 응용 프로그램 리소스 및 지역화 샘플의 시나리오 6을 기반으로 합니다.

      JavaScript
      복사 
      
var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = document.getElementById('output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.removeEventListener("contextchanged", refresh, false);
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
});
    3. HTML에서 리소스 파일의 리소스 식별자('greeting' 및 'farewell')를 사용하여 문자열 리소스를 참조합니다.
      HTML
      복사 
      
<h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
    4. 특성에 대한 문자열 리소스를 참조합니다.
      HTML
      복사 
      
<div data-win-res="{attributes: {'aria-label' : 'String1'}}" >
    5. JavaScript에서 문자열 리소스를 참조합니다.
      JavaScript
      복사 
      
var el = document.getElementById('header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);

    HTML 대체를 위한 data-win-res 특성의 일반 패턴은 data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}"입니다.

    참고  문자열에 태그가 포함되어 있지 않으면, 가능한 경우 innerHTML 대신 textContent 속성에 리소스를 바인딩하세요. textContent 속성이 innerHTML보다 훨씬 교체 속도가 빠릅니다.

  3. 다른 두 언어에 대한 폴더와 리소스 파일을 추가합니다.
    1. 독일어용으로 문자열 폴더 아래에 다른 폴더를 추가합니다. 독일어(독일)에 대해 폴더 이름을 "de-DE"로 지정합니다.

    2. de-DE 폴더에 다른 Resources.rejson 파일을 만들고 그 콘텐츠를 다음 내용으로 바꿉니다.

      strings/de-DE/resources.resjson

      json
      복사 
      
{
    "greeting"              : "Hallo",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Auf Wiedersehen",
    "_farewell.comment"     : "A goodbye."
}

    3. 프랑스어(프랑스)용으로 "fr-FR"이라는 폴더를 하나 더 만듭니다. 새 Resources.rejson 파일을 만들고 그 콘텐츠를 다음 내용으로 바꿉니다.

      strings/fr-FR/resources.resjson

      json
      복사 
      
{
    "greeting"              : "Bonjour",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Au revoir",
    "_farewell.comment"     : "A goodbye."
}
  4. 앱을 빌드하여 실행합니다.

    기본 표시 언어를 위한 앱 테스트

    1. F5 키를 눌러 앱을 빌드 및 실행합니다.
    2. greeting 및 farewell이 사용자의 기본 설정 언어로 표시됩니다.
    3. 앱을 종료합니다.

    앱을 다른 언어에 대해 테스트합니다.

    1. 제어판을 열고 시계, 언어 및 국가별 옵션 > 언어를 선택합니다.
    2. 앱 실행 시 표시된 언어는 목록에 있는 최상위 언어(영어, 독일어 또는 프랑스어)입니다. 최상위 언어가 이 세 언어 중 하나가 아니면 앱이 지원하는 목록에서 그 다음 언어가 앱에 적용됩니다.
    3. 시스템에 이 세 언어가 모두 없을 경우에는 언어 추가를 클릭하고 목록에 추가합니다.
    4. 앱을 다른 언어로 테스트하기 위해서 목록에서 해당 언어를 선택하고 이 언어가 맨 위에 올 때까지 위로 이동을 클릭합니다. 그런 다음 앱을 실행합니다.

관련 항목

한정자를 사용하여 리소스 이름을 지정하는 방법
문자열 리소스를 로드하는 방법
WinJS.Resources.processAll
응용 프로그램 리소스 및 지역화 샘플(영문)
속성 페이지, JavaScript
BCP-47 언어 태그

 

 

이 페이지가 유용했습니까?
이 콘텐츠에 대한 여러분의 의견은 중요합니다.
의견을 알려주십시오.
추가 의견
감사합니다!
소중한 의견에 감사합니다.
© 2013 Microsoft. All rights reserved.