[ASP.NET] ASP.NET Web API 2 로 시작하기 (C#)

 

 

다음 글을 한글로 바꾸었습니다.

Getting Started with ASP.NET Web API 2 (C#)

많이 부족합니다. 참고만 하셔요 ~ ^^

 

ASP.NET Web API 2 로 시작하기 (C#)

by Mike Wasson

Download Completed Project

HTTP 는 단순히 web Page 만을 serving 하기 위한 프로토콜이 아닙니다. 서비스와 데이터를 노출하기 위한 API 를 구축하는데 강력한 Platform 이기도 합니다.

HTTP 는 간단하고 유연하며 Ubiquitous 합니다. 머리에 떠오르는 거의 모든 Platform 에는 HTTP Library 를 포함하고 있으므로 HTTP Service 는 브라우져를 포함한 모바일 기기, 전통적인 데스크탑 어플리케이션에 이르기 까지 광범위한 클라이언트까지 연결할 수 있습니다.

ASP.NET Web API 는 .NET Framework 기반위에 Web API 를 구축하기 위한 Framework 입니다., 이 Tutorial 에서는 ASP.NET Web API 를 사용하여 Product 목록을 반환하는 Web API 를 생성합니다.

 

이 Tutorial 에서 사용 된 Software Version

• Visual Studio 2017

• Web API 2

 

Web API Project 생성하기

이 Tutorial 에서 ASP.NET Web API 를 사용하여 Product 목록을 반환하는 Web API를 생성합니다.

Front-end web page 는 jQuery 를 사용하여 결과를 표시합니다.

 

Visual Studio 를 시작하고 Start Page 에서 New Project 를 선택합니다. 또는 File Menu 에서 New 를 선택하고 Project 를 선택합니다.

Template 창에서 설치된 Templates 를 선택하고 Visual C# Node 롤 확장합니다. Visual C# 아래에 Web 을 선택합니다. Project Template 목록에서 ASP.NET Web Application 을 선택합니다. Project Name 에 "ProductsApp" 을 입력하고 OK 를 클릭합니다.

 

새 ASP.NET Project 대화상자에서 Empty template(빈 템플릿)을 선택합니다.

"Add folders and core reference for"("폴더 및 핵심 참조 추가") 하단의 Web API 를 Check 하고 OK 를 클릭합니다.

[!주목] "Web API" Template 을 사용하여 Web API Project 를 생성할 수도 있습니다.. Web API template 는 ASP.NET MVC 를 사용하여 API Help Page 를 제공합니다. MVC 없이 Web API 를 작성하는 모습을 보여주기 위해 Empty template 을 사용합니다. 일반적으로 Web API 를 사용하기위해 ASP.NET MVC 를 알필요는 없습니다.

 

Model 추가하기

Model 은 application 에서 Data 를 표현하는 객체입니다. ASP.NET Web API 는 model 을 JSON, XML 또는 다른 형식으로 자동적으로 직렬화해줍니다. 그리고 직렬화된 data를 HTTP Response Message 의 Body 를 작성합니다. Client 가 직렬화된 형식을 읽을 수 있다면 Object 를 Deserialize 할 수 있습니다. 대부분의 Client 들은 XML 이나 JSON 을 Parsing 할 수 있습니다. 게다가 HTTP request Message 의 Accept header 를 설정하여 원하는 format을  표시하는 것도 가능합니다.

 

그럼, Product 를 나타내는 간단한 Model 을 생성하는 것 부터 시작해 봅시다.

Solution Explorer 가 아직 보이지 않는다면, View Menu를 클릭하여 Solution Explorer 를 선택하십시오.

 

Models 폴더를 마우스 오른쪽 버튼으로 클릭합니다. 나타난 Context Menu 에서 Add 를 선택하고 Class 를 선택합니다.

 

Class Name 으로 "Product"를 지정합니다. Product Class 에 다음 Properties 를 추가합니다.

namespace ProductsApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }
}

 

 

Controller 추가하기

Web API 에서 Controller 는 HTTP Request 를 처리하는 객체입니다. 이제 Product 목록 이나 지정한 ID 의 단일 Product 정보를 반환하는 Controller 를 추가합니다.

[!주목] ASP.NET MVC 를 사용해 본적이 있다면 이미 controller 에 익숙할 것입니다. Web API Controller 는 MVC Controller와 유사하지만 Controller class 대신에 ApiController Class 를 상속합니다.

 

Solution Explorer 에서  Controller folder 를 마우스 오른쪽 버튼을 이용하여 클릭합니다. Add 를 선택한 후 Controller 를 선택합니다.

 

Add Scaffold 대화상자에서 Web API Controller - Empty 를 선택합니다. Add 를 클릭합니다.

 

Add Controller 대화상자에서 Controller 이름을 ProductsController 로 지정합니다. Add 를 클릭합니다.

 

Scaffolding 은 Controller folder 에 ProductsController.cs 라는 이름의 파일을 생성합니다.

[!주목]Controller 파일들을 Controllers 라는 이름의 folder 에 넣지 않아도 됩니다. Folder 이름은 단지 Source 파일들을 구성하기위한 편리한 방법중 하나입니다.

파일이 아직 열려있지 않다면, 파일을 더블클릭하여 엽니다. 열린 파일의 코드를 다음의 코드로 대체합니다.

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    public class ProductsController : ApiController
    {
        Product[] products = new Product[]
        {
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
        };

        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }

        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
    }
}

 

예제를 단순하게 유지하기 위해서 Products 는 Controller Class 내부에 고정된 배열로 저장되어 있습니다. 물론 실제 application 에서는 database 나 다른 외부의 data source 로 부터 Query 하여 사용합니다.

 

Controller 에서는 Product 를 반환하는 두가지 Method 를 정의합니다.

• GetAllProducts Method 는 Ienumerable<Product> 형식의 Product 전체 목록을 반환합니다.
• GetProduct Method 는 ID 로  단일 Product 를 조회합니다.

 

작동하는 Web API 는 이게 다입니다. Controller 의 각 Method 는 하나 이상의 URL 과 일치합니다 :

 

Controller Method	URI
GetAllProducts	/api/products
GetProduct	/api/products/id

 

GetProduct Method URL 의 id 는 placeholder 입니다. 얘룰 둘어 ID 가 5인 product 를 조회하는 URL 는 api/products/5.입니다.

Web API 가 HTTP request 를 Controller method 로 Route하는 방법에 대해서는 Routing in ASP.NET Web API 를 참조하십시오.

 

javascript 와 jQuery 로 web API 호출하기.

이번에는 Web API 를 호출하기위해 AJAX 를 사용하는 HTML page 를 추가합니다. AJAX 호출을 만들고 반환된 결과로 Page 를 Update  하기 위해서 jQuery 를 사용합니다.

 

솔루션 탐색기에서 Project를 오른쪽 마우스 버튼을 클릭하여 Add 를 선택하고 New Item 을 선택합니다.

 

New Item 대화상자에서 Visual C# 에 포함된 Web node 를 선택하고 HTML Page item 을 선택합니다. Page 의 이름은 "Index.html" 으로 지정합니다.

 

이 파일의 모든 내용을 다름 내용으로 바꿉니다 : 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Product App</title>
</head>
<body>

  <div>
    <h2>All Products</h2>
    <ul id="products" />
  </div>
  <div>
    <h2>Search by ID</h2>
    <input type="text" id="prodId" size="5" />
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
  </div>

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
  <script>
    var uri = 'api/products';

    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
              // Add a list item for the product.
              $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
          });
    });

    function formatItem(item) {
      return item.Name + ': $' + item.Price;
    }

    function find() {
      var id = $('#prodId').val();
      $.getJSON(uri + '/' + id)
          .done(function (data) {
            $('#product').text(formatItem(data));
          })
          .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
          });
    }
  </script>
</body>
</html>

 

jQuery 를 가져오는 방법에는 몇가지방법이 있습니다. 이 예제에서는 Microsoft Ajax CDN 을 사용했습니다. http://jquery.com/ 에서도 다운로드 받을수 있으며, ASP.NET "Web API" project template 에도 jQuery 가 포함되어 있습니다.

 

Product 목록 가져오기

product 목록을 조회해오기 위해서 "/api/products" 로 HTTP GET Request 를 보냅니다.

jQuery getJSON function 은 AJAX request 를 보냅니다. response 에는 JSON 객체의 배열이 포함되어 있습니다. done function 은 request 가 성공했을 때 호출될 callback 을 지정합니다. callback 에서 product 정보를 가지고 DOM 을 update 합니다.

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(apiUrl)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
});

 

ID 로 Product 정보 가져오기

ID 로 Product 정보를 가져오기 위해서는 "/api/products/id" 로 HTTP GET request 를 보냅니다. 여기서 id 는 Product ID 입니다.

function find() {
    var id = $('#prodId').val();
    $.getJSON(apiUrl + '/' + id)
        .done(function (data) {
            $('#product').text(formatItem(data));
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
        });
}

 

AJAX request 를 보내기 위해 이전과 동일하게 getJSON 을 호출합니다. 하지만 이번에는 request URI 에 ID 를 포함시킵니다. 이 request 로 부터 전달된 response 는 단일 Product 로 표현된 JSON 입니다.

 

Application 실행하기

 

F5 를 눌러 application debugging 을 시작합니다. 다음과 같이 web page 가 보여야 합니다 :

 

ID 로 Project 를 조회하기 위해서는 ID 를 입력하고 Search 버튼을 클릭합니다.

 

유효하지 않은 ID 를 입력하면 server 는 HTTP 오류를 반환합니다.

 

F12 를 사용하여 HTTP Request 와 Response 내용 보기

HTTP Service 를 이용하는 작업을 할 때 HTTP Request 와 Response Message 를 확인하는 것은 매우 유용합니다. Internet Explorer 9의 F12 개발자도구를 사용하면 이 작업이 가능하다. Internet Explorer 9 에서 F12를 툴러 도구를 엽니다. Network Tab 을 클릭하고  Start Capturing 을 누릅니다. 이제 Web page 로 돌아가서 F5를 눌러 Web page 를 새로고침합니다. Internet Explorer 는 browser 와 web server 간의 traffic 을 capture 합니다. summery page 는 page 에서 일어난  모든 network traffic 을 보여줍니다.

 

상대경로 URI 중에서 "api/products/" 항목을 찾으십시요. 이 항목을 선택하고 Go to detail view 를 클릭합니다. 상세 View 에 request 와 response 의 header 와 body 를 볼 수 있는 tab 이 있습니다. 예를 들어, Request headers Tab 을 클릭하면 Accept header 속에 client 가 요청한 "application/json" 을 확인할 수 있습니다.

 

Response body tab 을 클릭하면 product list 가 어떻게 JSON 으로 Serialized 되어 있는지 확인할 수 있습니다. 다른 browser 들고 유사한 기능을 가지고 있습니다. 다른 유용한 Tool 로는 Fiddler 가 있으며 web debugging proxy 입니다. Fiddler 를 사용하여 HTTP traffic 을 볼 수 있으며. HTTP request 를 재구성하여 request 의 HTTP header 를 완벽하게 제어할 수 있게 해줍니다.

 

Azure 에서 이 App 실행하기

완성된 site 가 실제 구동하는 web app 으로 실행되는 모습을 보는 것은 어떻습니까? 다음 버튼을 간단히 click 하는 것만으로 여러분의 Azure 계정에 앱의 전체 버전을 배포하는 것이 가능합니다.

Azure 에 이 Solution 을 배포하려면 Azure 계정이 필요합니다. 계정을 가지고 있지 않다면, 다음과 같은 옵션을 사용할 수 있습니다 :

• 무료로 Azure 계정을 여십시오 - 유료 Azure service 를 사용할 수 있는 credits 를 얻습니다. 모두 사용한 후에도 계정을 유지할 수 있으며 무료 Azure service 를 사용할 수 있습니다.
• MSDN 구독자 혜택 활성화 - 여러분이 가진 MSDN subscription 은 매월 유료 Azure service 를 사용할 수 있는 credits 을 지급합니다.

 

다음 단계

• POST, PUT, DELETE 를 지원하고 Database 를 작성하는 HTTP service 에 대한 더 많은 예제는  Using Web API 2 with Entity Framework 6 를 참조하십시오.
• HTTP service 상에서 작동하는 유동적인 반응형 Web application 을 생성에 대한 자세한 내용은 ASP.NET Single Page Application 를 참조하십시오.

• Azure App Service 에 Visual Studio web project 를 배포하는 방법에 대한 정보는 Create an ASP.NET web app in Azure App Service 를 참조하십시오.

 

 

 

 

 

행복한 고수되셔요~

 

woojja ))*

\\\\\\\\\\\\\\\\

 

PS : OnoNote 에 썼다가 이쪽으로 옮기니 보여지는 글씨들이 맘에 안드네요. ㅡㅡ;

불편하셔도 이해해주셔요. ^^;