단일 페이지 응용 프로그램: KnockoutJS 템플릿Single Page Application: KnockoutJS template

Mike Wassonby Mike Wasson

녹아웃 MVC 템플릿은 ASP.NET 및 Web Tools 2012.2의 일부입니다.The Knockout MVC Template is part of ASP.NET and Web Tools 2012.2

다운로드 ASP.NET 및 Web Tools 2012.2Download ASP.NET and Web Tools 2012.2

ASP.NET 및 Web Tools 2012.2 업데이트에는 ASP.NET MVC 4 용 SPA (단일 페이지 응용 프로그램) 템플릿이 포함 되어 있습니다.The ASP.NET and Web Tools 2012.2 update includes a Single-Page Application (SPA) template for ASP.NET MVC 4. 이 템플릿은 대화형 클라이언트 쪽 웹 앱을 신속 하 게 빌드할 수 있도록 설계 되었습니다.This template is designed to get you started quickly building interactive client-side web apps.

SPA (단일 페이지 응용 프로그램)는 단일 HTML 페이지를 로드 한 다음 새 페이지를 로드 하는 대신 페이지를 동적으로 업데이트 하는 웹 응용 프로그램에 대 한 일반적인 용어입니다."Single-page application" (SPA) is the general term for a web application that loads a single HTML page and then updates the page dynamically, instead of loading new pages. 초기 페이지를 로드 한 후 SPA는 AJAX 요청을 통해 서버와 통신 합니다.After the initial page load, the SPA talks with the server through AJAX requests.

AJAX는 새로운 것은 아니지만 오늘날에는 크고 정교한 SPA 응용 프로그램을 쉽게 빌드하고 유지 관리할 수 있는 JavaScript 프레임 워크가 있습니다.AJAX is nothing new, but today there are JavaScript frameworks that make it easier to build and maintain a large sophisticated SPA application. 또한 HTML 5와 CSS3을 통해 풍부한 Ui를 보다 쉽게 만들 수 있습니다.Also, HTML 5 and CSS3 are making it easier to create rich UIs.

시작 하려면 SPA 템플릿이 샘플 "할 일 목록" 응용 프로그램을 만듭니다.To get you started, the SPA template creates a sample "To-do list" application. 이 자습서에서는 템플릿 둘러보기를 살펴보겠습니다.In this tutorial, we'll take a guided tour of the template. 먼저 할 일 목록 응용 프로그램 자체를 확인 하 고 작동 하는 기술 부분을 검토 합니다.First we'll look at the To-do list application itself, then examine the technology pieces that make it work.

새 SPA 템플릿 프로젝트 만들기Create a New SPA Template Project

요구 사항:Requirements:

  • 웹 용 Visual Studio 2012 또는 Visual Studio Express 2012Visual Studio 2012 or Visual Studio Express 2012 for Web
  • ASP.NET 웹 도구 2012.2 업데이트를 업데이트 합니다.ASP.NET Web Tools 2012.2 update. 여기에 업데이트를 설치할 수 있습니다.You can install the update here.

Visual Studio를 시작 하 고 시작 페이지에서 새 프로젝트 를 선택 합니다.Start Visual Studio and select New Project from the Start page. 또는 파일 메뉴에서 새로 만들기 , 프로젝트를 차례로 선택 합니다.Or, from the File menu, select New and then Project.

템플릿 창에서 설치 된 템플릿 을 선택 하 고 C# 시각적 노드를 확장 합니다.In the Templates pane, select Installed Templates and expand the Visual C# node. 시각적 개체 C# 에서 을 선택 합니다.Under Visual C#, select Web. 프로젝트 템플릿 목록에서 ASP.NET MVC 4 웹 응용 프로그램을 선택 합니다.In the list of project templates, select ASP.NET MVC 4 Web Application. 프로젝트 이름을 지정하고 확인을 클릭합니다.Name the project and click OK.

새 프로젝트 마법사에서 단일 페이지 응용 프로그램을 선택 합니다.In the New Project wizard, select Single Page Application.

F5를 눌러 애플리케이션을 빌드 및 실행합니다.Press F5 to build and run the application. 응용 프로그램을 처음 실행 하면 로그인 화면이 표시 됩니다.When the application first runs, it displays a login screen.

"등록" 링크를 클릭 하 고 새 사용자를 만듭니다.Click the "Sign up" link and create a new user.

로그인 한 후 응용 프로그램은 두 개의 항목이 포함 된 기본 Todo 목록을 만듭니다.After you log in, the application creates a default Todo list with two items. "Todo 목록 추가"를 클릭 하 여 새 목록을 추가할 수 있습니다.You can click "Add Todo list" to add a new list.

목록의 이름을 바꾸고, 항목을 목록에 추가 하 고, 체크 인 합니다.Rename the list, add items to the list, and check them off. 또한 항목을 삭제 하거나 전체 목록을 삭제할 수 있습니다.You can also delete items or delete an entire list. 변경 내용은 서버에 있는 데이터베이스에 자동으로 유지 됩니다 (실제로 응용 프로그램을 실행 하 고 있기 때문에이 시점에서 LocalDB).The changes are automatically persisted to a database on the server (actually LocalDB at this point, because you are running the application locally).

SPA 템플릿의 아키텍처Architecture of the SPA Template

이 다이어그램에서는 응용 프로그램의 기본 구성 요소를 보여 줍니다.This diagram shows the main building blocks for the application.

서버 쪽에서 ASP.NET MVC는 HTML을 사용 하 고 폼 기반 인증도 처리 합니다.On the server side, ASP.NET MVC serves the HTML and also handles forms-based authentication.

ASP.NET Web API은 가져오기, 만들기, 업데이트 및 삭제를 포함 하 여 ToDoLists 및 ToDoItems와 관련 된 모든 요청을 처리 합니다.ASP.NET Web API handles all requests that relate to the ToDoLists and ToDoItems, including getting, creating, updating and deleting. 클라이언트는 JSON 형식의 Web API를 사용 하 여 데이터를 교환 합니다.The client exchanges data with Web API in JSON format.

EF (Entity Framework)는 O/RM 계층입니다.Entity Framework (EF) is the O/RM layer. 개체 지향 세계 ASP.NET와 기본 데이터베이스 간에 중재.It mediates between the object-oriented world of ASP.NET and the underlying database. 데이터베이스는 LocalDB를 사용 하지만 web.config 파일에서이를 변경할 수 있습니다.The database uses LocalDB but you can change this in the Web.config file. 일반적으로 로컬 개발용으로 LocalDB를 사용 하 고 EF code-first 마이그레이션을 사용 하 여 서버의 SQL database에 배포 합니다.Typically you would use LocalDB for local development and then deploy to a SQL database on the server, using EF code-first migration.

클라이언트 쪽에서, 녹아웃 .js 라이브러리는 AJAX 요청에서 페이지 업데이트를 처리 합니다.On the client side, the Knockout.js library handles page updates from AJAX requests. 녹아웃은 데이터 바인딩을 사용 하 여 페이지를 최신 데이터와 동기화 합니다.Knockout uses data binding to synchronize the page with the latest data. 이렇게 하면 JSON 데이터를 안내 하는 코드를 작성 하 여 DOM을 업데이트 하지 않아도 됩니다.That way, you don't have to write any of the code that walks through the JSON data and updates the DOM. 대신 데이터를 표시 하는 방법을 녹아웃 하는 선언적 특성을 HTML에 배치 합니다.Instead, you put declarative attributes in the HTML that tell Knockout how to present the data.

이 아키텍처의 큰 장점은 프레젠테이션 계층을 응용 프로그램 논리와 분리 하는 것입니다.A big advantage of this architecture is that it separates the presentation layer from the application logic. 웹 페이지를 표시 하는 방법에 대해 알지 못해도 웹 API 부분을 만들 수 있습니다.You can create the Web API portion without knowing anything about how your web page will look. 클라이언트 쪽에서 해당 데이터를 나타내는 "모델 보기"를 만들고 뷰 모델에서 녹아웃을 사용 하 여 HTML에 바인딩합니다.On the client side, you create a "view model" to represent that data, and the view model uses Knockout to bind to the HTML. 이렇게 하면 뷰 모델을 변경 하지 않고 HTML을 쉽게 변경할 수 있습니다.That lets you easily change the HTML without changing the view model. (나중에 약간의 녹아웃을 살펴보겠습니다.)(We'll look at Knockout a bit later.)

모델Models

Visual Studio 프로젝트에서 모델 폴더는 서버 쪽에서 사용 되는 모델을 포함 합니다.In the Visual Studio project, the Models folder contains the models that are used on the server side. 클라이언트 쪽에도 모델이 있습니다. 여기에 대해서도 살펴보겠습니다.(There are also models on the client side; we'll get to those.)

TodoItem, TodoListTodoItem, TodoList

Entity Framework Code First에 대 한 데이터베이스 모델입니다.These are the database models for Entity Framework Code First. 이러한 모델에는 서로를 가리키는 속성이 있습니다.Notice that these models have properties that point to each other. ToDoList는 ToDoItems의 컬렉션을 포함 하 고 각 ToDoItem는 부모 ToDoList에 대 한 참조를 포함 합니다.ToDoList contains a collection of ToDoItems, and each ToDoItem has a reference back to its parent ToDoList. 이러한 속성을 탐색 속성 이라고 하며, 할 일 대 다 관계의 할 일 목록 및 할 일 항목을 나타냅니다.These properties are called navigation properties, and they represent the one-to-many relation a to-do list and its to-do items.

또한 ToDoItem 클래스는 [ForeignKey] 특성을 사용 하 여 ToDoListId ToDoList 테이블의 외래 키 임을 지정 합니다.The ToDoItem class also uses the [ForeignKey] attribute to specify that ToDoListId is a foreign key into the ToDoList table. 이렇게 하면 데이터베이스에 foreign key 제약 조건이 추가 됩니다.This tells EF to add a foreign-key constraint to the database.

[ForeignKey("TodoList")]
public int TodoListId { get; set; }
public virtual TodoList TodoList { get; set; }

TodoItemDto, TodoListDtoTodoItemDto, TodoListDto

이러한 클래스는 클라이언트에 전송 되는 데이터를 정의 합니다.These classes define the data that will be sent to the client. "DTO"은 "데이터 전송 개체"를 나타냅니다."DTO" stands for "data transfer object." DTO는 엔터티가 JSON으로 serialize 되는 방법을 정의 합니다.The DTO defines how the entities will be serialized into JSON. 일반적으로 Dto를 사용 하는 몇 가지 이유가 있습니다.In general, there are several reasons to use DTOs:

  • Serialize 되는 속성을 제어 합니다.To control which properties are serialized. DTO에는 도메인 모델의 속성 하위 집합이 포함 될 수 있습니다.The DTO can contain a subset of the properties from the domain model. 중요 한 데이터를 숨기 거 나 단순히 보내는 데이터의 양을 줄이기 위해 보안상의 이유로이 작업을 수행할 수 있습니다.You might do this for security reasons (to hide sensitive data) or simply to reduce the amount of data that you send.
  • 데이터의 모양 (예:)을 변경 하 여 더 복잡 한 데이터 구조를 평면화 합니다.To change the shape of the data – e.g. to flatten a more complex data structure.
  • 비즈니스 논리를 DTO으로 유지 합니다 (문제 분리).To keep any business logic out of the DTO (separation of concerns).
  • 어떤 이유로 도메인 모델을 직렬화 할 수 없는 경우If your domain models cannot be serialized for some reason. 예를 들어 순환 참조는 개체를 serialize 할 때 문제를 일으킬 수 있습니다. 웹 API에서이 문제를 처리 하는 방법이 있습니다 ( 순환 개체 참조 처리참조). 하지만 DTO를 사용 하면 문제가 해결 되지 않습니다.For example, circular references can cause problems when you serialize an object There are ways to handle this problem in Web API (see Handling Circular Object References); but using a DTO simply avoids the problem altogether.

SPA 템플릿에서 Dto는 도메인 모델과 동일한 데이터를 포함 합니다.In the SPA template, the DTOs contains the same data as the domain models. 그러나 탐색 속성의 순환 참조를 방지 하 고 일반 DTO 패턴을 보여 주므로 여전히 유용 합니다.However, they are still useful because they avoid circular references from the navigation properties, and they demonstrate the general DTO pattern.

AccountModels.csAccountModels.cs

이 파일에는 사이트 멤버 자격에 대 한 모델이 포함 되어 있습니다.This file contains models for site membership. UserProfile 클래스는 멤버 자격 데이터베이스의 사용자 프로필에 대 한 스키마를 정의 합니다.The UserProfile class defines the schema for user profiles in the membership DB. 이 경우 유일한 정보는 사용자 ID와 사용자 이름입니다. 이 파일의 다른 모델 클래스를 사용 하 여 사용자 등록 및 로그인 양식을 만듭니다.(In this case, the only information is the user ID and the user name.) The other model classes in this file are used to create the user registration and login forms.

Entity FrameworkEntity Framework

SPA 템플릿에서 EF Code First를 사용 합니다.The SPA template uses EF Code First. Code First 개발에서 코드에 모델을 먼저 정의한 다음 EF는 모델을 사용 하 여 데이터베이스를 만듭니다.In Code First development, you define the models first in code, and then EF uses the model to create the database. 또한 기존 데이터베이스 (Database First)와 함께 EF를 사용할 수 있습니다.You can also use EF with an existing database (Database First).

모델 폴더의 TodoItemContext 클래스는 DbContext에서 파생 됩니다.The TodoItemContext class in the Models folder derives from DbContext. 이 클래스는 모델과 EF 간의 "붙이기"를 제공 합니다.This class provides the "glue" between the models and EF. TodoItemContext ToDoItem 컬렉션과 TodoList 컬렉션을 보유 합니다.The TodoItemContext holds a ToDoItem collection and a TodoList collection. 데이터베이스를 쿼리하려면 이러한 컬렉션에 대해 LINQ 쿼리를 작성 하기만 하면 됩니다.To query the database, you simply write a LINQ query against these collections. 예를 들어 "Alice" 사용자에 대 한 모든 할 일 목록을 선택할 수 있는 방법은 다음과 같습니다.For example, here is how you can select all of the to-do lists for user "Alice":

TodoItemContext db = new TodoItemContext();
IEnumerable<TodoList> lists = 
    from td in db.TodoLists where td.UserId == "Alice" select td;

컬렉션에 새 항목을 추가 하거나 항목을 업데이트 하거나 컬렉션에서 항목을 삭제 하 고 변경 내용을 데이터베이스에 유지할 수도 있습니다.You can also add new items to the collection, update items, or delete items from the collection, and persist the changes to the database.

ASP.NET Web API 컨트롤러ASP.NET Web API Controllers

ASP.NET Web API에서 컨트롤러는 HTTP 요청을 처리 하는 개체입니다.In ASP.NET Web API, controllers are objects that handle HTTP requests. 앞서 언급 했 듯이 SPA 템플릿에서는 Web API를 사용 하 여 ToDoListToDoItem 인스턴스에서 CRUD 작업을 사용 하도록 설정 합니다.As mentioned, the SPA template uses Web API to enable CRUD operations on ToDoList and ToDoItem instances. 컨트롤러는 솔루션의 Controllers 폴더에 있습니다.The controllers are located in the Controllers folder of the solution.

  • TodoController: 할 일 항목에 대 한 HTTP 요청을 처리 합니다.TodoController: Handles HTTP requests for to-do items
  • TodoListController: 할 일 목록에 대 한 HTTP 요청을 처리 합니다.TodoListController: Handles HTTP requests for to-do lists.

웹 API가 컨트롤러 이름에 대 한 URI 경로와 일치 하므로 이러한 이름은 중요 합니다.These names are significant, because Web API matches the URI path to the controller name. 웹 API가 컨트롤러에 HTTP 요청을 라우팅하는 방법을 알아보려면 ASP.NET Web API의 라우팅을 참조 하세요.)(To learn how Web API routes HTTP requests to controllers, see Routing in ASP.NET Web API.)

ToDoListController 클래스를 살펴보겠습니다.Let's look at the ToDoListController class. 단일 데이터 멤버를 포함 합니다.It contains a single data member:

private TodoItemContext db = new TodoItemContext();

TodoItemContext는 앞에서 설명한 대로 EF와 통신 하는 데 사용 됩니다.The TodoItemContext is used to communicate with EF, as described earlier. 컨트롤러의 메서드는 CRUD 작업을 구현 합니다.The methods on the controller implement the CRUD operations. Web API는 다음과 같이 클라이언트의 HTTP 요청을 컨트롤러 메서드로 매핑합니다.Web API maps HTTP requests from the client to controller methods, as follows:

HTTP 요청HTTP Request Controller 메서드Controller Method DescriptionDescription
GET /api/todoGET /api/todo GetTodoLists 할 일 목록 컬렉션을 가져옵니다.Gets a collection of to-do lists.
GET/api/todo/idGET /api/todo/id GetTodoList ID 별로 할 일 목록을 가져옵니다.Gets a to-do list by ID
PUT/api/todo/idPUT /api/todo/id PutTodoList 할 일 목록을 업데이트 합니다.Updates a to-do list.
POST /api/todoPOST /api/todo PostTodoList 새 할 일 목록을 만듭니다.Creates a new to-do list.
/Api/todo/ID 삭제DELETE /api/todo/id DeleteTodoList 할 일 목록을 삭제 합니다.Deletes a TODO list.

일부 작업의 Uri에는 ID 값에 대 한 자리 표시 자가 포함 되어 있습니다.Notice that the URIs for some operations contain placeholders for the ID value. 예를 들어 ID가 42 인 목록에서 목록을 삭제 하려면 URI가 /api/todo/42됩니다.For example, to delete a to-list with an ID of 42, the URI is /api/todo/42.

CRUD 작업을 위해 Web API를 사용 하는 방법에 대 한 자세한 내용은 Crud 작업을 지 원하는 WEB Api 만들기를 참조 하세요.To learn more about using Web API for CRUD operations, see Creating a Web API that Supports CRUD Operations. 이 컨트롤러에 대 한 코드는 매우 간단 합니다.The code for this controller is fairly straightforward. 몇 가지 흥미로운 사항은 다음과 같습니다.Here are some interesting points:

  • GetTodoLists 메서드는 LINQ 쿼리를 사용 하 여 로그인 한 사용자의 ID를 기준으로 결과를 필터링 합니다.The GetTodoLists method uses a LINQ query to filter the results by the ID of the logged-in user. 이렇게 하면 사용자는 자신이 속한 데이터만 볼 수 있습니다.That way, a user only sees the data that belongs to him or her. 또한 Select 문은 ToDoList 인스턴스를 TodoListDto 인스턴스로 변환 하는 데 사용 됩니다.Also, notice that a Select statement is used to convert the ToDoList instances into TodoListDto instances.
  • PUT 및 POST 메서드는 데이터베이스를 수정 하기 전에 모델 상태를 확인 합니다.The PUT and POST methods check the model state before modifying the database. Modelstate. IsValid 가 false 이면 이러한 메서드는 HTTP 400, 잘못 된 요청을 반환 합니다.If ModelState.IsValid is false, these methods return HTTP 400, Bad Request. 모델 유효성 검사에서 Web API의 모델 유효성 검사에 대해 자세히 알아보세요.Read more about model validation in Web API at Model Validation.
  • 또한 컨트롤러 클래스는 [권한 부여] 특성으로 데코 레이트 됩니다.The controller class is also decorated with the [Authorize] attribute. 이 특성은 HTTP 요청이 인증 되었는지 여부를 확인 합니다.This attribute checks whether the HTTP request is authenticated. 요청이 인증 되지 않은 경우 클라이언트는 HTTP 401, 권한 없음을 수신 합니다.If the request is not authenticated, the client receives HTTP 401, Unauthorized. 인증 및 권한 부여의인증에 대 한 자세한 내용은 ASP.NET Web API을 참조 하세요.Read more about authentication at Authentication and Authorization in ASP.NET Web API.

TodoController 클래스는 TodoListController와 매우 비슷합니다.The TodoController class is very similar to TodoListController. 가장 큰 차이점은 클라이언트는 각 할 일 목록과 함께 할 일 항목을 가져오기 때문에 GET 메서드를 정의 하지 않는다는 것입니다.The biggest difference is that it does not define any GET methods, because the client will get the to-do items along with each to-do list.

MVC 컨트롤러 및 뷰MVC Controllers and Views

MVC 컨트롤러는 솔루션의 Controllers 폴더에도 있습니다.The MVC controllers are also located in the Controllers folder of the solution. HomeController 응용 프로그램에 대 한 기본 HTML을 렌더링 합니다.HomeController renders the main HTML for the application. Home 컨트롤러에 대 한 보기는 Views/Home/Index. cshtml에 정의 되어 있습니다.The view for the Home controller is defined in Views/Home/Index.cshtml. 홈 보기는 사용자의 로그인 여부에 따라 서로 다른 콘텐츠를 렌더링 합니다.The Home view renders different content depending on whether the user is logged in:

@if (@User.Identity.IsAuthenticated)
{
    // ....
}

사용자가 로그인 하면 주 UI가 표시 됩니다.When users are logged in, they see the main UI. 그렇지 않으면 로그인 패널이 표시 됩니다.Otherwise, they see the login panel. 이 조건부 렌더링은 서버 쪽에서 발생 합니다.Note that this conditional rendering happens on the server side. 클라이언트 쪽—에서 중요 한 콘텐츠를 숨기지 마세요. http 응답에서 보내는 모든 항목은 원시 http 메시지를 감시 하는 사람에 게 표시 됩니다.Never try to hide sensitive content on the client side—anything that you send in an HTTP response is visible to someone who is watching the raw HTTP messages.

클라이언트 쪽 JavaScript 및 녹아웃Client-Side JavaScript and Knockout.js

이제 응용 프로그램의 서버 쪽에서 클라이언트로 전환 해 보겠습니다.Now let's turn from the server side of the application to the client. SPA 템플릿은 jQuery와 녹아웃의 조합을 사용 하 여 부드러운 대화형 UI를 만듭니다.The SPA template uses a combination of jQuery and Knockout.js to create a smooth, interactive UI. 녹아웃은 HTML을 데이터에 쉽게 바인딩할 수 있도록 하는 JavaScript 라이브러리입니다.Knockout.js is a JavaScript library that makes it easy to bind HTML to data. 녹아웃은 "모델-뷰-ViewModel" 이라는 패턴을 사용 합니다.Knockout.js uses a pattern called "Model-View-ViewModel."

  • 이 모델은 도메인 데이터 (할 일 목록 및 할 일 항목)입니다.The model is the domain data (ToDo lists and ToDo items).
  • 뷰는 HTML 문서입니다.The view is the HTML document.
  • 뷰 모델은 모델 데이터를 포함 하는 JavaScript 개체입니다.The view-model is a JavaScript object that holds the model data. 뷰 모델은 UI의 코드 추상화입니다.The view-model is a code abstraction of the UI. HTML 표현에 대해 알지 못합니다.It has no knowledge of the HTML representation. 대신 "할 일 항목 목록"과 같은 뷰의 추상 기능을 나타냅니다.Instead, it represents abstract features of the view, such as "a list of ToDo items".

뷰가 뷰 모델에 대 한 데이터 바인딩된 뷰입니다.The view is data-bound to the view-model. 뷰 모델에 대 한 업데이트는 뷰에 자동으로 반영 됩니다.Updates to the view-model are automatically reflected in the view. 바인딩은 다른 방향에도 적용 됩니다.Bindings work the other direction as well. DOM의 이벤트 (예: 클릭)는 보기 모델의 함수에 대 한 데이터 바인딩된 함수로, AJAX 호출을 트리거합니다.Events in the DOM (such as clicks) are data-bound to functions on the view model, which trigger AJAX calls.

SPA 템플릿에서는 클라이언트 쪽 JavaScript를 세 개의 계층으로 구성 합니다.The SPA template organizes the client-side JavaScript into three layers:

  • todo. datacontext: AJAX 요청을 보냅니다.todo.datacontext.js: Sends AJAX requests.
  • todo. node.js: 모델을 정의 합니다.todo.model.js: Defines the models.
  • todo. viewmodel: 뷰 모델을 정의 합니다.todo.viewmodel.js: Defines the view model.

이러한 스크립트 파일은 솔루션의 스크립트/앱 폴더에 있습니다.These script files are located in the Scripts/app folder of the solution.

todo. datacontext 는 Web API 컨트롤러에 대 한 모든 AJAX 호출을 처리 합니다.todo.datacontext handles all AJAX calls to the Web API controllers. (로그인에 대 한 AJAX 호출은 ajaxlogin의 다른 곳에서 정의 됩니다.)(The AJAX calls for logging in are defined elsewhere, in ajaxlogin.js.)

todo. node.js 목록에 대 한 클라이언트 쪽 (브라우저) 모델을 정의 합니다.todo.model.js defines the client-side (browser) models for the to-do lists. TodoItem 및 todoList의 두 가지 모델 클래스가 있습니다.There are two model classes: todoItem and todoList.

모델 클래스의 속성 중 상당수는 "ko-kr" 형식입니다.Many of the properties in the model classes are of type "ko.observable". 관찰 가능 개체는 녹아웃이 마법을 수행 하는 방법입니다.Observables are how Knockout does its magic. 녹아웃 설명서에서: 관찰 가능은 "구독자에 게 변경 내용을 알릴 수 있는 JavaScript 개체"입니다.From the Knockout documentation: An observable is a "JavaScript object that can notify subscribers about changes." 관찰 가능 값이 변경 되 면 해당 관찰 가능 개체에 바인딩된 HTML 요소가 모두 업데이트 됩니다.When the value of an observable changes, Knockout updates any HTML elements that are bound to those observables. 예를 들어 todoItem에는 title 및 isDone 속성에 대 한 관찰 가능 개체가 있습니다.For example, todoItem has observables for the title and isDone properties:

self.title = ko.observable(data.title);
self.isDone = ko.observable(data.isDone);

코드에서 관찰 가능 개체를 구독할 수도 있습니다.You can also subscribe to an observable in code. 예를 들어, todoItem 클래스는 "isDone" 및 "title" 속성의 변경 내용을 구독 합니다.For example, the todoItem class subscribes to changes in the "isDone" and "title" properties:

saveChanges = function () {
    return datacontext.saveChangedTodoItem(self);
};

// Auto-save when these properties change
self.isDone.subscribe(saveChanges);
self.title.subscribe(saveChanges);

모델 보기View Model

뷰 모델은 todo. viewmodel에 정의 되어 있습니다.The view model is defined in todo.viewmodel.js. 뷰 모델은 응용 프로그램이 HTML 페이지 요소를 도메인 데이터에 바인딩하는 중심점입니다.The view model is the central point where the application binds the HTML page elements to the domain data. SPA 템플릿에서 뷰 모델은 관찰 가능한 todoLists 배열을 포함 합니다.In the SPA template, the view model contains an observable array of todoLists. 뷰 모델의 다음 코드는 바인딩을 적용 하도록 녹아웃에 지시 합니다.The following code in the view model tells Knockout to apply the bindings:

ko.applyBindings(window.todoApp.todoListViewModel);

HTML 및 데이터 바인딩HTML and Data Binding

페이지의 기본 HTML은 Views/Home/Index. cshtml에 정의 되어 있습니다.The main HTML for the page is defined in Views/Home/Index.cshtml. 데이터 바인딩을 사용 하기 때문에 HTML은 실제로 렌더링 되는 항목에 대 한 템플릿만 아닙니다.Because we are using data-binding, the HTML is only a template for what actually gets rendered. 녹아웃은 선언적 바인딩을 사용 합니다.Knockout uses declarative bindings. 요소에 "데이터 바인딩" 특성을 추가 하 여 페이지 요소를 데이터에 바인딩합니다.You bind page elements to data by adding a "data-bind" attribute to the element. 다음은 녹아웃 설명서에서 가져온 매우 간단한 예제입니다.Here is a very simple example, taken from the Knockout documentation:

<p>There are <span data-bind="text: myItems().count"></span> items<p>

이 예제에서 녹아웃은 <범위> 요소의 내용을 myItems.count()값으로 업데이트 합니다.In this example, Knockout updates the contents of the <span> element with the value of myItems.count(). 이 값이 변경 될 때마다 녹아웃은 문서를 업데이트 합니다.Whenever this value changes, Knockout updates the document.

녹아웃은 여러 가지 다양 한 바인딩 형식을 제공 합니다.Knockout provides a number of different binding types. SPA 템플릿에 사용 되는 바인딩 중 일부는 다음과 같습니다.Here are some of the bindings used in the SPA template:

  • foreach: 루프를 반복 하 고 목록의 각 항목에 동일한 태그를 적용할 수 있습니다.foreach: Lets you iterate through a loop and apply the same markup to each item in the list. 이는 할 일 목록 및 할 일 항목을 렌더링 하는 데 사용 됩니다.This is used to render the to-do lists and to-do items. Foreach내에서 바인딩은 목록의 요소에 적용 됩니다.Within the foreach, the bindings are applied to the elements of the list.
  • visible: 표시 여부를 전환 하는 데 사용 됩니다.visible: Used to toggle visibility. 컬렉션이 비어 있을 때 태그를 숨기 거 나 오류 메시지를 표시 합니다.Hide markup when a collection is empty, or make the error message visible.
  • value: 폼 값을 채우는 데 사용 됩니다.value: Used to populate form values.
  • 클릭: 뷰 모델의 함수에 click 이벤트를 바인딩합니다.click: Binds a click event to a function on the view model.

CSRF 방지 보호Anti-CSRF Protection

CSRF (교차 사이트 요청 위조)는 악의적인 사이트에서 사용자가 현재 로그인 한 취약 한 사이트로 요청을 보내는 공격입니다.Cross-Site Request Forgery (CSRF) is an attack where a malicious site sends a request to a vulnerable site where the user is currently logged in. CSRF 공격을 방지 하기 위해 ASP.NET MVC는 요청 확인 토큰이 라고도 하는 위조 방지 토큰을 사용 합니다.To help prevent CSRF attacks, ASP.NET MVC uses anti-forgery tokens, also called request verification tokens. 서버는 임의로 생성 된 토큰을 웹 페이지에 배치 한다는 것을 알 수 있습니다.The idea is that the server puts a randomly generated token into a web page. 클라이언트에서 서버로 데이터를 전송 하는 경우 요청 메시지에이 값을 포함 해야 합니다.When the client submits data to the server, it must include this value in the request message.

위조 방지 토큰은 동일한 원본 정책으로 인해 악의적인 페이지가 사용자의 토큰을 읽을 수 없기 때문에 작동 합니다.Anti-forgery tokens work because the malicious page cannot read the user's tokens, due to same-origin policies. 동일한 원본 정책을 통해 서로 다른 두 사이트에서 호스팅되는 문서는 서로의 내용에 액세스할 수 없습니다.(Same-origin policies prevent documents hosted on two different sites from accessing each other's content.)

ASP.NET MVC는 위조 방지 클래스 및 [ValidateAntiForgeryToken] 특성을 통해 위조 방지 토큰에 대 한 기본 제공 지원을 제공 합니다.ASP.NET MVC provides built-in support for anti-forgery tokens, through the AntiForgery class and the [ValidateAntiForgeryToken] attribute. 현재이 기능은 Web API에 기본 제공 되지 않습니다.Currently, this functionality is not built into Web API. 그러나 SPA 템플릿에는 Web API에 대 한 사용자 지정 구현이 포함 되어 있습니다.However, the SPA template includes a custom implementation for Web API. 이 코드는 솔루션의 Filters 폴더에 있는 ValidateHttpAntiForgeryTokenAttribute 클래스에서 정의 됩니다.This code is defined in the ValidateHttpAntiForgeryTokenAttribute class, which is located in the Filters folder of the solution. Web API에서 CSRF 방지에 대해 자세히 알아보려면 csrf (교차 사이트 요청 위조) 공격 방지를 참조 하세요.To learn more about anti-CSRF in Web API, see Preventing Cross-Site Request Forgery (CSRF) Attacks.

결론Conclusion

SPA 템플릿은 최신 대화형 웹 응용 프로그램을 신속 하 게 작성할 수 있도록 설계 되었습니다.The SPA template is designed to get you started quickly writing modern, interactive web applications. 이 도구는 녹아웃 .js 라이브러리를 사용 하 여 데이터 및 응용 프로그램 논리에서 프레젠테이션 (HTML 태그)을 분리 합니다.It uses the Knockout.js library to separate presentation (HTML markup) from the data and application logic. 하지만 녹아웃은 SPA를 만드는 데 사용할 수 있는 유일한 JavaScript 라이브러리가 아닙니다.But Knockout is not the only JavaScript library you can use to create a SPA. 다른 옵션을 살펴보려면 커뮤니티에서 만든 SPA 템플릿을살펴보세요.If you want to explore some other options, take a look at the community-created SPA templates.