WooGong's Blog

.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 프로젝트의 구조를 좀 더 자세히 살펴보고, 간단한 기능을 추가해서 웹 페이지가 어떻게 동작하는지 직접 확인해 보도록 하겠습니다.

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