[ASP.NET CORE] 무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #5: Layout

이번 글에서는 “Medcare” HTML 무료 Template 기반의 MVC Web Application에서 WebSite의 공통 Layout 요소인 _Layout.cshtml 파일을 제작하는 방법을 통해 코드의 효율성과 유지보수성을 높이는 과정을 자세히 설명합니다.

“Medcare” template을 이용한 MVC Web Application 구축, 다섯 번째 입니다. 지난 4편에서는 각 메뉴의 기본적인 뼈대인 Controller와 해당 controller 의 index ActionMethod 에 대응하는index.cshtml View 파일을 만드는 과정을 살펴봤습니다. 이제 웹사이트의 기본적인 구조를 갖추었으니, 이번 편에서는 모든 페이지에 공통으로 적용될 Layout 을 template 에서 어떻게 가져와서 _Layout.cshtml 파일을 구성하는지 살펴보겠습니다.

1. 공통 부분 :

MVC Web Application에서는 일반적으로 _Layout.cshtml이라는 파일을 사용하여 웹사이트의 공통 Layout 을 정의합니다. 이 파일은 Web page의 전체적인 구조를 담고 있으며, 각 페이지의 내용이 삽입될 영역을 지정하는 역할을 합니다. 필요에 따라서 여러 Layout page 를 만들어 놓고 각 View 마다 다르게 설정할 수도 있습니다.

  • Views 폴더 아래 Shared 폴더를 확인하거나 없다면 생성합니다.
  • Shared 폴더에 Razor View Page (_Layout.cshtml)를 확인합니다. 없으면 생성합니다.

제가 생성한 Project 에는 이미 Shared 폴더에 _Layout.cshtml 파일이 있으므로 더블클릭으로 파일을 엽니다.Source 가 길어 복잡해 보이지만 Editor 화면의 Line Number 우측의 화살표를 클릭하면 축소되어 내용을 감출 수가 있습니다. 그럼 아래와 같이 간략하게 보기 쉽게 됩니다.

크게 head tag 와 body tag 로 나뉘고, 다시 body tag 내에는 header, div, footer 이렇게 세부분으로 나뉩니다. 이 부분이 핵심입니다.

잘 기억해 두세요.

이 번에는 “Medcare” 의 HTML Source 를 살펴보겠습니다.

Source 를 편하게 보기 위해서 Visual Studio Code 로 열어서 보겠습니다. Download 받아 압축을 푼 폴더를 마우스 오른쪽 클릭을 하면 나타나는 Context menu 에서 “Code(으)로 열기” 메뉴를 클릭합니다.

아래와 같이 VS Code 가 열리고 해당 폴더 내의 파일 구조가 표시됩니다.

index.html  이 첫 페이지지만 너무 길어서 보기가 어려울 수 있으니 about-us.html 파일을 열어보겠습니다. menu 의 about 에 해당하는 페이지 입니다.

페이지 내용은 아래와 같습니다.

보기 편하도록  Visual Studio 2022 에서와 같이 Line Number 오론쪽의 화살표를 클릭하여 내용을 축소해 봅니다.

어떻습니까? 구조가 익숙하죠?

다시 Visual Studio 2022 의 모습을 보죠.

Header 와 Footer 그리고 그 사이에 내용이 배치되어 유사한 구조라는 걸 알 수 있습니다. 다른 메뉴의 화면들은 어떤지 살펴볼까요?

Department.html
Docters.htmlContact.html

모두 같은 구조를 가지고 있습니다.

사각형의 내의 Source 내용을 제외한 부분들이 거의 대부분 동일하다는 말은 WebSite 에서 공통적으로 사용할 _Layout.cshtml 에 넣으면 모든 Page 에서 재 사용할 수 있다는 의미입니다. 그리고 Source 적용 후에 header 와 footer 를 별도의 코드로 분리하여 관리할 수 있습니다.

2. 각 화면의 영역 :

이제 공통 부분을 찾았으니 차이가 나는 각 화면의 부분을 어떻게 적용하는지에 대해서 살펴보겠습니다.

html source 에서 사각형의 내용들을 어떻게 처리하느냐를 이야기하는 건데요. Rendering  된다라고 이야기합니다.

_Layout.cshtml 파일에서 각 페이지의 내용이 Rendering될 위치를 지정해야 합니다. 이는 @RenderBody() 라는 Helper Method를 사용하여 간단하게 처리할 수 있습니다. 이 Method는 각 View page의 HTML 콘텐츠를 해당 위치에 삽입해 줍니다.

아래 처럼 _Layout.cshtml 파일을 보면 사각형 내의 @RenderBody() 를 보실 수 있습니다.

<div> tag 내에 다시 <main> tag 가 있지만 “Medcare” Source  에는 <main> tag 가 없으므로 아래와 같이 간단히 구성하도록 하겠습니다.

<body>
    <header>
    </header>

    <div class="container">
        @RenderBody()
    </div>

    <footer>
    </footer>
</body>

3. _Layout.cshtml(공통 레이아웃) 파일:

위 내용을 바탕으로 _Layout.cshtml 파일을 수정해 보도록 하겠습니다. 여러 html page 중에서 어떤 파일을 선택해도 좋지만 제일 간단하다고 생각되는 about-us.html 파일을 가지고 진행하겠습니다.

사각형 내의 내용을 제외한 내용을 _Layout.cshtml 에 복사해 넣고 사각형 부분의 내용은 아래 코드로 대치하겠습니다.

    <div class="container">
        @RenderBody()
    </div>

그럼 아래와 같습니다.

Code Snippet
  1. <!doctype html>
  2. <html lang=”en”>
  3. <head>
  4.     <!– Required meta tags –>
  5.     <meta charset=”utf-8″>
  6.     <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
  7.     <link rel=”icon” href=”img/favicon.png” type=”image/png”>
  8.     <title>Medcare Medical</title>
  9.     <!– Bootstrap CSS –>
  10.     <link rel=”stylesheet” href=”css/bootstrap.css”>
  11.     <link rel=”stylesheet” href=”css/themify-icons.css”>
  12.     <link rel=”stylesheet” href=”css/flaticon.css”>
  13.     <link rel=”stylesheet” href=”vendors/fontawesome/css/all.min.css”>
  14.     <link rel=”stylesheet” href=”vendors/owl-carousel/owl.carousel.min.css”>
  15.     <link rel=”stylesheet” href=”vendors/animate-css/animate.css”>
  16.     <!– main css –>
  17.     <link rel=”stylesheet” href=”css/style.css”>
  18.     <link rel=”stylesheet” href=”css/responsive.css”>
  19. </head>
  20. <body>
  21.  
  22.     <!–================Header Menu Area =================–>
  23.     <header class=”header_area”>
  24.         <div class=”top_menu row m0″>
  25.             <div class=”container”>
  26.                 <div class=”float-left”>
  27.                     <a class=”dn_btn” href=”mailto:medical@example.com”><i class=”ti-email”></i>medical@example.com</a>
  28.                     <span class=”dn_btn”> <i class=”ti-location-pin”></i>Find our Location</span>
  29.                 </div>
  30.                 <div class=”float-right”>
  31.                     <ul class=”list header_social”>
  32.                         <li><a href=”#”><i class=”ti-facebook”></i></a></li>
  33.                         <li><a href=”#”><i class=”ti-twitter-alt”></i></a></li>
  34.                         <li><a href=”#”><i class=”ti-linkedin”></i></a></li>
  35.                         <li><a href=”#”><i class=”ti-skype”></i></a></li>
  36.                         <li><a href=”#”><i class=”ti-vimeo-alt”></i></a></li>
  37.                     </ul>
  38.                 </div>
  39.             </div>
  40.         </div>
  41.         <div class=”main_menu”>
  42.             <nav class=”navbar navbar-expand-lg navbar-light”>
  43.                 <div class=”container”>
  44.                     <!– Brand and toggle get grouped for better mobile display –>
  45.                     <a class=”navbar-brand logo_h” href=”index.html”><img src=”img/logo.png” alt=””></a>
  46.                     <button class=”navbar-toggler” type=”button” data-toggle=”collapsedata-target=”#navbarSupportedContentaria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”>
  47.                         <span class=”icon-bar”></span>
  48.                         <span class=”icon-bar”></span>
  49.                         <span class=”icon-bar”></span>
  50.                     </button>
  51.                     <!– Collect the nav links, forms, and other content for toggling –>
  52.                     <div class=”collapse navbar-collapse offset” id=”navbarSupportedContent”>
  53.                         <ul class=”nav navbar-nav menu_nav ml-auto”>
  54.                             <li class=”nav-item”><a class=”nav-link” href=”index.html”>Home</a></li>
  55.                             <li class=”nav-item”><a class=”nav-link” href=”about-us.html”>About</a></li>
  56.                             <li class=”nav-item”><a class=”nav-link” href=”department.html”>Department</a></li>
  57.                             <li class=”nav-item”><a class=”nav-link” href=”doctors.html”>Doctors</a></li>
  58.                             <li class=”nav-item submenu dropdown”>
  59.                                 <a href=”#” class=”nav-link dropdown-toggle” data-toggle=”dropdownrole=”button” aria-haspopup=”true” aria-expanded=”false”>Blog</a>
  60.                                 <ul class=”dropdown-menu”>
  61.                                     <li class=”nav-item”><a class=”nav-link” href=”blog.html”>Blog</a></li>
  62.                                     <li class=”nav-item”><a class=”nav-link” href=”single-blog.html”>Blog Details</a></li>
  63.                                     <li class=”nav-item”><a class=”nav-link” href=”element.html”>element</a></li>
  64.                                 </ul>
  65.                             </li>
  66.                             <li class=”nav-item”><a class=”nav-link” href=”contact.html”>Contact</a></li>
  67.                         </ul>
  68.                     </div>
  69.                 </div>
  70.             </nav>
  71.         </div>
  72.     </header>
  73.     <!–================Header Menu Area =================–>
  74.  
  75.  
  76.     <div class=”container”>
  77.         @RenderBody()
  78.     </div>
  79.  
  80.     <!– start footer Area –>
  81.     <footer class=”footer-area area-padding-top”>
  82.         <div class=”container”>
  83.             <div class=”row”>
  84.                 <div class=”col-lg-2 col-sm-6 single-footer-widget”>
  85.                     <h4>Top Products</h4>
  86.                     <ul>
  87.                         <li><a href=”#”>Managed Website</a></li>
  88.                         <li><a href=”#”>Manage Reputation</a></li>
  89.                         <li><a href=”#”>Power Tools</a></li>
  90.                         <li><a href=”#”>Marketing Service</a></li>
  91.                     </ul>
  92.                 </div>
  93.                 <div class=”col-lg-2 col-sm-6 single-footer-widget”>
  94.                     <h4>Quick Links</h4>
  95.                     <ul>
  96.                         <li><a href=”#”>Jobs</a></li>
  97.                         <li><a href=”#”>Brand Assets</a></li>
  98.                         <li><a href=”#”>Investor Relations</a></li>
  99.                         <li><a href=”#”>Terms of Service</a></li>
  100.                     </ul>
  101.                 </div>
  102.                 <div class=”col-lg-2 col-sm-6 single-footer-widget”>
  103.                     <h4>Features</h4>
  104.                     <ul>
  105.                         <li><a href=”#”>Jobs</a></li>
  106.                         <li><a href=”#”>Brand Assets</a></li>
  107.                         <li><a href=”#”>Investor Relations</a></li>
  108.                         <li><a href=”#”>Terms of Service</a></li>
  109.                     </ul>
  110.                 </div>
  111.                 <div class=”col-lg-2 col-sm-6 single-footer-widget”>
  112.                     <h4>Resources</h4>
  113.                     <ul>
  114.                         <li><a href=”#”>Guides</a></li>
  115.                         <li><a href=”#”>Research</a></li>
  116.                         <li><a href=”#”>Experts</a></li>
  117.                         <li><a href=”#”>Agencies</a></li>
  118.                     </ul>
  119.                 </div>
  120.                 <div class=”col-lg-4 col-md-6 single-footer-widget”>
  121.                     <h4>Newsletter</h4>
  122.                     <p>You can trust us. we only send promo offers,</p>
  123.                     <div class=”form-wrap” id=”mc_embed_signup”>
  124.                         <form target=”_blank” action=”https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01″
  125.                               method=”get” class=”form-inline”>
  126.                             <input class=”form-control” name=”EMAIL” placeholder=”Your Email Address” onfocus=”this.placeholder = ”” onblur=”this.placeholder = ‘Your Email Address'”
  127.                                    required=”” type=”email” />
  128.                             <button class=”click-btn btn btn-default”>
  129.                                 <i class=”ti-arrow-right”></i>
  130.                             </button>
  131.                             <div style=”position: absolute; left: -5000px;”>
  132.                                 <input name=”b_36c4fd991d266f23781ded980_aefe40901a” tabindex=”-1″ value=”” type=”text” />
  133.                             </div>
  134.  
  135.                             <div class=”info”></div>
  136.                         </form>
  137.                     </div>
  138.                 </div>
  139.             </div>
  140.             <div class=”row footer-bottom d-flex justify-content-between”>
  141.                 <p class=”col-lg-8 col-sm-12 footer-text m-0″>
  142.                     <!– Link back to Colorlib can’t be removed. Template is licensed under CC BY 3.0. –>
  143.                     Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class=”fa fa-heart” aria-hidden=”true”></i> by <a href=”https://colorlib.com” target=”_blank”>Colorlib</a>
  144.                     <!– Link back to Colorlib can’t be removed. Template is licensed under CC BY 3.0. –>
  145.                 </p>
  146.                 <div class=”col-lg-4 col-sm-12 footer-social”>
  147.                     <a href=”#”><i class=”fab fa-facebook-f”></i></a>
  148.                     <a href=”#”><i class=”fab fa-twitter”></i></a>
  149.                     <a href=”#”><i class=”fab fa-dribbble”></i></a>
  150.                     <a href=”#”><i class=”fab fa-linkedin”></i></a>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </footer>
  155.     <!– End footer Area –>
  156.  
  157.     <!– Optional JavaScript –>
  158.     <!– jQuery first, then Popper.js, then Bootstrap JS –>
  159.     <script src=”js/jquery-2.2.4.min.js”></script>
  160.     <script src=”js/popper.js”></script>
  161.     <script src=”js/bootstrap.min.js”></script>
  162.     <script src=”js/stellar.js”></script>
  163.     <script src=”vendors/owl-carousel/owl.carousel.min.js”></script>
  164.     <script src=”js/jquery.ajaxchimp.min.js”></script>
  165.     <script src=”js/waypoints.min.js”></script>
  166.     <script src=”js/mail-script.js”></script>
  167.     <script src=”js/contact.js”></script>
  168.     <script src=”js/jquery.form.js”></script>
  169.     <script src=”js/jquery.validate.min.js”></script>
  170.     <script src=”js/mail-script.js”></script>
  171.     <script src=”js/theme.js”></script>
  172. </body>
  173. </html>

_Layout.cshtml 파일을 수정했지만 WebSite 에서 사용하는 javascript, StyleSheet, Image 파일들을 복사하고 경로를 잡아주는 과정이 진행되어야 합니다.

4. Image, Javascript, StyleSheet :

“Medcare” Template Source 에서 아래 그림과 같이 “css, fonts, img, js, vendors” 폴더를 복사합니다.

그리고 Visual Studio 2022 의 Solution Explorer (솔루션 탐색기)에서 wwwroot를  오른쪽 click  하여  “Open  Folder  in  File  Explorer(파일탐색기에서  폴더열기)” 를 cliek  합니다.File Explorer (파일탐색기)가 열리면  wwwroot 폴더에 복사한 파일을 붙여 넣습니다.결과는 다음과 같습니다.

5. 실행 :

지금까지 작업이 잘 되었는지 확인해 보겠습니다. 

Debugging Button 을 Click 하거나 F5 Button 을 눌러 실행시켜 봅니다.

잘 실행되십니까? index page 도 잘 표시되고 favicon 도 표시되네요. 메뉴를 Click 하시고 싶겠지만 메뉴의 link 를 수정하지 않아 표시할 수 없다는 오류가 나올겁니다. 지난 시간에 확인했던 것 처럼 주소창에 “https://localhost:7154/About” 를 입력하시면 해당 메뉴로 이동할 겁니다.

마무리

이번 편에서는 “Medcare” template 기반의 MVC Web Application에 공통 Layout인 _Layout.cshtml 파일을 수정하여 Layout 을 적용하는 과정을 살펴봤습니다. 깊이 살펴보아야 할 기본 내용은 많습니만 진행과정을 단순하게 하여 WebSite 제작에 쉽게 접근하도록 구성해 봤습니다. 내용이 길어 Header와 Footer를 적용하고, CSS와 JavaScript 파일을 분리하는 과정은 다음 편에서 살펴보겠습니다. 

Happy GoSu ~

WooGong ))*

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

[ASP.NET Core] .NET 8 ASP.NET Core MVC Start Point, Program.cs 완벽 해부: 서비스 등록부터 요청 파이프라인 구성까지!

NET 8 ASP.NET Core MVC 프로젝트의 핵심인 Program.cs 파일을 분석합니다. Builder를 통한 서비스 등록, HTTP Request Handler Pipeline 구성(예외 처리, HTTPS Redirection, Static File, Routing, Authorization), default route 정의 및 Application 실행 과정을 설명합니다.

[ASP.NET Core] .NET 8 ASP.NET Core MVC 시작점, Program.cs 완벽 해부: 서비스 등록부터 요청 파이프라인 구성까지!

지난 1편에서 우리는 Visual Studio 2022와 Visual Studio Code를 사용하여 .NET 8 기반의 ASP.NET Core MVC 웹 애플리케이션 프로젝트를 생성해보았습니다. 오늘은 그 프로젝트의 핵심 엔진이라고 할 수 있는 Program.cs 파일을 자세히 들여다보며, 각 코드가 어떤 역할을 하고, .NET 8의 어떤 개념과 연결되는지 쉽게 설명해보겠습니다.

1. 전체 Program.cs

전체 Program.cs 파일의 내용은 다음과 같습니다.

Code Snippet
  1. var builder = WebApplication.CreateBuilder(args);
  2.  
  3. // Add services to the container.
  4. builder.Services.AddControllersWithViews();
  5.  
  6. var app = builder.Build();
  7.  
  8. // Configure the HTTP request pipeline.
  9. if (!app.Environment.IsDevelopment())
  10. {
  11.     app.UseExceptionHandler(“/Home/Error”);
  12.     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
  13.     app.UseHsts();
  14. }
  15.  
  16. app.UseHttpsRedirection();
  17. app.UseStaticFiles();
  18.  
  19. app.UseRouting();
  20.  
  21. app.UseAuthorization();
  22.  
  23. app.MapControllerRoute(
  24.     name: “default”,
  25.     pattern: “{controller=Home}/{action=Index}/{id?});
  26.  
  27. app.Run();

 

2. 각 코드 분석

그럼 첫 줄부터 살펴보죠.

var builder = WebApplication.CreateBuilder(args);

가장 먼저 등장하는 이 코드는 Web Application을 구축하기 위한 Builder Pattern(빌더 패턴)을 활용하는 부분입니다. WebApplication.CreateBuilder(args)WebApplicationBuilder라는 특별한 객체를 생성하는데, 이 Builder를 통해 Web Application에 필요한 다양한 Service와 Middleware를 설정하고 구성할 수 있습니다. 마치 레고 블록을 하나씩 쌓아 올리듯, Builder를 사용하여 Application의 기능을 만들어나가는 것이죠. 여기서 args는 Command Line argument를 담고 있는 배열인데, Application 실행 시 외부에서 전달되는 설정을 처리하는 데 사용될 수 있습니다.

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

이 주석 아래의 코드는 우리 Web Application의 핵심 기능 중 하나인 MVC (Model-View-Controller) 패턴을 사용하기 위한 서비스를 Service Container(서비스 컨테이너)에 등록하는 역할을 합니다. Service Container는 ASP.NET Core Application에서 필요한 객체들을 생성하고 관리하는 일종의 보관소입니다. builder.Services.AddControllersWithViews()를 호출함으로써, 우리는 Controller와 View를 처리하는 데 필요한 다양한 서비스들을 이 Container에 등록하게 됩니다. 이제 Controller를 만들고 View를 디자인해서 사용자에게 멋진 화면을 보여줄 준비가 된 것입니다.

var app = builder.Build();

Builder 를 통해 필요한 서비스들을 모두 등록했다면, 이제 builder.Build()를 호출하여 실제로 작동하는 WebApplication 객체를 생성합니다. 이 app 객체는 우리 Web Application의 instance(인스턴스)이며, 들어오는 HTTP Request(요청)을 어떻게 처리할지 정의하는 HTTP Request Pipeline(HTTP 요청 처리 파이프라인)을 구성하는 데 사용됩니다. 마치 공장에서 조립 라인을 만드는 것과 비슷하다고 생각하면 됩니다.

// 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();
}

이 부분은 HTTP Request Pipeline을 구성하는 중요한 Code Block(코드 블록)입니다. app.Environment.IsDevelopment()는 현재 애플리케이션이 개발 환경에서 실행 중인지 확인합니다. 개발 환경이 아니라면, 즉 운영 환경이라면 다음과 같은 Middleware를 Pipeline에 추가한다는 내용입니다.

  • app.UseExceptionHandler("/Home/Error");: Application 실행 중에 예외가 발생했을 때, 사용자에게 친절한 오류 페이지(/Home/Error 액션)를 보여주는 Exception Handler Middleware (예외 처리 미들웨어)입니다. 예상치 못한 문제 발생 시에도 깔끔하게 대응할 수 있도록 도와줍니다.
  • app.UseHsts();: HSTS (HTTP Strict Transport Security) Middelware는 Web Browser에게 해당 웹사이트는 항상 HTTPS를 통해서만 접속해야 한다는 것을 알려줍니다. 이는 사용자의 연결을 보호하고 중간자 공격을 방지하는 중요한 보안 기능입니다. 주석에서 언급된 것처럼, 프로덕션 환경에서는 HSTS의 지속 시간(기본값 30일)을 신중하게 설정해야 합니다.
app.UseHttpsRedirection();

이 코드는 HTTP로 들어온 요청을 자동으로 HTTPS로 Redirect(재전송)하는 HTTPS Redirection Middleware(HTTPS 리다이렉션 미들웨어)를 Pipeline에 추가합니다. HTTPS는 HTTP에 보안 계층을 더한 프로토콜로, 데이터 암호화를 통해 사용자의 정보를 안전하게 보호합니다. 요즘 웹사이트에서는 HTTPS 사용이 필수적이죠.

app.UseStaticFiles();

Static Files Middleware(정적 파일 미들웨어)는 wwwroot 폴더와 그 하위 폴더에 있는 CSS, JavaScript, 이미지 등의 정적 파일들을 클라이언트(웹 브라우저)에게 제공하는 역할을 합니다. 이 미들웨어가 없다면 웹사이트의 디자인이나 동작에 필요한 파일들을 제대로 불러올 수 없겠죠.

app.UseRouting();

Routing Middleware(라우팅 미들웨어)는 들어온 HTTP Request의 URL을 분석하고, 이 Request을 처리할 적절한 End Point(일반적으로 Controller의 Action Method)를 결정하는 역할을 합니다. 마치 웹사이트의 길 안내자처럼, User의 Request을 올바른 곳으로 연결해 줍니다.

app.UseAuthorization();

Authentication(인증)된 사용자의 권한을 확인하여 특정 Resource에 대한 접근을 제어하는 Authorization(권한 부여 미들웨어)입니다. 예를 들어, 관리자만 접근할 수 있는 페이지가 있다면 이 미들웨어가 사용자의 권한을 확인하고 접근을 허용하거나 거부하는 역할을 합니다. (Note: app.UseAuthentication() 미들웨어가 먼저 Pipeline에 추가되어야 권한 부여가 제대로 작동합니다. 기본적인 MVC Project Template에는 아직 인증 관련 코드가 없을 수 있습니다.)

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

이 코드는 Route(라우트)를 정의하는 부분입니다. Route는 URL Pattern과 이를 처리할 Controller 및 Action Method를 연결하는 규칙입니다. 여기서 정의된 “default” Route는 가장 기본적인 형태로, 다음과 같은 URL 구조를 처리합니다.

  • {controller}: 요청을 처리할 Controller 의 이름 (기본값: Home)
  • {action}: Controller 내에서 실행할 Action Method의 이름 (기본값: Index)
  • {id?}: 선택적인 ID Parameter

예를 들어, /Home/Index URL은 HomeController의 Index Action Method를 실행하고, /Products/Details/123 URL은 ProductsController의 Details Action Method를 실행하면서 ID 값으로 123을 전달하게 됩니다. 이 Routing 규칙 덕분에 우리는 깔끔하고 이해하기 쉬운 URL 구조를 만들 수 있습니다.

app.Run();

마지막으로 app.Run()은 앞에서 구성한 Web Application을 실제로 실행하고 HTTP 요청을 수신하기 시작하는 명령어입니다. 이 한 줄의 코드로 여러분이 작성한 ASP.NET Core MVC Web Application이 노출되어 사용자의 Request 를 기다리게 됩니다.

3. 최종 Program.cs

Code Snippet
  1. // WebApplication Builder를 생성합니다.
  2. // 이 Builder는 Application의 Hosting, Configuaration 및 Service 등록을 설정하는 데 사용됩니다.
  3. var builder = WebApplication.CreateBuilder(args);
  4.  
  5. // Add services to the container.
  6. // Container에 Service를 추가합니다.
  7. // Service는 Application 내에서 사용할 수 있는 재사용 가능한 구성 요소입니다.
  8. // AddControllersWithViews() 메서드는 MVC (Model-View-Controller) 패턴을 지원하는 데 필요한 Service를 등록합니다.
  9. // 여기에는 Controller, View, Engin 등이 포함됩니다.
  10. builder.Services.AddControllersWithViews();
  11.  
  12. // 구성된 Builder를 사용하여 WebApplication Instance를 생성합니다.
  13. // 이 app 변수는 HTTP Request Pipeline을 구성하고 Application을 실행하는 데 사용됩니다.
  14. var app = builder.Build();
  15.  
  16. // Configure the HTTP request pipeline.
  17. // HTTP Request Pipeline을 구성합니다.
  18. // 이 Pipeline은 들어오는 HTTP Request이 처리되는 순서를 정의합니다.
  19. // 개발 환경이 아닌 경우에만 Exception Handler Middleware를 추가합니다.
  20. if (!app.Environment.IsDevelopment())
  21. {
  22.     // Exception Handler Middleware는 Application에서 발생한 Exception 을 처리하고 사용자 친화적인 오류 페이지를 표시하는 데 사용됩니다.
  23.     app.UseExceptionHandler(“/Home/Error”);
  24.     // HSTS (HTTP Strict Transport Security) Middleware는 Browser에게 HTTPS를 통해서만 사이트에 액세스하도록 지시하여 보안을 강화합니다.
  25.     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
  26.     // 기본값은 30일이며, 프로덕션 환경에서는 이 값을 늘리는 것을 고려할 수 있습니다. 자세한 내용은 링크를 참조하세요.
  27.     app.UseHsts();
  28. }
  29.  
  30. // HTTPS Redirection Middleware는 HTTP Request을 HTTPS로 Redirection합니다.
  31. app.UseHttpsRedirection();
  32. // Static Files Middleware는 wwwroot 폴더와 같은 위치에서 이미지, CSS, JavaScript 파일과 같은 정적 파일을 제공하는 데 사용됩니다.
  33. app.UseStaticFiles();
  34.  
  35. // Routing Middleware는 들어오는 HTTP Request의 URL을 분석하고 해당 Request을 처리할 End Point(일반적으로 Controller Action)를 결정합니다.
  36. app.UseRouting();
  37.  
  38. // Authorization Middleware는 사용자의 ID를 확인하고 요청된 Resource에 액세스할 수 있는 권한이 있는지 확인합니다.
  39. app.UseAuthorization();
  40.  
  41. // End Point Routing을 구성합니다. 여기서는 MVC Controller에 대한 Default Route Pattern(기본 라우트 패턴)을 정의합니다.
  42. // name: 라우트의 이름입니다. 일반적으로 링크 생성 등에 사용됩니다.
  43. // pattern: URL 패턴을 정의합니다.
  44. //    {controller=Home}: Controller 이름입니다. 지정되지 않은 경우 기본값은 “Home”입니다.
  45. //    {action=Index}: Action(Controller 내의 Method) 이름입니다. 지정되지 않은 경우 기본값은 “Index”입니다.
  46. //    {id?}: 선택적 Parameter입니다. URL에 id 값이 있을 수도 있고 없을 수도 있습니다.
  47. app.MapControllerRoute(
  48.     name: “default”,
  49.     pattern: “{controller=Home}/{action=Index}/{id?});
  50.  
  51. // WebApplication을 실행합니다. 이 호출은 Application이 HTTP Request 를 수신하고 처리하기 시작하도록 합니다.
  52. app.Run();

 

4. 마무리

이처럼 Program.cs 파일은 우리 Web Application의 시작점이자, 필요한 서비스들을 등록하고 HTTP Request 를 처리하는 방법을 정의하는 중요한 역할을 합니다. 이 파일을 이해하는 것이 ASP.NET Core MVC Web Application 개발의 첫걸음이자 핵심입니다.

다음 3 편에서는 지금까지 구성한 Web Application 위에 무료 HTML Source 인 Medcare Template 하나를 Download 받아 전체적인 화면 구성과 메뉴를 살펴보고, 이 HTML 소스를 ASP.NET Core MVC의 View와 Controller로 어떻게 녹여낼 수 있을지 함께 고민해 보겠습니다. 

Happy GoSu ~

WooGong ))*

<

p data-sourcepos=”87:1-87:106″>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\