Apache Cordova 크로스 플랫폼 HTML5 어플리케이션 만들기-3장

Cordova Applications 개발하기

You can add your HTML, JavaScript and CSS files to the www folder and—as long as you mark them with a Build Action of Content—they’ll be included in your project and accessible via the browser control when your application executes. You can use any of the standard JavaScript/HTML5 libraries or frameworks in your Cordova application, as long as they’re compatible with the phone’s browser.
당신은 HTML, JavaScript그리고 CSS 파일을 www폴더에 추가 할 수 있고-어느정도 당신이 컨텐츠 표현을 위한 구현을 할 수 있게- 당신의 응용프로그램이 실행될 때 브라우저 콘트롤러를 통하여 접근할 수 있는 프로젝트에 포함되어야 할 것을 추가할 수 있습니다.

The Cordova APIs are documented on the Cordova Web site; I won’t describe them in detail here. One important thing to note is that you must wait for the deviceready event before making use of any of the other API methods. If you inspect the index.html file generated from the template, you can see that it waits until the device is ready before updating the UI:
Cordoba API는 Cordova Web site에 문서화되어 있습니다; 이 곳에서는 그 것들에 대해서 자세하게 다루지는 않겠습니다. 한가지 주의해야 할 중요한 점이 있다면 기계구동준비(Device Ready) 이벤트 전에 다른 API 메소드의 사용 할 수 있도록 기다려야 한다는 것입니다. 만약 당신이 템플릿으로 부터 생성된 index.html 파일을 검사해보면, 기계구동상태가 준비되기전에 UI(User Interface)를 수정(Updating)하는 것을 볼 수 있습니다:

1. <script type="text/javascript">
2.   document.addEventListener("deviceready",onDeviceReady,false);
3.   function onDeviceReady()
4.   {
5.     document.getElementById("welcomeMsg").innerHTML
6.       += "Cordova is ready! version=" + window.device.cordova;
7.     console.log(
8.       "onDeviceReady. You should see this " +
9.         "message in Visual Studio's output window.");
10.   }
11. </script>

The console object used in the preceding code allows you to add debug output to your application. These messages are sent to the Visual Studio console by Cordova.
콘솔 오브젝트를 사용하여 디버그를 출력하는 선행 응용프로그램 코드입니다. 이 메세지들은 코르도바에 의해 비주얼 스튜디오 콘솔에 보내지게 됩니다. 

단일페에지 또는 다중 응용프로그램 아키텍쳐

When building Cordova applications, you can employ two distinct patterns:

Cordova 응용프로그램을 만들 때 당신은 크게 두 가지 패턴을 사용할 수 있습니다:

Multipage applications: In multipage applications, multiple HTML pages are used to represent the various screens of your application. Navigation between pages uses the standard browser mechanics, with links defined by anchor tags. Each HTML page includes script references to the Cordova JavaScript code and your application JavaScript.

다중페이지 응용프로그램: 다중페이지 응용프로그램 안에는, 당신의 응용프로그램이 대체적으로 여러 HTML 페이지들이 여러 스크린에 의하여 표현되어진다는 것을 뜻합니다. 페이지들을 안내(Navigation)하기 위해 사용되는 것은 기본 브라우저 메카닉과 앵커 태그에 의해 정의되어진 링크입니다. 각각의 HTML페이지는 Cordova JavaScript 코드 레퍼런스 또는 사용자 응용 JavaScript를 추가하고 있습니다. 

Single-page applications: In single-page applications, a single HTML file references Cordova and your application JavaScript. Navigation between the various pages of your application is achieved by dynamically updating the rendered HTML. From the perspective of the phone browser, the URL remains the same and there’s no navigation between pages.

The choice you make between these two patterns has a significant impact on the structure of your code.

단일페이지 응용프로그램: 단일 페이지 패턴의 응용프로그램은, 하나의 HTML 파일에 Cordova 또는 당신의 응용 JavaScript가 참조될 수 있습니다. 당신의 응용프로그램에서 여러 페이지들을 안내(Navigation)하기 위해서 HTML을 다이나믹하게 수정하여 그려내게(Rendered) 됩니다. 폰의 브라우저의 시점에서는 URL(Uniform Resource Locator)은 남아서 동일하고, 페이지 주소를 안내(Navigation)하진 않습니다.

이 두가지 패턴중에 한 가지를 선택하는 것은 코드의 구조에 중요한 영향을 미치게 됩니다.

Generally speaking, the multipage pattern is best suited to applications that mostly comprise static content. With this approach you can take HTML/CSS/JavaScript that’s currently used on your Web site and package it, using Cordova, for delivery to the phone as an application. But the multipage approach has some disadvantages. First, when the browser navigates from one page to the next, it has to reload and parse all the JavaScript associated with the new page. There’s a noticeable pause as the Cordova lifecycle, which creates the link between the JavaScript APIs and C# counterparts, is executed. Second, because your JavaScript code is being reloaded, all application state is lost.

일반적으로 말해서 다중페이지가 최고의 정적 컨텐츠 응용프로그램 패턴이라고 할 수 있습니다. 단일페이지 응용프로그램으로서 당신의 폰에 Cordova를 사용하여 전달한다는 접근은 현제 당신의 웹사이트나 패키지에서 사용되고 있는 HTML/CSS/JavaScript를 취할 수가 있다는 것입니다. 그러나 다중페이지 접근은 몇 가지 불리한 것이 있습니다. 첫 째, 브라우저로 하나의 페이지에서 다음으로 안내되어 질 때, 모든 것을 새로읽고 해독하고 JavaScript를 새로운 페이지에 조합하여야 한다는 것입니다. 여기 Cordova 생활주기에서는 중요한 실행 또는 정지되어 질 때 생성되는 JavaScript API와 C#의 응대(반응)하기위한 연결 상태값 등이 있습니다. 두 번째는 JavaScript코드가 있기 위해서 새로 읽어질 때 모든 응용프로그램 상태가 손실될다는 것입니다. 

The single-page pattern overcomes the issues associated with the multipage approach. The Cordova and application JavaScript code is loaded just once, resulting in a more responsive UI and removing the need to pass application state from one page to the next. The only disadvantage to this approach is the added complexity, with JavaScript code being required to update the UI when navigation occurs.

단일 페이지 응용프로그램 패턴은 다중 페이지 응용프로그램 접근과 같이 대두된 이슈를 극복하였습니다. Cordova와 JavaScript 응용프로그램 코드는 딱 한 번만 읽혀지고, 많은 UI(사용자 인터페이스)의 반응 값과 한 페이지가 소멸되고 남은 응용프로그램 상태 값을 다음에 지우는 것입니다(Remving the need to pass application state from one page to the next). 이런 접근에 있어서 유일하게 불리한 점은 페이지들 간에 안내(Navigation)가 되고 있을 때 JavaScript코드로 UI의 상태 또는 모양을 업데이트하게 될 때 복잡해 진다는 것입니다.

The demo application described in this article uses the single-page pattern. For an example of the multipage approach in action, I recommend looking at the DemoGAP CodePlex project (demogap.codeplex.com), which provides a simple demonstration of the Cordova API features within a Windows Phone application.

현제 제공되는 데모 응용프로그램은 싱글 페이지 패턴의 문서를 가지고 기술 된 것입니다. 윈도우 폰 응용프로그램으로 제공된 간단한 Cordova API 데모 중 다중 페이지 접근의 예문을 활용하시려면 저는 DemoGap Complex Project(demogap.complex.com)을 보라고 추천하고 싶습니다. 

데모 응용프로그램

The rest of this article describes “Cordova Twitter Search,” a simple Windows Phone application that allows the user to search Twitter based on one or more keywords, as shown in Figure 5.

다음 기술된 "Cordova Twitter Search:Cordova 트위터 검색" 글은 Figure 5에서 보시듯 아주 간단하게 한 개 이상의 키워드로 트위터를 검색하는 윈도우 폰 응용프로그램을 보여주고 있습니다. 

As well as Cordova, this application makes use of the following frameworks:

다음은 코르도바 응용프로그램의 프레임웍입니다.

• jQuery and jQuery Templates: jQuery has become the de facto standard framework for manipulation of the browser Document Object Model (DOM). jQuery templates are plug-ins that Microsoft developed (bit.ly/8ZO2V1), making it easy to create reusable HTML templates that can be rendered to the DOM. Twitter Search uses jQuery templates to define the UI for the various pages within the application.
• jQuery 와 jQuery 템플릿: jQuery는 브라우저의 DOM을 가공한 de facto 표준 프레임웍이 되었습니다. jQuery 템플릿은 DOM으로 그려낼 수 있는 HTML 템플릿이고, 창조적인 재사용이 가능하게 Microsoft developed( bit.ly/8ZO2V1)에서 프러그인으로 제공됩니다. 트위터 검색은 응용프로그램에 jQuery 템플릿 UI로 정의된 여러가지 페이지로 구성되어있습니다.

• Knockout JS: Knockout is a Model-View-ViewModel (MVVM) framework that makes it easy to construct ViewModels and keep them synchronized with Views in a manner familiar to Silverlight developers. It’s this familiarity that led me to choose Knockout over the numerous other suitable JavaScript UI frameworks.
• Knockout JS: Knockout은 아주 쉽게 뷰모델을 구성하고 지속적으로 동기화 해주는 Silverlight 개발자를 위한 매우 친숙한 Model-View-ViewModel(MVVM)프레임 웍입니다. 이런 친숙함이 다른 괜찮은 JavaScript UI 프레임웍보다 더욱 더 Knockout을 선택하게 이끌었습니다.

I won’t be covering Knockout in detail in this article. If you’re interested in learning more about this framework, I recommend reading John Papa’s recent article, “Getting Started with Knockout” (msdn.microsoft.com/magazine/hh781029). And if you aren’t familiar with the MVVM pattern (where have you been hiding?), I recommend this excellent article by Josh Smith: “WPF Apps with the Model-View-ViewModel Design Pattern” (msdn.microsoft.com/magazine/dd419663).

저는 Knockout을 자세하게 이 글에서 다루고 싶지 않습니다. 그러나 만약 프레임웍(Knockout)에 대하여 더 배우길 원하신다면, 저는 Jhon Papa의 최근 글인 "Getting Started With Knockout"(msdn.microsoft.com/magazine/hh781029)을 권하고 싶습니다. 그리고 만약 MVVM패턴이 익숙하지 않으시다면(뭘 숨기시려하십니까?-역자주: 부끄러워 말라는 거겠죠? 모를수도 있으니...), Josh Smith의 글 "WPF Apps with the Model-View-ViewModel Design Pattern"(msdn.microsoft.com/magazine/dd419663)을 권하고 싶습니다.

마치며...

너무나 오랜 만에 번역 작업을 한 것 같습니다. 역시나 허접하지만, "개떡같이 말해도 찰떡같이 알아들어라" 현명한(?) 우리의 선조들의 말을 빌어 그지같은 저에 오역글에 자비와 인애로 애쓴다하는 생각으로 글을 봐주시길 희망합니다.

아!!!! 아래 추천좀 눌러주심 감사하겠습니다...쿄쿄쿄

좋은 하루 되세요!!!!^^