Part 6-4-5. ASP.NET Core 둘러보기 : Hello WebAPI

 

 

🔖 ASP.NET Core 둘러보기

 

 지난 시간에는 .NET CORE의 Razor Page 프로젝트를 분석하며 빈 프로젝트인 HelloEmpty 프로젝트에 분석한 내용을 따라치며 적용하는 시간을 가져보았다. Razor Page는 MVC가 아닌 MVVM을 통해 페이지와 클래스가 서로 1:1 매핑이 되어 있어 index.cshtml 내부에 asp-controller와 asp-action을 적어주지 않아도 됐었다. 이번 시간에는 일전에 Razor Page를 보고 분석한 뒤 HelloEmpty 프로젝트에 적용한 것과 같이 WebAPI 프로젝트를 분석하여 적용해보자. 

 

---

 

🧩 Hello WebAPI

 

  먼저 이전 시간과 마찬가지로 기존에 Razor Page 프로젝트를 따라하기 위해 만들었던 Pages 폴더를 지워 삭제하도록 한다. WebAPI 프로젝트는 controllers 폴더를 사용하기 때문에, 이와 동일하게 작업하기 위해 마찬가지로 controllers 폴더를 만들어 주도록 하자. 

 

 

---

 

 이 후, WebAPI 프로젝트를 시작프로그램으로 설정하여 실행 할 경우, 아래와 같이 웹 페이지가 보는 아무런 UI가 없이 글자만 나오는 웹 페이지를 볼 수 있다. 이는 WebAPI는 M과 C만 사용하여 View가 없는 형태여서 이렇게 출력되는 것을 알 수 있다. 

 

 

---

 

 HelloEmpty 프로젝트에서 controllers 폴더를 생성해 준 뒤, 새 항목의 API 컨트롤러 - 비어있음을 새롭게 만들어주자. 이 후 코드는 아래와 같이 작성하자.

 

using HelloEmpty.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace HelloEmpty.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {
        [HttpGet]
        public List<HelloMessage> Get()
        {
            List<HelloMessage> message = new List<HelloMessage>();
            message.Add(new HelloMessage { Message = "Hello Web API 1" });
            message.Add(new HelloMessage { Message = "Hello Web API 2" });
            message.Add(new HelloMessage { Message = "Hello Web API 3" });
            return message;
        }
    }
}

 

 코드에서는 별 다른 내용이 없다. List로 HelloMessage를 만들어 준뒤, 메시지를 적어준 후 이를 반환하는 것이 전부이다. 이제 program.cs를 수정하자.

 

// MVC
// M (Model) - 데이터 (원자재)
// V (View) - UI (인테리어)
// C (Controller) - Controller (액션)

// Razor Pages
// M
// V
// MVVM (Model-View-ViewModel)

// Web API
// M
// C
// View 없음!

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
// MVC 실행 시
// builder.Services.AddControllersWithViews();
// Razor Page 실행 시
// builder.Services.AddRazorPages();
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
// builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();

    // app.UseSwagger();
    // app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

// MVC 실행 시
//app.MapControllerRoute(
//    name: "default",
//    pattern: "{controller=Home}/{action=Index}/{id?}");
// Razor 실행 시
// app.MapRazorPages();
app.MapControllers();

app.Run();

 

 위와 같이 Programs.cs 스크립트를 MVC에서 RazorPage로, RazorPage에서 WebAPI 형태로 바꿔주도록 하자. 이제 실행해보도록 하자.

 

 

 엥? 실행해보면 페이지를 찾을 수 없는데 왜냐하면 애당초 시작하는 인덱스 페이지가 없어서 그렇다. 따라서 api를 만들 때 우리가 생성해준 값을 적용해보자. 링크 뒤에 /api/values를 작성하면 다음과 같이 변경되는 것을 볼 수 있다.

 

 

 이제 이 상황에서 개발자 도구(F12)를 눌러 네트워크 탭을 선택한 다음 새로고침 하면 우리가 코드로 작성했던 데이터의 내용이 JSON으로 보내지는 것을 볼 수 있다.

 

---

 

 MVC와 RazorPage와 다르게 WebAPI를 사용할 때 가장 핵심적인 내용은 View를 사용하지 않는다는 것이다. 그렇다면 왜 뷰를 사용하지 않을까? 우리가 홈페이지랑 통신하는 것이 아니라, 유니티랑 통신을 하게 된다고 하면 유니티가 UI의 역할을 자처하기 때문에 만들어주지 않아도 되는 것이다. 즉 View를 없애긴 했지만 단순히 HTML을 사용하는 것이 아닌 Unity와의 통신을 통해 유니티를 View로 사용하겠다는 뜻이다.

 

 하지만 우리가 랭킹 시스템을 만든다고 하면, 이렇게 WebAPI를 바탕으로 서버에서 데이터만 가져 온뒤 우리 마음대로 데이터를 가공하여 보여주면 되는 것이다. 포우나 Op.gg 랭커 조회처럼 😎

 

 그렇다면 여태 MVC랑 Razor를 왜 배웠냐~ 생각할 수 있겠지만, 때때로 웹 홈페이지를 만들어야 할 때에는 이 방법을 사용해야 하기 때문에 마찬가지로 최소한으로는 알 필요가 있다.