Part 6-4-3. ASP.NET Core 둘러보기 : Hello MVC #2

공부/인프런 - Rookiss

Part 6-4-3. ASP.NET Core 둘러보기 : Hello MVC #2

셩잇님 2024. 8. 26. 12:46

🔖 ASP.NET Core 둘러보기

지난 시간에는 .NET CORE의 MVC 프로젝트를 바탕으로 HelloEmpty를 채워나가며 MVC 패턴 방식이 어떻게 동작하는지 살펴보았다. 따라서 Controller와 Models, Views 폴더를 만들고 각자 해당하는 스크립트를 생성하여 작성하였다. 이번 시간에는 Views 폴더 산하에 있는 Index.cshtml을 이어서 작성하여 학습하도록 하자.

🧩 HelloMVC

Index.cshtml의 기존 내용은 모두 삭제하고 MVC 프로젝트에 있는 Index.cshtml을 참고하도록 하자. 해당 파일을 열어보면 우리가 일전에 배웠던 HTML 태그가 들어있는 것을 볼 수 있다.

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

해당 코드를 자세히 살펴보면 완전히 HTML은 아니지만, HTML과 C#이 섞여있는 것을 볼 수 있다. 이를 이해하고 Empty의 Index를 채워나가도록 하자.

 @model HelloEmpty.Models.HelloMessage

 <html>
	 <head>
		 <title>Hello MVC!</title>
	 </head>
	 <body>
		 <h1>@Model.Message</h1>
		 <hr />
		 <h2>@ViewBag.Noti</h2>
	 </body>
 </html>

골뱅이(@)를 이용하여 model을 HelloMessage를 사용한다는 것을 명시해주고 기존에 배웠던 html의 구조(head, body)를 통해 내용을 작성해준다. 타이틀은 Hello MVC로 작성하고, body에는 @model.Message와 @viewBag.Noti를 작성한다. 골뱅이는 C#과 관련된 코드이며, 이를 통해 우리가 이전 시간에 작성한 부분과 치환하는 것이다. 즉 @Model.Message는 "Welcome to ASP.NET Core!"를 나타내며, ViewBag.Noti는 "Input message and click submit"를 나타낸다. 이어서 코드를 작성하도록 하자.

 @model HelloEmpty.Models.HelloMessage

 <html>
	 <head>
		 <title>Hello MVC!</title>
	 </head>
	 <body>
		 <h1>@Model.Message</h1>
		 <hr />
		 <h2>@ViewBag.Noti</h2>

		 <form asp-controller="Home" asp-action="Index" method="post">
			 <label asp-for="Message">Enter Message</label>
			 <br />
			 <input type="text" asp-for="Message" />
			 <br />
			 <button type="submit">Submit</button>
		 </form>
	 </body>
 </html>

먼저 form을 이용하여 버튼을 만들어 줄 것이다. asp-controller와 action, for는 당장 이해하지 않아도 된다. 해당 기능은 공식적인 HTML이 아니며, ASP.NET Framework에서 만들어진 것이다. 컨트롤러는 "Home"을 작성하고, 액션은 "Index"로 작성해 준다. 하지만 여기서 언급한 인덱스는 기존에 작성한 Index가 아니므로 별도의 인덱스를 생성해야 한다.

이어서 asp-for를 통해 UI를 만들어 줄 것이다. "Enter Message"를 통해 메시지를 입력하라는 문구를 작성하고, 사용자의 입력(Input)은 text로 설정하여 준다. 마지막으로 button 타입을 submit으로 작성하여 ok 버튼까지 완성시켜준다. 그렇게 하면 코드 작성은 끝이지만, Razor의 View는 Import 해주는 영역이 따로 있어 Views 폴더 산하에 'Razor 뷰 가져오기' 유형의 파일을 새로 만들어 준 뒤 아래와 같이 작성한다.

@using HelloEmpty
@using HelloEmpty.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

이어서 컨트롤러로 가서 또 다른 Index를 만들어 주도록 하자.

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

namespace HelloEmpty.Controllers
{
    public class HomeController : Controller
    {
    	...

        // POST를 처리하는 Index
        [HttpPost]
        public IActionResult Index(HelloMessage obj)
        {
            ViewBag.Noti = "Message Changed";
            return View(obj);
        }
    }
}

cshtml에서 필요한 Index를 위와 같이 작성해주도록 하자. 해당 데이터는 POST를 처리하기 때문에 [httpPost]를 처리하는 Attribue를 추가해야 하며, 함수 내부에서는 일전에 선언한 Noti가 Message Changed로 변하도록 설정하고 이를 반환하도록 하자.

마지막으로 Empty 프로젝트의 Program 스크립트로 돌아가 환경설정을 진행하도록 하자. MapControllerRoute와 AddControllersWithViews등 다른 기능들도 추가해야 정상적으로 동작한다.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

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.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

위와 같이 모든 내용을 다 작성하고 HelloEmpty 프로젝트를 시작 프로젝트로 설정하면, 이제 여태까지 작성하였던 내용들이 출력되는 것을 볼 수 있다.

🧩 MVC의 장점이자 단점

MVC 패턴은 모델, 뷰, 컨트롤러를 각기 분리해 관리하는 것을 이번 시간에 알 수 있었다. 그렇지만 이것이 MVC의 장점이기도 하지만 장점이다 단점이다. 왜냐하면 너무 많이 분리를 해놓았기 때문에 디버깅할 때 힘이들기 때문이다. 브레이크 포인트를 통해 디버깅을 하더라도 컨트롤러에 들어갔다가, 뷰가 어떻게 동작하는지 보고, 뷰는 또 모델을 참조해야 하기 때문에 모델을 살펴봐야 한다. 이렇게 처리해야 하기 떄문에 여러 스크립트를 열어보아야 하는 귀찮음도 동반한다. 지금은 단순히 테스트를 위해 한 페이지를 만들었음에도 불구하고 복잡한 것을 알 수 있다. 만약 이것이 테스트 페이지가 아닌, 네이버 같은 대형 페이지일 경우 과연 MVC로 관리하는게 이득일까? 라는 의문이 들 수 있다.

'공부 > 인프런 - Rookiss' 카테고리의 다른 글

Part 6-4-5. ASP.NET Core 둘러보기 : Hello WebAPI (1)	2024.08.28
Part 6-4-4. ASP.NET Core 둘러보기 : Hello Razor Pages (0)	2024.08.27
Part 6-4-2. ASP.NET Core 둘러보기 : Hello MVC #1 (0)	2024.08.24
Part 6-4-1. ASP.NET Core 둘러보기 : 환경설정 (0)	2024.08.24
Part 6-3-3. 고급 C# 문법 : LINQ #2 (0)	2024.08.23

현재글Part 6-4-3. ASP.NET Core 둘러보기 : Hello MVC #2

셩잇님의 잡동사니