ASP.NET Core MVC 웹 애플리케이션 만들기
이 강의에서는 ASP.NET Core MVC를 사용하여 간단한 웹 페이지를 만드는 전체 과정을 안내합니다. 이 과정은 프로젝트 생성부터 개발, 실행에 이르기까지의 단계를 포함합니다.
시작하기 전에
ASP.NET Core MVC 프로젝트를 시작하기 전에, .NET 8.0 이상이 설치되어 있어야 하며, Visual Studio 2022 이상 또는 Visual Studio Code와 같은 코드 편집기가 필요합니다.
프로젝트 생성
- 터미널 또는 명령 프롬프트를 열고, 새 프로젝트를 생성할 디렉터리로 이동합니다.
- 다음 명령어를 사용하여 ASP.NET Core MVC 프로젝트를 생성합니다.
dotnet new mvc -n DotNetNote
이 명령은 DotNetNote라는 이름의 새 MVC 프로젝트를 생성합니다.
- 생성된
DotNetNote디렉터리로 이동합니다.
cd DotNetNote
컨트롤러 추가
Controllers 폴더 안에 PagesController.cs 파일을 생성하고 다음 내용을 추가합니다.
namespace DotNetNote.Controllers;
public class PagesController : Controller
{
public IActionResult Index() => View();
public IActionResult Welcome() => View();
public IActionResult NotFoundPage() => View();
public IActionResult NotAssigned() => View();
public IActionResult IntroDemo() => View();
}
뷰 페이지 추가
Views 폴더 안에 Pages라는 새로운 폴더를 만들고, 다음과 같은 뷰 파일들을 추가합니다.
Index.cshtml
Views/Pages/Index.cshtml 파일을 생성하고 다음 내용을 추가합니다.
<h1>여기는 /Pages/Index 입니다.</h1>
Welcome.cshtml
Views/Pages/Welcome.cshtml 파일을 생성하고 다음 내용을 추가합니다.
<h1>환영합니다!!!</h1>
NotFoundPage.cshtml
Views/Pages/NotFoundPage.cshtml 파일을 생성하고 다음 내용을 추가합니다.
<h1>404 Not Found.</h1>
NotAssigned.cshtml
Views/Pages/NotAssigned.cshtml 파일을 생성하고 다음 내용을 추가합니다.
<h1>할당되지 않았습니다.</h1>
<input type="button" value="닫기" onclick="window.close();" />
IntroDemo.cshtml
ASP.NET Core MVC에서는 뷰의 레이아웃을 지정하여 일관된 페이지 구조를 유지할 수 있습니다. 레이아웃 파일은 일반적으로 Views/Shared 폴더 내에 위치하며, 모든 뷰에서 공통으로 사용되는 HTML 구조(예: 헤더, 푸터, 메뉴 등)를 정의합니다.
Views 폴더의 Pages 폴더의 IntroDemo.cshtml
IntroDemo.cshtml 파일에서 Layout = null;을 설정함으로써, 해당 뷰가 어떠한 레이아웃도 사용하지 않고 독립적으로 렌더링 됨을 명시합니다. 이는 특정 페이지가 기본 레이아웃과 다른 구조를 가질 때 유용합니다.
@{
Layout = null;
}
<h1>소개(Pages)</h1>
Views 폴더의 Shared 폴더의 IntroDemo.cshtml
뷰 파일을 Views/Shared 폴더에 배치하면, 어플리케이션의 다양한 부분에서 재사용될 수 있는 공통 뷰 컴포넌트를 만들 수 있습니다. 이 경우, Layout 속성을 주석 처리하거나 지정된 레이아웃 파일의 경로를 명시하여 해당 뷰의 레이아웃을 설정할 수 있습니다.
@{
//Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>소개(Shared 폴더)</h1>
위 코드에서 Layout = "~/Views/Shared/_Layout.cshtml";를 주석 처리하지 않고 활성화하면, IntroDemo.cshtml 뷰는 지정된 _Layout.cshtml 파일을 레이아웃으로 사용하여 렌더링됩니다. 여기서 ~/는 애플리케이션의 루트 디렉터리를 나타냅니다.
전체 파일 경로 지정
레이아웃을 지정할 때는 상대 경로 또는 루트 경로에서 시작하는 전체 파일 경로를 사용할 수 있습니다. 예를 들어, ~/Views/Shared/_Layout.cshtml 경로는 애플리케이션의 루트에서 Views/Shared 폴더 내 _Layout.cshtml 파일을 참조합니다. 이 방식을 통해 다양한 뷰에서 동일한 레이아웃 파일을 공유하며 일관된 사용자 인터페이스를 유지할 수 있습니다.
레이아웃 파일을 사용함으로써, 뷰 파일 내에서 반복되는 HTML 마크업을 줄이고, 애플리케이션의 유지보수를 용이하게 할 수 있습니다. 또한, 레이아웃을 변경함으로써 전체 사이트의 룩앤필을 쉽게 업데이트할 수 있는 장점이 있습니다.
프로젝트 실행
프로젝트 디렉터리(DotNetNote) 내에서 다음 명령어를 실행하여 웹 애플리케이션을 시작합니다.
dotnet run
dotnet run 명령은 빌드 및 실행 과정을 자동으로 처리합니다. 실행이 완료되면, 웹 브라우저를 열고 지정된 포트(예: https://localhost:5000)에 접속하여 애플리케이션의 페이지를 볼 수 있습니다.
페이지 접근하기
웹 애플리케이션 실행 후 다음 경로를 통해 각 페이지에 접근할 수 있습니다:
- 메인 페이지 (
Index):/Pages - 환영 페이지 (
Welcome):/Pages/Welcome - 404 오류 페이지 (
NotFoundPage):/Pages/NotFoundPage - 할당되지 않은 페이지 (
NotAssigned):/Pages/NotAssigned - 소개 페이지 (
IntroDemo):/Pages/IntroDemo
이 강의를 통해 ASP.NET Core MVC를 사용하여 간단한 웹 페이지를 만드는 방법을 배웠습니다. 이제 기본적인 웹 애플리케이션 구축 방법을 이해하고, 다양한 컨트롤러와 뷰를 추가하여 복잡한 애플리케이션을 개발할 수 있는 기반을 마련했습니다.