Visual Studio에서 JavaScript 응용프로그램 개발하기


Before delving into the details of the application, I want to say a few things about JavaScript application development. One of the challenges facing the JavaScript developer is the dynamic nature of the language. With JavaScript you aren’t constrained by a rigid type system; instead, objects can be built dynamically. This poses a challenge to the developers of JavaScript editors and IDEs. With strongly typed languages such as C# and Java, the type information can be used to provide enhanced code navigation, refactoring and IntelliSense. With JavaScript, on the other hand, the lack of type information means that the IDE typically provides far fewer developer aids.
응용프로그램의 자세한 사항으로 들어가기 앞서, 저는 JavaScript 응용프로그램 개발에 대하여 몇 가지 이야기 하고 싶습니다. 훌륭한 JavaScript 개발자로 도전할만 한 것은 언어의 역동적 성질입니다. JavaScript와 함꼐라면 딱딱한 유형의 시스템으로 부터 구애받지 않을 수 있습니다; 그 대신에, 객체를 역동적으로 만들 수 있습니다. JavaScript 에디터와 통합개발툴(IDE) 개발자들의 도전 자세가 
C#또는 Java와 같은 강력한 유형의 언어와 같이 강력한 Refactoring 또는 IntelliSense한 안내 코드를 제공하여 사용할 수 있게합니다. 그러나 반대로 자바스크립트는 유형 정보의 뜻이 몇몇 개발자를 보조하는보통의 IDE에서 부족하게 제공되고있습니다.


Fortunately, things have improved recently, with Visual Studio 2010 performing pseudo-execution of your JavaScript code in order to determine the “shape” of each object, allowing it to provide JavaScript IntelliSense. In order to take full advantage of the IntelliSense support, we have to provide the IDE with a few “hints” in the form of “references” that tell the IDE which files to include in its pseudo-execution. With the demo project, all files start with a reference comment that tells the IDE to include the intellisense.js file. The content of this file is simply a list of references that ensure the IDE includes all the important application JavaScript files, providing quality IntelliSense support across the application, as shown here:
다행히도, 이런 것들은 비쥬얼 스튜디오 2010의 JavaScript IntelliSense 에서 제공된 각각의 JavaScript 객체의 "형"(Shape)을 측정하는 JavsScript 가상시현(pseudo-execution) 기능으로  현제 많이 개선되었습니다. IntelliSense의 모든 장점을 취하기 위해선 가상시현(pseudo-execution)을 위해 IDE 파일 내부에 몇가지 힌트를 참조양식(Form of "references")과  함께 제공해야했습니다. 시현(Demo) 프로젝트에는 모든 파일의 시작에 intelllisense.js파일을 포함하는 IDE 참조코멘트(Reference comment)가 있습니다. 다음에 보시는 크로스 응용프로그램을 지원하는 IntellliSense  파일의 내용은 IDE에서 포함한 중요한 응용프로그램 JavaScript파일들의 간단한 참조리스트입니다:



  1. /// Ensure IntelliSense includes all the files from this project.
  2. ///
  3. /// <reference path="app.js" />
  4. /// <reference path="viewModel/ApplicationViewModel.js" />
  5. /// <reference path="viewModel/SearchResultsViewModel.js" />
  6. /// <reference path="viewModel/TweetViewModel.js" />
  7. /// <reference path="viewModel/TwitterSearchViewModel.js" />
  8. /// <reference path="lib/jquery-1.6.4.js" />
  9. /// <reference path="lib/cordova-1.5.0.js" />
  10. /// <reference path="lib/knockout-1.2.1.js" />

JavaScript is a relaxed and forgiving language, with features such as value coercion and semi­colon insertion making it easy to use in a scripting environment. However, these same features often become problematic when managing large quantities of code. For that reason I highly recommend using JSLint, a tool that applies a more rigid set of coding standards to JavaScript. A popular Visual Studio Extension adds JSLint support (jslint4vs2010.codeplex.com), reporting lint errors within the error console. I’ve used JSLint for the Twitter Search application (and virtually every other JavaScript project I’ve worked on).
JavaScript는 느슨하고 관용적인 언어이지만, 스크립팅 환경에서 값의 강제성과 세미콜론(;)을 쉽게 삽입하는 특징을 이루고 있습니다. 그러나 이 것과 같은 특징들은 큰 규모의 코드를 관리하는데 있어 자주 문제시 되어지는 부분입니다. 그런 이유에서 저는 
툴에 더욱 완고한 표준 JavaScript 코딩을 설정 적용하고 싶다면, 강하게 JSLint를 사용할 것을 권하고 싶습니다. 대부분의 Visual Studio Extension 에는 JSLint 지원(jslint4vs2010.codeplex.com)하여 lint 오류를 오류콘솔을 통해서 통보하고 있습니다. 저는 트위터 검색 응용프로그램에 JSLint를 사용하였습니다(그리고 가상적으로 모든 JavaScript 프로젝트에 사용하고 있습니다).


You might notice a “globals” comment at the start of each JavaScript file within the project. JSLint helps prevent variables “leaking” into global scope by accidental omission of the var keyword. The “globals” comment provides JSLint with a formal definition of which variables are allowed to occupy a global scope.
당신은 프로젝트의 JavaScript파일에 "global"이라는 코멘트를 주의하셔야 할 것입니다. JSLint는 우발적인 키워드 생략으로 인한 전역적으로 발생하는 일명 "누수"현상을 막아줍니다. "global" 코멘트는 선점적으로 정의하여 제공하고 있습니다.


Model-View-View Model(MVVM) 응용프로그램 구조

The Twitter Search application is, from the perspective of the phone’s browser control, a single-page application. Conversely, from the user perspective, it has multiple pages, as seen in Figure 5. In order to support this, a Knockout ViewModel is constructed that contains a stack of ViewModel instances, each one representing a page within the application. As the user navigates to a new page, the corresponding ViewModel is added to this stack, and when the user navigates back, the topmost ViewModel is popped off the stack (see Figure 6).
트위터 검색 응용프로그램은 폰(phone)의 브라우저 컨트롤러로 보는 단일 
페이지 응용프로그램입니다. 반대로 사용자 시점에서 보면 Figure 5에서 보듯 다중 페이지로 보입니다. 응용프로그램간 페이지를 각각 대표하는 ViewModel 객체들의 더미(stack)을 포함하도록 지원하는 Knockout ViewModel이 구성되어졌습니다. 사용자에게 새로운 페이지를 안내하게 된다면 이에 상응하는 ViewModel을 ViewModel객체들의-더미(stack)에 추가하고 사용자에게 안내를 돌려주게 되고 가장 상위의 ViewModel은 ViewModel객체 더미에서 튀어나오게 됩니다(참조 Figure 6).


Figure 6 The Knockout ApplicationViewModel

  1. /// <reference path="..//intellisense.js" />
  2. /*globals ko*/
  3. function ApplicationViewModel() {
  4.   /// <summary>
  5.   /// The ViewModel that manages the ViewModel back-stack.
  6.   /// </summary>
  7.   // --- properties
  8.   this.viewModelBackStack = ko.observableArray();
  9.   // --- functions
  10.   this.navigateTo = function (viewModel) {
  11.     this.viewModelBackStack.push(viewModel);
  12.   };
  13.   this.back = function () {
  14.     this.viewModelBackStack.pop();
  15.   };
  16.   this.templateSelector = function (viewModel) {
  17.     return viewModel.template;
  18.   }
  19. }


When the application starts, an instance of the ApplicationViewModel is created and bound to the UI using Knockout:
응용프로그램이 시작되면 응용프로그램의 ViewModel의 객체가 생성 및 Knockout을 이용한 UI로 묶여지게 됩니다:


  1. document.addEventListener("deviceready", initializeViewModel, false);
  2. var application;
  3. function initializeViewModel() {
  4.   application = new ApplicationViewModel();
  5.   ko.applyBindings(application);
  6. }



The UI itself is quite simple, comprising a div element that uses the Knockout template binding to render the ViewModel stack:
div 엘레멘트를 포함한 Knockout 템플릿의 묶음과 
ViewModel 더미를 표현하는 UI 자체는 굉장히 단순합니다:



  1. <body>
  2.   <h1>Cordova Twitter Search</h1>
  3.   <div class="app" data-bind ="template: {name: templateSelector, foreach: viewModelBackStack}">
  4.   </div>
  5. </body>


The Knockout template binding works in a similar manner to the Silverlight ItemsControl in that it binds to an array of ViewModel instances and is responsible for generating the View for each via a template. In this case, the templateSelector function is invoked on the ApplicationViewModel in order to determine the named template for each ViewModel.
Knockout 템플릿 바인딩은 
SilverLight ItemControl의 템플릿을 통한 각각의 VIew를 생성하는 역활과 ViewModel 객체의 배열로 묶어주는 방식과 비슷하게 동작합니다. 이 경우에 각각의 ViewModel의 이름을 지정하기 위한 ApplicationViewModel을 templateSelector  가 호출하게됩니다.


If you run this application you’ll find that it doesn’t actually do anything—that’s because there aren’t any ViewModels to represent the pages of the application!
이응용프로그램을 실행하면 막상 아무 것도 하고 있지 않을 것을 발견할 것입니다. 왜냐하면 응용프로그램을 대표하는 페이지지 즉 ViewModel들이 어디에도 없기 때문입니다!


트위터 검색 뷰 모델(The TwitterSearchViewModel)

I’ll introduce the first ViewModel, TwitterSearchViewModel, which represents the first page of the application. This ViewModel exposes a few simple observable properties that support the UI, namely the searchTerm, which is bound to the user input field, and isSearching, which is a Boolean observable that disables the search button when the Twitter APIs are being queried via HTTP. It also exposes a search function that’s bound to the search button, in much the same way that you would bind an ICommand to a Button within Silverlight (see Figure 7).
제가 응용프로그램을 대표하는 첫 페이지 첫 ViewModel인 TwitterSearchViewModel을 소개하겠습니다. 이 ViewModel은 몇 가지 간단한 관찰가능한 UI요소들인 사용자 입력 필드(field)인 searchTerm과 Twitter API로 
HTTP를 통하여 질의할 때 조회 버튼이 사용불가능 하도록하는 Boolean 관찰자인 isSearching으로 나타내보여집니다. Silverlight에서 ICommand버튼에 바인드 하듯이, 이 것 역시 조회 기능을 조회버튼에 바인드 할 수 있습니다(참조 Figure 7).


Figure 7 The TwitterSearchViewModel

  1. /// <reference path="..//intellisense.js" />
  2. /*globals $ application ko localStorage SearchResultsViewModel TweetViewModel*/
  3. function TwitterSearchViewModel() {
  4.   /// <summary>
  5.   /// A ViewModel for searching Twitter for a given term.
  6.   /// </summary>
  7.   // --- properties
  8.   this.template = "twitterSearchView";
  9.   this.isSearching = ko.observable(false);
  10.   this.searchTerm = ko.observable("");
  11.   // --- public functions
  12.   this.search = function () {
  13.     /// <summary>
  14.     /// Searches Twitter for the current search term.
  15.     /// </summary>
  16.     // implementation detailed later in this article ...
  17.   };
  18. }


The template property of the ViewModel names the View that’s associated with this ViewModel. This View is described as a jQuery template within the index.html file:
ViewModel 템플릿 요소인 View를 ViewModel의 조합으로 이름하였습니다. 이 VIew는 index.html파일에 jQuery템블릿으로 기술되어진 것입니다:


  1. <script type=text/x-jquery-tmpl" charset="utf-8" id="twitterSearchView" 
  2.   <div>
  3.     <form data-bind="submit: search">
  4.       <input type="text"
  5.         data-bind="value: searchTerm, valueUpdate: 'afterkeydown'" />
  6.       <button type="submit"
  7.         data-bind="enable: searchTerm().length > 0 &&
  8.           isSearching() == false">Go</button> 
  9.     </form>     
  10.   </div>
  11. </script>



If you add an instance of the TwitterSearchViewModel to the application ViewModel stack, the application now shows the first page, as shown in Figure 8.
만약 TwitterSearchViewModel의 객체를 응용프로그램 ViewModel 더미(stack)에 추가했다면 Figure 8에서 보듯이 으용프로그램은 첫페이지를 보여주게 됩니다.



The TwitterSearchViewModel Rendered via the twitterSearchView Template
Figure 8 twitterSearchView템플릿을 통한 TwitterSearchViewModel 표현

Posted by gofly

댓글을 달아 주세요

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)을 권하고 싶습니다.


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


아!!!! 아래 추천좀 눌러주심 감사하겠습니다...쿄쿄쿄
좋은 하루 되세요!!!!^^

Posted by gofly

댓글을 달아 주세요