빠른 시작: 문자열 리소스 사용(HTML)

아티클
01/28/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

문자열 리소스를 리소스 파일에 넣고 JavaScript 코드 또는 HTML 태그에서 해당 문자열을 참조합니다.

지침

문자열을 코드나 태그에 바로 넣는 대신 리소스 파일에 넣습니다.
1. Visual Studio에서 package.appxmanifest을 열고 응용프로그램 탭으로 이동한 후 기본 언어를 "ko-KR"로 설정합니다. (범용 앱인 경우 솔루션의 각 package.appxmanifest에 대해 이 작업을 수행합니다.)참고 이렇게 하면 프로젝트의 기본 언어가 지정됩니다. 기본 언어 리소스는 사용자의 기본 설정 언어 또는 표시 언어가 앱에 제공된 언어 리소스와 일치하지 않을 경우 사용됩니다. 자세한 애용은 속성 페이지, JavaScript를 참조하세요.
2. 리소스 파일을 넣을 폴더를 만듭니다.
  1. 솔루션 탐색기에서 프로젝트(범용 앱인 경우 공유 프로젝트)를 마우스 오른쪽 단추로 클릭하고 추가 > 새 폴더를 선택합니다.
  2. 새 폴더의 이름을 "strings"로 지정합니다.
  3. 새 폴더가 솔루션 탐색기에 보이지 않으면 프로젝트가 여전히 선택된 상태에서 Microsoft Visual Studio 메뉴에서 프로젝트 > 모든 파일 표시를 선택합니다.
3. 영어(미국)용 하위 폴더와 리소스 파일을 만듭니다.
  1. 문자열 폴더를 마우스 오른쪽 단추로 클릭하고 그 아래에 새 폴더를 추가합니다. 이름을 "en-US"로 지정합니다. 리소스 파일은 BCP-47 언어 태그용으로 이름이 지정된 폴더에 배치됩니다. 언어 한정자 및 일반 언어 태그 목록에 대한 자세한 내용은 한정자를 사용하여 리소스 이름을 지정하는 방법을 참조하세요.
  2. en-US 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > **새 항목…**을 선택합니다.
  3. **리소스 파일(.resjson)**을 선택합니다.
  4. 추가를 클릭합니다. 이렇게 하면 기본 이름 resources.rejson을 사용한 리소스 파일이 추가됩니다. 이 기본 파일 이름을 사용하는 것이 좋습니다. 앱에서 리소스를 여러 파일로 분할할 수 있지만 이러한 파일을 참조할 때는 각별히 주의하여 올바르게 참조해야 합니다.문자열 리소스를 로드하는 방법을 참조하세요.
  5. 새 파일에는 기본 콘텐츠가 포함되어 있습니다. 파일 내용을 다음 코드로 바꿉니다(기본값과 유사할 수 있음).
    
    strings/en-US/resources.resjson
```
{
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}
```
    마지막 쌍을 제외한 각 이름/값 쌍 뒤에 쉼표를 추가해야 하는 엄격한 JSON(JavaScript Object Notation) 구문입니다. 이 샘플에서 greeting 및 farewell은(는) 표시되어야 하는 문자열을 나타냅니다. 다른 쌍(_greeting.comment 및 _farewell.comment)은 문자열을 설명하는 주석입니다. 주석은 문자열을 다른 언어로 지역화하는 번역사에게 특별한 지침을 제공할 수 있는 위치입니다.
코드 및 태그에 문자열 리소스 식별자를 추가합니다.
1. HTML 파일에서 JavaScript에 대한 참조를 추가합니다(없는 경우). (기본 템플릿은 항상 이 파일을 생성해야 합니다. 기본 CSS 파일의 이름은 사용하고 있는 템플릿에 따라 다를 수 있지만 이 예제의 목적의 경우에서는 중요하지 않습니다.)
```

<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
```
2. HTML 파일과 함께 제공되는 JavaScript 코드에서 HTML이 로드될 때 WinJS.Resources.processAll 함수를 호출합니다.
```
WinJS.Application.onloaded = function(){
    WinJS.Resources.processAll();
}
```
  추가 HTML이 WinJS.UI.Pages.PageControl 개체에 로드되면, 페이지 컨트롤의 IPageControlMembers.ready 메서드에서 WinJS.Resources.processAll(element)을 호출합니다. 여기에 HTML 요소 (element 및 하위 요소)가 로드됩니다. 이 예제는 응용 프로그램 리소스 및 지역화 샘플의 시나리오 6을 기반으로 합니다.
```
var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = element.querySelector('#output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
    unload: function () { 
        WinJS.Resources.removeEventListener("contextchanged", refresh, false); 
    } 
});
```
3. HTML에서 data-win-res attribute을(를) 사용하는 리소스 파일의 리소스 식별자(greeting 및 farewell)를 사용하여 문자열 리소스를 참조합니다.
```
<h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
```
4. 다음은 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 attribute의 일반적인 패턴은 data-win-res="{propertyname1**: 'resource ID’, propertyname2: 'resource ID2'}"**입니다.

리소스 문자열에 태그가 포함되어있지 않거나 일반 텍스트로 삽입될 경우, innerHTML 대신 textContent 속성에 리소스를 바인딩합니다. textContent 속성은 innerHTML보다 DOM 내에서 교체 속도가 훨씬 빠릅니다.

**attributes:**을 속성 이름으로 사용할 수도 있습니다. 이 경우 값은 명명된 리소스 이름이 아니라, 첫 번째 값이 특성 이름인 집합입니다. 두 번째 값은 값으로 사용하고자 명명된 리소스입니다. 예를 들면 다음과 같습니다.<div data-win-res="{attributes: {'aria-label' : 'Button1LabelForAria'}}" > ...</div> 이것에 대한 예제는 응용프로그램 리소스 및 지역화 샘플의 시나리오 9에서 확인할 수 있습니다.

언어 및 지역화를 추가하는 방법에 대한 자세한 내용은 빠른 시작: UI 리소스 번역을 참조하세요.

다음을 통해 공유

빠른 시작: 문자열 리소스 사용(HTML)

지침

메모와 팁

관련 항목

추가 리소스