Software development framework를 이해하기 가장 좋은 방법은 아마도 직접 사용해 보는 것일 수 있습니다. 이를 위해 ASP.NET Core개발을 위한 사전 준비사항과 어떻게 ASP.NET Core application을 생성하고 실행시킬 수 있는지를 알아볼 것입니다.
1. 개발도구 선택
ASP.NET Core를 개발하기 가장 좋은 것으로는 Visual Studio와 Visual Studio Code를 추천할 수 있습니다. Visual Studio는 오래전부터 사용되어 온 통합 IDE개발도구이며 일련의 .NET Application을 개발하기 위한 수많은 도구와 기능을 제공합니다. 하지만 대체적으로 computer 자원을 많이 소모하며 가벼운 개발도구가 아니기에 실행하는데 상대적으로 느릴 수 있습니다. 너무나 풍부한 기능은 오히려 개발동안 방해가 될 수 있습니다.
Visual Studio Code에 위와 같은 Visual Studio의 완전히 대체제일 수 있습니다. Visual Studio의 여러 부가기능을 가지고 있지는 않지만 완벽하게 ASP.NET Core개발이 가능합니다. 하지만 .NET을 처음 시작하는 경우라면 어려울 수 있으니 Visual Studio가 시작하기에 좋은 선택일 수 있습니다. Visual Studio는 기본적으로 유료 제품이지만 Visual Studio Community Version을 사용하면 학습자의 입장으로 무료로 사용하실 수 있습니다.
(1) Visual Studio 설치
ASP.NET Core 7을 위해서는 Visual Studio 2022가 필요합니다. 사용할 정확한 version은 Visual Studio 2022 Community Edtion으로 아래 주소에서 내려받을 수 있습니다.
Download Visual Studio Tools - Install Free for Windows, Mac, Linux (microsoft.com)
내려받은 설치 file을 실행시키고 다음과 같은 화면이 나오면 'continue' button을 눌러줍니다.
잠시 후 설치 file 내려받기가 완료되면 다음과 같은 설치 option에서 'ASP.NET and web development'를 check 하고
Install button을 눌러 설치를 시작하고 완료 시까지 기다려 줍니다.
설치가 완료되면 Visual Studio를 실행시켜 줍니다. 처음 화면에서는 계정을 만들어 사용할 수 있지만 'Skip this for now'를 눌러 login 없이 실행합니다.
Development Settings는 편의에 따라 Visual C# 같은 언어나 Web development의 개발환경을 지정할 수 있습니다.(예제에서는 General로 설정합니다.) 그리고 원하는 theme를 선택한 뒤 Visual Studio를 시작합니다.
(2) Visual Studio Code 설치하기
Visual Studio Code는 아래 주소에서 내려받을 수 있습니다.
Visual Studio Code - Code Editing. Redefined
특별히 필요한 version은 없으나 Stable로 내려받는 것이 좋습니다.
설치 file을 실행하고 약관에 동의한 뒤 'Next' button을 눌러줍니다. 이후 표시되는 모든 option은 특별한 경우가 아닌 한 그대로 두고 'Next'를 눌러 설치를 진행합니다.
Visual Studio는 최신 version의 SDK를 같이 설치하지만(option에서 빼지 않은 경우) Visual Studio Code는 SDK를 설치하지 않으므로 별도로 설치해야 합니다.
SDK를 내려받아 설치한 뒤 Terminal이나 PowerShell을 열어 아래 명령을 통해 SDK가 설치되었는지를 확인합니다.
dotnet --list-sdks |
2. Project 생성하기
Project를 생성하는 첫 번째 방법은 PowerShell 혹은 Terminal을 사용하는 것입니다. PowerShell을 실행하고 project를 생성할 folder로 이동합니다.(예제에서는 사용자folder\source\repos를 사용합니다.) 그리고 아래 명령을 실행해 첫 번째 project를 생성합니다.
dotnet new globaljson --sdk-version 8.0.202 --output MyFirstProject dotnet new mvc --no-https --output MyFirstProject --framework net8.0 dotnet new sln -o MyFirstProject dotnet sln MyFirstProject add MyFirstProject |
첫번째 명령은 MyFirstProject이름의 folder를 생성하고 여기에 global.json file을 추가하도록 합니다. 해당 file은 project가 사용할 .NET의 version을 명시합니다. 두 번째 명령은 실질적인 ASP.NET Core project를 생성하도록 합니다. .NET SDK는 새로운 project를 시작하기 위한 다양한 template을 포함하고 있는데 그중 mvc는 ASP.NET Core application에서 사용가능한 template 중 하나입니다. 해당 project template은 MVC Framework로 구성된 project를 생성하는데 이는 ASP.NET Core에서 지원되는 application 유형중 하나에 해당합니다. MVC나 Framework와 같은 단어 혹은 관련된 것을 아직 이해하지 못하더라도 걱정할 필요는 없습니다. 추후에 이러한 것들을 자연스럽게 이해하게 될 것입니다. 나머지 명령은 solution file을 생성하는 것인데 이 file은 여러 project를 함께 사용할 수 있도록 합니다.
(1) Visual Studio를 사용해 project 열어보기
Visual Studio를 실행하고 첫 화면에서 'Open a project or solution'을 click한뒤
위에서 생성한 project folder를 찾아 *.sln file을 선택하고 'Open' button을 눌러줍니다. 잠시 기다리면 Solution Explorer에 template에서 생성한 project file을 표시할 것입니다.
(2) Visual Studio Code를 사용해 project 열어보기
Visual Studio Code를 실행하고 File - Open Foler menu를 선택한 뒤 위에서 생성한 project folder자체를 선택하면
Explorer pane에 project를 표시할 것입니다.
'Do you trust the authors of the files in this folder?'와 관련된 popup이 열린다면 'Trust the authors of all files in the parent folder 'repos''를 check 하고 'Yes, I trust the authors'를 click 합니다. repos는 예제에서 project를 생성한 folder입니다.
Visual Studio Code에서 처음 .NET project를 열어보는 경우라면 추가적인 설정이 필요할 수 있습니다. Explorer pane에서 Program.cs file을 열게 되면 Visual Studio Code는 C# 개발에 필요한 기능을 설치해야 한다는 요청을 아래와 같이 받게 됩니다. 그러면 Install을 눌러 해당 확장기능을 설치하도록 합니다.
3. ASP.NET Core application 실행하기
Visual Studio나 Visual Studio Code모두 project를 직접적으로 실행시킬 수 있지만 예제에서는 terminal/powershell을 사용하고자 합니다.
참고로 Project가 생성될 때 launchSettings.json이름의 file이 Properties folder에 만들어지는데 이 file에서는 project에서 사용할 HTTP port가 설정됩니다. 따라서 file을 열면 URL설정에서 사용할 port를 아래와 같이 변경할 수 있습니다. 필요에 따라서 변경할 수 있지만 예제에서는 기본값 그대로 두고 사용할 것입니다.
PowerShell에서 project file인 *.csproj가 존재하는 folder로 이동하고 아래 명령을 통해 project를 실행합니다.
dotnet run |
일단 명령이 실행되면 project는 compile 된 후 실행될 것입니다. 그러면 web browser를 실행하고 위에서 봤던 URL(profiles에 설정된)로 요청을 시도하고 다음과 같은 응답이 표시되는지 확인합니다.
만약 application을 중지하려면 Ctrl + C키를 PowerShell에서 눌러줍니다.
(1) Endpoint
ASP.NET Core application에서 들어오는 요청은 endpoint에서 처리됩니다. Endpoint는 위 그림 1과 같이 응답을 생성하는 action method라고 할 수 있습니다. Action은 Controller라고 하는 class에서 정의되는데 Controller는 Microsoft.AspNetCore.Mvc.Controller라는 기반 class에서 파생된 class입니다.
Controller에서 정의된 각각의 public method가 action이 되며 action은 HTTP요청을 처리하기 위해 호출됩니다. 일반적으로 ASP.NET Core project에서 Controller class는 Controllers라는 이름의 folder안에 저장되며 project를 구성하기 위해 사용된 template에 의해 자동적으로 생성되고 초기 Controller class file(HomeController.cs)을 Controllers folder에 추가합니다. Controller class는 이름에 Controller라는 단어를 포함하게 되므로 이름만으로 Home이라는 Controller가 포함되어 있음을 알 수 있고 HomeController는 ASP.NET Core application에서 사용되는 기본 Controller에 해당합니다.
Solution Explorer 또는 Explorer pane에서 HomeController.cs file을 찾아 해당 file을 열어보면 다음과 같이 code가 작성되어 있음을 알 수 있습니다.
using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using MyFirstProject.Models;
namespace MyFirstProject.Controllers;
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
public HomeController(ILogger<HomeController> logger)
{
_logger = logger;
}
public IActionResult Index()
{
return View();
}
public IActionResult Privacy()
{
return View();
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
이제 HomeController.cs file을 아래와 같이 변경합니다. 아래 예제는 사용하지 않는 namespaces의 using문과 하나의 method를 제외하고 모든 code를 삭제하였습니다. 또한 method의 return type도 같이 변경하였습니다.
using Microsoft.AspNetCore.Mvc;
namespace FirstProject.Controllers;
public class HomeController : Controller
{
public string Index()
{
return "Hello World";
}
}
그 결과 HomeController는 Index라는 이름의 action만을 정의하게 되었는데 비록 화려한 응답을 생성하지는 않겠지만 이것만으로 전체적인 code의 동작을 이해하기에는 쉬울 것입니다. 결과적으로 Index라는 Method를 변경하여 'Hello World'라는 문자열을 반환하도록 하였기에 PowerShell에서 dotnet run을 실행하고 browser에서 URL을 요청하면 project의 설정에 따라 HTTP요청은 Home Controller의 Index method에서 처리될 것입니다. 그러면 Index method에서 문자열이 생성되고 HTTP요청에 대한 응답으로 사용되어 browser는 다음과 같이 결과를 표시하게 됩니다.
(2) Route
ASP.NET Core routing system은 궁극적으로 들어온 HTTP요청을 처리할 endpoint를 선택하는 역할을 수행하며 이때 route는 요청을 어떻게 처리할지를 결정하는 데 사용되는 일련의 규칙을 의미합니다. Project를 생성할 때 기본 규칙도 같이 생성되므로 다음과 같은 URL요청은 곧 Home controller에 정의된 action method로 전달됩니다.
- /
- /home
- /home/index
결과적으로 어떻게 요청을 시도하든 application에서는 'Hello World'라고 하는 동일한 결과를 보게 될 것입니다.
(3) HTML rendering
위 예제는 단순한 문자열만을 반환하는 것으로 HTML응답을 생성하려면 View를 사용해야 합니다. View는 Action method에서 생성된 결과를 HTML로 처리하는 역할을 수행합니다.
● View 사용하기
View를 사용해 보기 위해 예제의 Index method를 아래와 같이 수정합니다.
public ViewResult Index()
{
return View("MyView");
}
예제에서 Action method는 View method를 호출하도록 하였으며 반환형식을 ViewResult로 지정하였습니다. 이때 View method를 호출하는 부분에서는 MyView라는 이름의 View이름을 매개변수로 전달하고 있습니다.
Application을 중지한 뒤 다시 실행하면 다음과 같은 예외를 보게 될 것입니다. Action method에서 view를 지정하긴 했지만 실제 View가 존재하지 않기 때문에 발생한 예외이며 해당 예외를 통해 우리는 ASP.NET Core가 어떤 위치에서 view를 검색하는지 확인할 수 있습니다.
View는 Project에서 View folder의 하위 folder에 저장됩니다. 만약 View가 HomeController와 관련이 있다면 View는 Views > Home folder에 위치해야 합니다. 특정 Controller에 속하지 않는 View의 경우에는 예외적으로 Views > Shared folder에 저장됩니다. Project를 살펴보면 이미 Views와 그 하위 folder 및 View file이 함께 생성되어 있는 것을 볼 수 있는데 이는 Project를 처음 생성할 때 사용한 Template에 의해 자동적으로 추가된 것입니다.
Visual Studio에서라면 Solution Explorer에서 Views > Home folder를 Mouse를 우 click 한 후 Pop-up menu에서 Add > View를 선택합니다. 이후 화면에서 Razor View - Empty 항목을 선택하고 Add button을 눌러줍니다. 이어서 추가할 View의 File이름을 MyView.cshtml로 설정하고 Add button을 누릅니다.
그러면 Visual Studio는 해당 file을 추가하고 편집할 수 있게 file을 열어줄 것입니다.
Visual Studio Code에서라면 EXPLORER panel에서 Views > Home에 Mouse 오른쪽 Button을 Click 하고 New File을 선택한 뒤 File명에 MyView.cshtml를 입력하여 View file을 추가합니다.
View file을 잘못된 위치에 생성할 수 있으나 걱정할 필요는 없습니다. 그냥 File을 끌어서 정확한 위치에 놓거나 File을 삭제 후 다시 생성하면 됩니다.
추가한 MyView.cshtml File을 열어 아래와 같이 수정합니다.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
Hello World (from view)
</div>
</body>
</html>
예제에서 @{ 에서 } 까지의 부분은 View의 content를 처리하고 HTML을 생성해 주는 Razor에 의해 처리될 code영역입니다. Razor는 View Engine이며 상기 예제의 code영역을 Razor 표현식(expression)이라고 합니다.
예제어서의 Razor 표현식은 Layout에 null을 대입함으로써 Layout을 사용하지 않겠다는 것을 말합니다. Layout에 관해서는 추후에 자세히 살펴볼 것입니다. 위와 같이 적용한 결과를 확인해 보기 위해 application을 종료 후 다시 실행해 결과를 확인합니다.
처음 문자열을 반환하는 예제에서의 경우 ASP.NET Core가 문자열을 Browser로 전달하는 것 외에 다른 동작은 필요가 없었습니다. 하지만 Action method가 ViewResult를 반환하는 경우라면 View를 처리하고 HTML을 생성하는데 Razor가 사용됩니다. 이때 Razor가 View를 찾아낼 수 있는 이유는 Action method를 포함하고 있는 Controller와 이름이 일치하는 foler에 View를 저장하는 기본적인 naming규칙을 따르고 있기 때문입니다. 예제의 경우 Views/Home안에 View file이 있다는 것은 Action method가 HomeController에서 정의되다는 것을 의미하게 됩니다.
Action Method에서 필요하다면 문자열이나 ViewResult 외에 RedirectResult를 반환하여 Browser가 다른 URL로 redirect 하도록 하거나 HttpUnauthorizedResult를 반환하여 사용자에게 Login을 요구할 수도 있습니다. 그리고 이러한 반환개체를 모두 통틀어 Action result라고 합니다. Action result는 Action에서의 일반적인 응답을 Encapsulation 하고 재사용할 수 있도록 합니다.
● 동적 출력 생성하기
대부분의 Application은 정적인 내용보다는 사용자의 요청에 따라 다른 결과를 응답함으로써 사용자와 상호작용을 하게 됩니다. 여기서 Action method의 역할은 data를 만들어 이를 View에 전달하고 View에서는 해당 data를 기반으로 HTML응답을 생성하는 것입니다. 이때 Action method는 View method의 인수를 통해 필요한 data를 전달하는데 이 data를 우리는 View model이라고 부를 수 있습니다.
public ViewResult Index()
{
int hour = DateTime.Now.Hour;
string viewModel = (hour < 12 ? "AM " : "PM ") + hour.ToString();
return View("MyView", viewModel);
}
예제에서 View model은 viewModel이라는 string형식이며 이를 View method의 두 번째 인수로 전달하고 있습니다. 이제 다음과 같이 View를 수정하여 전달받은 View model을 사용해 HTML생성하도록 합니다.
@model string
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@Model
</div>
</body>
</html>
View model의 type은 @model (m이 소문자임에 주의합니다.) 표현식으로 지정하며 실제 View model의 값은 @Model (m이 대분자임에 주의합니다.)로 사용합니다.
위 예제와 같은 구현을 통해 View가 rendering 될 때 Action method에 전달된 View model data값이 HTML에 삽입되어 해당 결과를 응답하게 될 것입니다. Application을 다시 실행하면 다음과 같은 응답을 볼 수 있습니다.
(4) 정리하기
위 예제는 아주 단순한 하나의 application에 불과하지만 ASP.NET Core application을 생성하고 동적내용을 출력하기까지 필요한 모든 요소를 갖추고 있습니다. ASP.NET Core platform은 HTTP요청을 수신하고 routing system을 통해 요청된 URL을 endpoint로 연결합니다. 예제에서 endpoint는 HomeController에 정의된 Index action method에 해당합니다. Action method는 호출되면 View의 이름과 View model 개체를 포함한 ViewResult개체가 생성됩니다. 이후 Razor view engine은 View의 위치를 찾아 View를 처리하게 되는데 이때 @Model 표현식을 평가하여 Action method에 전달된 View data값을 응답에 담아두게 되고 Browser로 반환이 이루어지게 됩니다. 물론 이외에도 알아야 할 많은 부분이 있지만 위와 같은 기본적인 순서를 염두에 둔다면 전체를 이해하는데 도움이 될 것입니다.
'.NET > ASP.NET' 카테고리의 다른 글
[ASP.NET Core] - 4. 개발도구 사용하기 (2nd) (0) | 2024.03.22 |
---|---|
[ASP.NET Core] - 3. ASP.NET Core Application 예제 (2nd) (0) | 2024.03.20 |
[ASP.NET Core] - 1. 개요 (2nd) (0) | 2024.03.12 |
NET::ERR_CERT_INVALID 문제 (0) | 2023.11.27 |
ASP.NET Core - 21. ASP.NET Core Identity 사용 (2) | 2023.04.09 |