이번 글에서는 Microsoft가 개발에 사용할 수 있도록 제공하는 개발도구에 대해 알아볼 것입니다. 현재 작성 중인 대부분의 글에서도 .NET SDK에서 제공하는 command-line 도구와 그 외 Microsoft가 배포하고 있는 추가적인 도구를 사용할 것입니다. 이렇게 하는 가장 큰 이유는 사용 중인 editor나 IDE와는 관계없이 ASP.NET Core개발에 필요한 모든 기능을 제공하면서 일관성 있는 결과를 얻을 수 있기 때문입니다.
특히 Visual Studio Code는 사용자 interface를 통해 개발도구의 접근성을 제공하고 있지만 ASP. NET Core개발에 필요한 모든 기능을 지원하지는 않고 있습니다.
아래표는 일반적인 상황에서 사용하는 명령을 나타내고 있습니다.
상황 | 명령 |
Project 생성 | dotnet new |
Project의 build및 실행 | dotnet build / dotnet run |
Project에 Package추가 | dotnet add package |
도구 명령 설치 | dotnet tool |
Client-side package 관리 | libman |
1. ASP.NET Core Project 생성
.NET SDK는 Project를 생성하고 build 하고 실행할 수 있는 일련의 command-line 도구를 포함하고 있습니다. Visual Studio에서도 이와 동일한 기능을 제공하고 있으므로 만약 UI적인 면을 선호한다면 Visual Studio를 대신 사용할 수 있습니다.(다만 설명은 command-line으로 진행합니다.) 하지만 Visual Studio Code를 사용한다면 command-line 도구를 사용해야 합니다.
(1) Project 생성
.NET command-line명령은 대부분 dotnet으로 시작하며 뒤에 switch를 사용해 부가적인 설정을 추가합니다. 이런 개념으로 dotnet new가 되면 새로운 project 혹은 solution을 생성하는 것이 됩니다. 무엇인가를 새롭게 만드는 데 사용할 수 있는 templates목록은 다음과 같은 방법으로 확인할 수 있습니다.
dotnet new --list |
사용가능한 template에는 많은 수가 있으며 각 template은 좀더 편리하게 사용할 수 있는 short name을 별도로 가지고 있습니다. 이 중에서 ASP.NET Core project와 관련되어 가장 많이 사용되는 template은 다음과 같습니다.
template | 설명 |
web | 해당 template은 Project를 생성할때 ASP.NET Core개발에 필요한 최소한의 code와 content로 생성합니다. 처음 ASP.NET Core를 시작하는 경우라면 이 template로 시작하면서 하나씩 설정을 추가해 나갈것을 권장합니다. |
mvc | 해당 template은 MVC Framework를 사용하는 ASP.NET Core project를 생성합니다. |
webapp | 해당 template은 Razor page를 사용하는 ASP.NET Core project를 생성합니다. |
blazorserver | 해당 template은 Blazor server를 사용하는 ASP.NET Core project를 생성합니다. |
이 외에 일반적으로 Project를 구성하는데 사용되는 file을 만들기 위한 template도 존재합니다.
template | 설명 |
globaljson | Project에 global.json file을 추가합니다. 이 file은 Projet가 사용할 .NET version을 지정합니다. |
sln | Solution file을 생성합니다. Solution file은 여러 Project를 Group화 하기 위해 사용되며 Visual Studio에서 기본적으로 사용되는 file이기도 합니다. |
gitignore | .gitignore file을 생성하며 Git source control의 대상에서 제외할 대상을 지정합니다. |
template의 한계
Project template은 기본적인 설정을 처리하고 일부 content를 추가함으로써 손쉽고 빠르게 개발을 시작할 수 있게 해 줍니다. 하지만 Project의 설정과 개발방식에 대한 일반적인 개념만을 적용하여 빠르게 Project를 생성하는 탓에 뒷면에서 이루어지는 많은 과정을 직접 경험할 수 없게 하므로 처음시작할 때 온전한 Project를 생성하는 template을 사용하는 건 그다지 좋은 선택이 아닐 수 있습니다.
따라서 처음 시작할때 번거로운 면이 있더라도 template은 web으로 설정하고 ASP.NET Core개발에 필요한 최소한의 상태에서 하나씩 필요한 기능을 붙여나가는 것이 좋습니다. 이러한 과정을 통해 전체 구조를 알게 되고 나면 그때부터 자신이 원하는 template으로 시작할 수 있고 문제가 생기는 경우 유연한 대처가 가능해집니다.
Project를 생성하기 위해 PowerShell command prompt를 열고 다음순서로 명령을 내려줍니다.
dotnet new globaljson --sdk-version 8.0.202 --output FirstSolution/FirstProject dotnet new web --no-https --output FirstSolution/FirstProject --framework net8.0 dotnet new sln -o FirstSolution dotnet sln FirstSolution add FirstSolution/FirstProject |
첫 번째 명령은 FirstSolution/FirstProject folder를 만들고 여기에 global.json을 생성합니다. 이 file에서 Project가 사용할 .NET version을 8.0.202로 사용할 수 있도록 지정합니다. (예제는 .NET 8을 사용하지만 설명은 .NET 7에 맞춰서 진행됩니다.) 이때 최상위 folder로 FirstSolution을 사용하고 있는데 이 folder안에서 다수 Project를 생성하고 이들을 함께 group화 할 것입니다.
두 번째 명령은 web template을 사용해 Project를 생성하도록 합니다. 이미 언급했듯 이 template은 ASP.NET Core개발에 필요한 최소한의 설정만으로 Project를 생성합니다. 각 template은 Project가 생성될 때 영향을 줄 수 있는 자체적인 인수를 가지고 있는데 예제에서 사용된 --no-https는 Project가 HTTPS를 사용하지 않도록 하는 것이며 --framework는 Project가 사용할 .NET runtime version을 지정하는 것입니다.
나머지 명령은 Solution file을 생성하고 여기에 위에서 만든 Project를 참조하도록 합니다. 위 명령으로 인해 FirstSolution.sln solution file이 FirstSolution folder에 생성되고 이후 해당 file을 열어서 참조하는 Project를 load 하게 됩니다. 참고로 Solution file은 다수 Project를 관리하기 위한 수단일 뿐 필수는 아닙니다.
● Project 열기
위에서 생성한 Project를 열어보기 위해 Visual Studio를 실행하고 'Open a project or solution'을 선택합니다.
탐색기에서 FirstSolution folder에 있는 FirstSolution.sln file을 선택하고 'Open'을 눌러줍니다.
Visual Studio Code라면 상단 menu에서 File > Open Folder를 선택하고 FirstSolution folder를 찾아 선택합니다.
2. Project에 Code와 Content 추가하기
Visual Studio Code를 사용한다면 Project folder에서 Mouse오른쪽 button을 눌러 Pop-up menu에서 New file 혹은 folder를 추가하는 경우라면 New Folder를 선택합니다. 그런 뒤 추가하고자 하는 file명(또는 folder명)을 입력합니다. File을 추가할 때는 항상 추가하려면 file의 유형에 맞는 확장자를 정확히 입력해야 합니다. 예를 들어 추가하려는 file이 HTML이라면 확장자는 .htm혹은 .html이어야 합니다.
지금은 New Folder를 선택하고 해당 folder의 이름을 wwwroot라고 지정합니다. 그리고 다시 wwwroot folder에서 위와 동일한 방법으로 이번에는 test.html file을 다음과 같이 추가해 줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h3>HTML File...</h3>
</body>
</html>
Visual Studio라면 Solution Explorer에서 Project를 선택한 뒤 Mouse오른쪽 button을 눌러 Add > New Foler를 선택하고 folder의 이름을 wwwroot로 지정합니다. 그런 뒤 다시 wwwroot folder에서 Mouse오른쪽 button을 누르고 Add > New Item을 선택한 뒤 file명을 test.html로 지정(FileName.cs라고 표시될 수 있으나 이 이름은 무시합니다.)하고 Add button을 눌러줍니다. 또는 file명 입력 단계에서 'Show All Templates' button을 누르고 왼쪽 category에서 C# > ASP.NET Core > Web > Content를 선택하고 HTML Page item을 선택한 뒤 file명을 test.html로 설정(HTML Page item을 선택한 상태면 이때 확장자는 생략할 수 있습니다.)하고 'Add' button을 눌러 file을 추가한 뒤 위 예제로 변경합니다.
(1) Item scaffolding
Visual Studio에서 표시하는 item template 이외에 scaffold item을 제공하기도 합니다. File을 추가하기 위한 Pop-up menu에서 Add > New Scaffolded Item을 선택하면 더 복잡한 item을 추가하는데 도움을 받을 수 있는데 특히 추가하려는 folder의 이름을 기반으로 개별적인 scaffold item을 제공하기도 합니다. 예를 들어 Views folder에서 mouse를 오른쪽 click 하면 관련된 scaffold item을 menu의 상위에 표시합니다.
View와 Controller item은 scaffold 되고 이들을 선택하면 생성하고자 하는 item의 content를 결정하는 선택사항이 표시됩니다.
3. Project의 buil와 실행
Project를 build 하고 실행하는 가장 간단한 방법은 command-line 도구를 사용하는 것입니다. 그 전에 Project의 Program.cs file을 아래와 같이 변경합니다.
app.MapGet("/", () => "Hello World!");
app.UseStaticFiles();
app.Run();
UseStaticFiles method는 wwwroot folder에 있는 정적 content를 HTTP요청에 응답할 수 있도록 합니다. 위에서 이미 test.html file을 wwwroot에 추가했으므로 이를 사용하기 위해 위 method를 추가하였습니다.
Project folder에서 다음 명령을 사용해 Project를 build하고 ASP.NET Core HTTP server를 실행합니다.
dotnet run |
Project를 build만 하고자 한다면 다음 명령을 대신 사용하면 됩니다. (build를 Solution file이 있는 folder에서 실행하면 해당 Solution에 속한 모든 Project를 build 합니다.)
dotnet build |
위 명령을 실행하면 compiler는 project를 build 한 뒤 내장된 ASP.NET Core HTTP server를 실행하게 됩니다.
이 상태에서 Web browser를 실행한 뒤 Project에 설정된 URL과 Port(Properties > launchSettings.json file참고)를 사용해 위에서 추가한 test.html file을 요청합니다.
(1) Hot reload 사용하기
.NET의 hot reload는 Application이 동작중인 동안에도 code의 변경사항을 감지하고 compile 하여 Application을 중지하고 다시 실행하지 않고도 이를 즉시 반영하도록 하는 기능입니다. 현재 실행 중인 예제를 멈추기 위해 Ctrl + C키를 눌러 Server를 중지하고 아래 명령을 통해 다시 Application을 실행합니다.
dotnet watch |
dotnet watch는 새롭게 Web browser를 실행하고 변경사항을 reload 하는 데 사용되는 Server로 HTTP 연결을 여는 JavaScript를 load합니다.(Browser가 열리는 기능은 launchBrowser속성을 false로 설정하면 사용하지 않을 수 있으며 이때는 수동적으로 browser를 실행해 HTTP 요청을 시도해야 합니다.)
dotnet watch는 Project의 변경사항을 감시하다가 실제 변경사항이 발생하면 Project를 자동으로 재 compile 하게 되고 browser에서 reload 함으로써 변경사항을 즉시 적용하게 됩니다. 이를 확인해 보기 위해 현재 열린 web browser에서 /test.html을 요청하고 이전과 동일한 응답이 발생되는지 확인합니다. 그런 뒤 test.html file을 열어 <h3> 요소를 아래와 같이 변경합니다.
<h3>Changed...</h3>
test.html을 수정한 뒤 file을 저장하게 되면 dotnet watch는 이를 감지하여 자동으로 browser를 update 합니다.
.NET 8 이전에는 class와 같은 file을 추가하는 큰 변경사항이 발생하면 dotnet watch가 이를 감지하기는 하지만 제반영이 안 되는 경우가 있어 수동적으로 Project를 재시작해야 하는 문제가 있었으나 .NET8에 들어와서는 이러한 문제가 개선되어 웬만한 변경사항을 모두 즉각적으로 반영할 수 있게 되었습니다.
4. Package 관리
ASP.NET Core의 특징 중 하나는 기능적으로 세분화를 이루었다는 것입니다. 예를 들어 Database를 다루는데 필요한 기능은 별도의 Package로 분리되었고 필요한 경우 분리된 Package를 Project에 추가함으로서 해당 기능을 사용할 수 있습니다.
(1) NuGet package
.NET package는 dotnet add package명령으로 Project에 추가할 수 있습니다. Project folder에서 아래 명령을 통해 Package를 설치합니다.
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 8.0.3 |
이 명령은 8.0.3 version의 Microsoft.EntityFrameworkCore.SqlServer package를 설치하는 것으로 해당 package의 repository는 nuget.org로 필요한 package를 검색하고 사용가능한 version을 확인해 볼 수 있습니다.
확장자가 *.csproj인 Project file을 열어보면 해당 Project에 설치된 package목록을 확인해 볼 수 있는데 이는 아래 명령으로도 가능합니다.
dotnet list package |
설치된 package를 제거할 때는 'dotnet remove package'명령을 사용하므로 예제에서 위에서 설치한 package를 삭제하기 위해서는 다음과 같은 명령을 통해 삭제할 수 있습니다.
dotnet remove package Microsoft.EntityFrameworkCore.SqlServer |
(2) Tool package
Tool package는 .NET Project상에서 특정 기능을 수행하기 위해 command-line상에서 사용되는 명령을 설치합니다. 이에 대한 한 가지 예로 Entity Framework Core tool을 들 수 있는데 해당 기능을 위해 설치되는 명령어는 ASP.NET Core project에서 Database를 관리하기 위해 사용됩니다. Tool package는 dotnet tool 명령어를 통해 관리되므로 예로 든 Entity Framework Core tools package를 설치하기 위해서는 다음과 같은 명령어를 사용해야 합니다.
dotnet install --global dotnet-ef --version 8.0.3 |
반면 삭제에 필요한 명령은 다음과 같습니다.
dotnet tool uninstall --global dotnet-ef |
Package가 이미 설치된 상태에서 또 설치를 시도하면 오류가 발생할 수 있으므로 미리 설치여부를 확인하거나 아니면 제거 후 최신 Version으로 다시 설치할 수 있습니다.
위 명령에서 dotnet tool install는 Version이 8.0.3인 dotnet-ef package를 설치합니다. (--version을 통해 설치에 필요한 version을 지정하지 않으면 기본적으로 가장 최신의 version이 선택됩니다.) 선택적 option으로 지정한 --global은 Package를 전역적으로 사용하기 위해 설치한다는 것을 의미하는 것으로 특정 Project에 한정되지 않습니다. 필요하다면 특정 Project에 한정된 방식으로 설치할 수 있는데 이때는 'dotnet tool run <명령>'형태로 사용합니다.
Package가 제대로 설치되었는지 확인하려면 아래 명령을 통해 해당 Package가 작동하는지 확인하면 됩니다.
dotnet ef --help |
해당 tool package로 추가된 명령은 dotnet ef를 통해 사용됩니다
(3) client-side package
Client-side package는 image나 CSS, javascript, HTML 등 client로 직접 전달되는 content를 말하며 Library Manager (LibMan) tool에 의해 Project에 추가됩니다. 따라서 LibMan tool package가 설치되어 있지 않다면 아래 명령을 통해 설치해야 합니다.
dotnet tool install --global Microsoft.Web.LibraryManager.cli |
반대로 삭제는 uninstall을 사용합니다.
설치가 완료되면 Project를 초기화하여 LibMan이 설치된 client package를 관리하는 데 사용하는 file을 생성하도록 합니다.
libman init -p cdnjs |
LibMan은 Package를 다른 Repository를 통해서 내려받을 수 있는데 option으로 지정한 -p 인수는 Repository를 가장 많이 사용되는 htts://cdnjs.com으로 지정하고 있습니다. Project가 초기화되면 이제 client-side package를 설치할 수 있습니다. 아래 명령은 가장 유명한 client-side package 중 하나로 Bootstrap CSS framework를 설치하도록 합니다.
libman install bootstrap@5.3.3 -d wwwroot/lib/bootstrap |
이 명령은 bootstrap 5.3.3 version을 CDNJS repository로부터 설치하도록 합니다. 여기서 -d인수는 설치될 위치를 지정합니다. 관례적으로 ASP.NET Core project는 client-side package를 wwwroot/lib folder에 설치합니다.
일단 Package를 설치하고 나면 HTML요소에 bootstrap class를 적용하여 시인성을 향상할 수 있습니다. 아래 예제는 이전에 추가한 test.html file에 bootstrap class를 적용한 예시를 보여주고 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h3 class="bg-primary text-white text-center p-2">Changed...</h3>
</body>
</html>
Application을 실행해 결과를 확인합니다.
5. Project debugging
Debugging에 관해서는 아래 글을 참고해 주시기 바랍니다.
[.NET/C#] - [C# 12와 .NET 8] 4. Debuging과 Testing
Visual Studio Code라면 아래 공식문서를 참고할 수 있고
Debugging in Visual Studio Code
Visual Studio에 관한 문서도 참고할 수 있습니다.
Debugger documentation - Visual Studio (Windows) | Microsoft Learn
'.NET > ASP.NET' 카테고리의 다른 글
[ASP.NET Core] - 6. Shopping mall project 만들기 - 1 (2nd) (2) | 2024.04.05 |
---|---|
[ASP.NET Core] - 5. 단위 Test (2nd) (0) | 2024.03.29 |
[ASP.NET Core] - 3. ASP.NET Core Application 예제 (2nd) (0) | 2024.03.20 |
[ASP.NET Core] - 2. 시작하기 (2nd) (0) | 2024.03.15 |
[ASP.NET Core] - 1. 개요 (2nd) (0) | 2024.03.12 |