WooGong's Blog

[ASP.NET CORE] 무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #3: HTML 구조 분석과 MVC 디자인 준비

Themewagon의 Medcare Template 의 HTML 구조를 분석하여 메뉴 구성, 화면 영역(Header, Body, Footer)별 특징을 설명하고, 이를 ASP.NET Core MVC의 View와 Controller로 구성하기 위한 준비 단계를 소개합니다.

무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #3: HTML 구조 분석과 MVC 디자인 준비

지난 2편에서는 ASP.NET Core MVC Web Application의 핵심인 Program.cs 파일을 살펴보았습니다. 지난 글은 아래 에서 확인해 주세요.

.NET 8 웹 개발 시작하기: Visual Studio 2022 & VS Code로 MVC 프로젝트 만들기
.NET 8 ASP.NET Core MVC 시작점, Program.cs 완벽 해부: 서비스 등록부터 요청 파이프라인 구성까지!

이번 3편에서는 본격적으로 Website의 뼈대가 될 HTML 파일의 구조를 파악하는 시간을 가져보려 합니다. 우리가 사용할 Template은 Themewagon.com에서 제공하는 “Medcare”라는 Medical Website 무료 Template입니다. Download는 여기에서 받으실 수 있습니다.

e-commerce website 를 사용할까도 생각해 보았지만 Healthcare 에 관심도 있고 가장 유사하지 않나 하는 생각에 선택하게 되었습니다. e-commerce 만큼 적용할 수 있는 재미는 적을 수 있지만 일단 무엇이든 시작해 보려고 합니다.

Medcare Template, 어떤 모습일까?

압축을 풀고 폴더를 살펴보면, 우리 눈에 익숙한 css, fonts, img, js, scss 폴더와 함께 index.html, about.html, department.html, doctors.html, blog.html, contact.html과 같은 메뉴별 HTML 파일들을 확인할 수 있습니다. 특히, CSS를 동적으로 관리할 수 있도록 scss 폴더가 제공되는 점과,Template적용에 유용한 document 파일이 포함된 점이 좋네요.

먼저 index.html 을 열어 첫 화면을 살펴보겠습니다. index.html 을 double click 합니다.

Website의 전체적인 메뉴 구성은 Home, About, Department, Doctors, Blog, Contact 총 6개의 주요 메뉴로 이루어져 있습니다.

각 페이지는 공통적으로 Header, Body, Footer의 세 가지 영역으로 나뉩니다.

1. Header (머리말)

Header 영역은 Website의 얼굴이라고 할 수 있습니다. Medcare Template의 Header는 다음과 같은 요소들로 구성되어 있습니다.

메뉴 (Navigation Bar): Website 의 주요 Page로 이동할 수 있는 link들을 제공합니다. 사용자가 원하는 정보를 쉽게 찾도록 돕는 중요한 역할을 합니다.
SNS 이모티콘 목록: 다양한 Social Media Platform 으로 연결되는 icon들이 배치되어 있습니다. 기관의 Social 활동을 홍보하고 사용자들과의 소통 채널을 제공합니다.
메뉴별 대표 image및 text: Header 아래에는 각 메뉴 Page의 특징을 시각적으로 보여주는 image와 간략한 설명 text가 함께 나타납니다. 현재 어떤 Page를 보고 있는지 직관적으로 알 수 있도록 디자인되어 있습니다.

2. 본문 (Body): 핵심 contents 를 담는 공간

Body 영역은 각 Menu Page의 실제 내용을 담는 곳입니다. 예를 들어, “About” Page에서는 기관의 소개, 역사, 비전 등의 정보가 표시될 것이고, “Doctors” Page에서는 의료진의 정보와 전문 분야 등이 소개될 것입니다. Themewagon Template은 각 Page의 목적에 맞게 깔끔하고 정돈된 Layout을 제공합니다.

3. 꼬리말 (Footer): Website의 마침표

Footer 영역은 Website의 하단에 위치하며, 일반적으로 다음과 같은 정보들을 포함합니다.

Top Products, Quick Links, Resources, NewsLetter: 유용한 정보나 자주 찾는 Link, News Letter 구독 등의 기능을 제공하여 사용자 편의성을 높입니다. Healthcare 기관의 경우, 주요 서비스나 관련 정보 Link 등이 포함될 수 있습니다.
Copy Right: Website의 저작권 정보를 명시하여 지적 재산권을 보호합니다.
SNS 이모티콘 목록: Header와 마찬가지로 Social Media 채널로의 접근성을 제공합니다.

MVC 구조 설계를 위한 첫걸음: View와 Controller

이제 Download 한 HTML 파일들을 ASP.NET Core MVC Web Application의 View와 Controller로 어떻게 구성할지 고민해 볼 차례입니다.

View: 각 HTML 파일(.html)은 사용자에게 보여지는 화면, 즉 View의 역할을 하게 됩니다. 예를 들어, index.html은 Home Page View가 되고, about.html은 About Page View가 되는 식입니다.
Controller: 사용자의 Request을 처리하고, Model에서 데이터를 가져와 View에 전달하는 역할을 합니다. 각 메뉴에 대응하는 Controller를 만들고, 해당 Controller의 Action Method에서 적절한 View를 반환하도록 구현해야 합니다.

마무리

다음 편에서는 Medcare Template의 HTML 파일들을 분석한 내용을 바탕으로, ASP.NET Core MVC Project에서 View를 생성하고 Controller를 연결하는 과정을 자세히 다루어 보겠습니다. Themewagon Templage 을 Website로 구성하는 방법을 살펴보면서 실제 업무에서 디자이너가 작업한 Website HTML Source 를 어떻게 다루는지에 대한 감을 갖게 되리라 생각됩니다.

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

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

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

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

[Development] .NET 8 웹 개발 시작하기: Visual Studio 2022 & VS Code로 MVC 프로젝트 만들기 (1편)

.NET 8 기반 ASP.NET Core MVC 웹앱 구축 첫 단계: VS 2020 & VS Code로 솔루션/프로젝트 생성 과정 안내.

.NET 8 웹 개발 시작하기: Visual Studio 2022 & VS Code로 MVC 프로젝트 만들기 (1편)

핵심 키워드: .NET 8, ASP.NET Core, 웹 개발, MVC, Visual Studio 2022, Visual Studio Code, 솔루션, 프로젝트 생성, 개발 환경

안녕하세요! 오늘은 가장 최신 LTS 버전인 .NET 8을 기반으로 HealthCare 웹 애플리케이션을 만들기 위한 첫 단계를 함께 진행해 보려고 합니다. 정확히는 HealthCare 라기 보다는 Hospital application 에 가까운데요. 무료 WebSite Source 를 DownLoad 받아 진행하려다 보니 명칭과 내용 의 차이가 있습니다. ^^;

이번 1편에서는 개발의 가장 기초가 되는 Solution(솔루션) 생성부터 웹 개발의 핵심 패턴인 MVC (Model-View-Controller) 웹 애플리케이션 프로젝트를 추가하는 과정을 자세히 살펴보겠습니다. 특히 많은 개발자분들이 사용하는 Visual Studio 2022과 Visual Studio Code 두 가지 환경에서 차근차근 진행할 예정이니, 익숙한 도구를 선택해서 따라오시면 됩니다. 자, 그럼 시작해 보겠습니다.

1. Visual Studio 2022에서 솔루션과 MVC 프로젝트 만들기

Visual Studio 2022은 강력한 개발 도구로서, .NET 개발을 위한 다양한 편의 기능을 제공합니다. 처음 접하는 분들도 쉽게 따라 할 수 있도록 자세히 안내해 보겠습니다.

1. Visual Studio 2022에서 솔루션과 MVC 프로젝트 만들기

1단계: Visual Studio 2020 실행 후 새 프로젝트 생성

Visual Studio 2022을 실행하면 시작 화면이 나타납니다. 여기서 “새 프로젝트 만들기”를 클릭해 주세요. 그리고 먼저 “Empty Solution”을선택합니다.

Solution 이름으로 HealthCare 를 입력해 줍니다. Project 위치도 입력해 줍니다.그럼 다음 화면과 같이 Solution 이 생성되고 새로운 Project 를 추가하기 위해 Solution 을 오른쪽 Click 하여 New Project… 를 Click 하여 다음 화면으로 이동합니다.

2단계: “ASP.NET Core Web App (Model-View-Controller)” template 선택

새 프로젝트 만들기 창이 뜨면 다양한 Template(템플릿) 목록이 보일 겁니다. 검색창에 “ASP.NET Core Web” 라고 입력하거나, 왼쪽의 언어 필터를 “C#”, 플랫폼 필터를 “Web”으로 설정해서 찾아보세요. 찾으셨다면 선택하고 “Next (다음)” 버튼을 클릭합니다.

3단계: 프로젝트 이름 및 위치 설정

이제 프로젝트의 이름과 저장 위치, 그리고 Solution 이름을 설정하는 화면이 나옵니다.

Project Name : 만들 웹 애플리케이션의 이름을 HealthCareWeb 로 정해주세요
Location : 프로젝트 파일들을 저장할 폴더 경로를 HealthCare Solution 폴더 아래로 지정합니다.

원하는 설정을 마치셨다면 “Next”을 눌러 진행합니다.

4단계: 대상 프레임워크 선택 (.NET 8.0)

다음 화면에서는 Target Framework 를 선택해야 합니다. DropDown 메뉴를 열어서 “.NET 8.0” 을 선택해 주세요. 인증 방식은 필요에 따라 설정하셔도 좋지만, 일단은 기본 설정으로 두고 아래 이미지와 같이 설정하고 “Create (만들기)” 버튼을 클릭합니다.

5단계: 솔루션 탐색기 확인

프로젝트 생성이 완료되면 Visual Studio 오른쪽에 있는 Solution Explorer(솔루션 탐색기)에 생성된 Solution (HealthCare)과 그 안에 HealthCareWeb Project가 나타난 것을 확인할 수 있습니다. 기본적인 MVC 구조인 Controllers, Models, Views 폴더와 함께 Program.cs (.NET 6 이후 버전에서는 Startup.cs 와 Program.cs 파일이 하나로 통합), .csproj 파일 등 기본적인 파일들이 생성된 것을 볼 수 있습니다.

2. Visual Studio Code에서 솔루션과 MVC 프로젝트 만들기

Visual Studio Code (이후 VS Code)는 가볍지만 강력한 코드 에디터로, C# 확장 기능을 통해 .NET 개발 환경을 구축할 수 있습니다. 요즘 MAC Book 을 사용하여 개발할 기회가 점점 늘어나다 보니 VS Code 를 주 IDE 로 사용하게 되어 함께 구성하였습니다. Project 생성과 몇몇 과정을 제외한 개발 과정은 대부분 비슷하니 다음 과정을 확인하시기 바랍니다. 그럼 이제 콘솔 명령어를 통해 솔루션과 프로젝트를 생성하는 과정을 알아보겠습니다.

Visual Studio 2022 에서의 제작과 함께 하다보니 Solution Folder 의 위치를 HealthCare 가 아닌 HealthCareVSC 라고 하겠습니다.

1단계: 개발 폴더 생성 및 터미널 열기

먼저 프로젝트 파일을 저장할 HealthCareVSC 폴더를 하나 만들어 진행하겠습니다. VS Code 를 실행하고 “Ctrl + `” 눌러 “Terminal” 창을 엽니다. (“Terminal” 메뉴에서 “New Terminal”을 클릭해서 터미널 창을 열어 진행할 수도 있습니다)

2단계: .NET SDK 설치 확인

터미널에 다음 명령어를 입력해서 .NET SDK가 제대로 설치되어 있는지 확인합니다.

dotnet --info

NET 8 관련 정보가 출력되면 정상적으로 설치된 겁니다. 만약 설치되어 있지 않다면 Terminal 의 맨 아래로 이동하면 표시되어 있는 링크를 Ctrl Key 를 누른 상태에서 Click 하여 이동하거나 .NET 공식 홈페이지로 이동하여 .NET 8 SDK를 설치해 주세요.

3단계: Solution, Project 파일 생성

이제 솔루션 파일을 만들어 보겠습니다. 먼저 Solution 과 Project 를 포함할 Folder 를 생성하겠습니다. 그리고 터미널에 다음 명령어들을 입력하여 Solution 과 .NET 8 기반의 MVC Web Application Project 파일을 생성합니다.

dotnet new mvc -n HealthCareWeb -f net8.0 명령어는 HealthCareWeb 폴더를 만들고, 기본적인 MVC 구조와 함께 .NET 8을 대상으로 하는 프로젝트 파일을 생성합니다.

cd projects
mkdir HealthCareVSC
cd HealthCareVSC
dotnet new sln -n HealthCare
dotnet new mvc -n HealthCareWeb -f net8.0

4단계: VS Code 에서 Solution Folder 열기

이젠 “File” 메뉴에서 “Open Folder…”를 선택해서 만든 폴더를 엽니다. Folder 를 믿을만 한 작성자가 만든 것인지 확인하는 화면이 나타납니다.

화면의 왼쪽, 탐색기(Explore) 에 폴더의 구조가 표시됩니다. 그리고 하단에 SOLUTION EXPLORER 가 표시되는데 Header 를 콜릭하여 위치를 이동할 수 있습니다. 왼쪽 Tab 으로 이동이 가능합니다. 확인해 보시기 바랍니다. Heder 의 이름이 SOLUTION EXPLORER 인지 Folder 이름인지 확인하시기 바랍니다. 자신이 편한 위치로 이동하여 화면을 구성할 수 있습니다.

5단계: Solution 에 Project 추가

생성된 MVC Project를 Solution 파일에 연결해 줘야 합니다. 터미널에서 다음 명령어를 실행하세요.

dotnet sln add ./HealthCareWeb/HealthCareWeb.csproj

이 명령어는 HealthCare 폴더 안의 HealthCareWeb.csproj 파일을 HealthCare.sln 파일에 추가합니다. 명령어를 실행하는 폴더의 위치를 확인하십시오. sln 파일이 있는 폴더(d:/projects/HealthCareVSC : 여러분의 폴더명과 다를 수 있습니다.) 에서 실행하고 있습니다.

위의 화면의 경우 미리 만들어 놓은 Project 를 Solution 에 포함하는 내용이지만 다음과 같이 VS Code 에서 새로 생성하며 추가할 수도 있습니다. SOLUTION EXPLORER 에서 Solution Name (HealthCare) 의 우측 “+” 를 클릭하면 왼쪽에 추가할 수 있는 Project 의 Template 명칭이 나열됩니다. 이 때 상단에 “mvc” 를 입력하면 “ASP.NET Core Web App (Model-View-Controller)” 이 Filtering 됩니다. 이를 선택하고 Project 의 이름을 입력하면 해당 Project 가 추가됩니다.

하지만 조금 더 정확한 Project 를 추가하기 위해서는 Terminal 명령어를 통해 추가하는 것을 추천합니다.

6단계: 프로젝트 구조 확인

VS Code의 탐색기에서 HealthCareVSC 폴더내에 HealthCare.sln 파일이 생성된 것을 확인할 수 있습니다. HealthCareWeb Project 폴더 안에는 Controllers, Models, Views 폴더와 Program.cs, .csproj 파일 등 웹 애플리케이션 개발에 필요한 기본적인 파일들이 갖춰져 있습니다.

자, 이렇게 해서 Visual Studio 2022과 Visual Studio Code, 각각의 환경에서 .NET 8 기반의 ASP.NET Core MVC 웹 애플리케이션을 위한 Solution을 만들고 Project를 추가하는 과정을 성공적으로 마쳤습니다! 이제 다음 편에서는 생성된 기본적인 MVC 프로젝트의 구조를 좀 더 자세히 살펴보고, 간단한 기능을 추가해서 웹 페이지가 어떻게 동작하는지 직접 확인해 보도록 하겠습니다.

그리고 궁금한 점이 있다면 언제든지 댓글로 질문해주세요.

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31