Visual Studio 앱 프로젝트 검색
웹앱을 성공적으로 만들고 Azure에 게시했습니다. 하지만 변경하려는 경우 어떻게 되나요? Visual Studio는 앱이 게시되는 위치를 기억하므로 앱 업데이트 및 변경을 두 번만 클릭하면 되는 프로세스로 만들 수 있습니다.
프로젝트 구조 살펴보기
Visual Studio에서 ASP.NET Core 웹앱을 만들었으므로 이제 웹 사이트를 편집하고 사용자 지정해야 합니다. Visual Studio에서 자동으로 만든 프로젝트의 구조를 살펴보겠습니다.
종속성
Dependencies 폴더에는 앱이 실행되도록 하는 ASP.NET Core 내부 요소가 포함됩니다. 특정 타사 패키지를 추가하지 않는 한, 이 폴더에서 많은 시간을 보낼 필요는 없습니다.
속성
Properties 폴더에는 웹앱을 호스트하는 위치에 대한 구성 데이터가 포함되어 있습니다. 지금 PublishProfiles 폴더를 확장하면 Alpine Ski Hill 사이트 URL이 표시됩니다. 각 게시 프로필은 Visual Studio가 파일을 업로드하는 데 사용하는 Azure 주소와 같은 게시 구성 정보가 포함된 .xml 파일입니다.
wwwroot
wwwroot파일에는 css, js, 이미지, lib 파일 등 사이트의 모든 정적 자산이 포함되어 있습니다. 사이트에 스타일을 지정하고 더 많은 기능을 추가할 준비가 되면 여기에서 작업하게 됩니다.
페이지
Pages 폴더에는 사이트 페이지에 사용할 Razor 템플릿이 있습니다. Razor는 ASP.NET 웹 페이지에 서버 코드를 포함하기 위한 태그 구문입니다. 여기에는 HTML이 포함되며 사이트에서 데이터를 표시하고 논리를 실행하기 위한 특별한 규칙이 있습니다.
사이트의 각 페이지는 두 개의 코드 파일로 표시됩니다.
Razor 태그 파일인
.cshtml
파일입니다. 이 파일에는 표시 HTML과 일부 C# 논리가 포함되어 있습니다.PageModel
클래스에서 상속되는, C# 코드가 숨겨진.cs
파일입니다. 이 파일을 사용하면 HTTP 요청을 가로채고 해당 요청에 대한 일부 처리를 수행한 후 Razor 파일로 데이터를 전달할 수 있습니다.
appsetting.json
ASP.NET Core용 구성 파일입니다.
Program.cs
Program.cs 파일은 사이트의 웹 호스트를 구성하고 시작합니다.
Razor 템플릿 소개
우리는 웹 사이트에 몇 가지 기본적인 변화를 주려고 합니다. Razor 템플릿을 활용하여 웹앱을 사용자 지정하는 방법에 대한 기본적인 이해가 있어야 합니다.
Razor란?
Razor는 C#을 사용하여 동적 웹 페이지를 만드는 데 사용되는 ASP.NET 구문입니다. 서버가 Razor 페이지를 읽으면 HTML을 렌더링하기 전에 C# 코드가 실행됩니다. 이렇게 하면 동적 콘텐츠를 신속하게 생성할 수 있습니다.
Razor는 @
지시문을 사용하여 페이지를 처리하는 방법을 ASP.NET에 알려 줍니다.
예를 들어 Privacy.cshtml
페이지의 코드를 살펴보겠습니다.
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
@page
지시문은 이 파일을 Razor 페이지로 처리하도록 ASP.NET에 알려 줍니다.@model
지시문은 이 Razor 페이지를PrivacyModel
C# 클래스와 연결하도록 ASP.NET에 알려 줍니다.
또한 Razor는 @
기호를 사용하여 코드와 HTML 간에 전환합니다. 앞의 코드 조각을 살펴보면 @{ ... }
를 알 수 있습니다. 이 코드 블록은 실행되지만 렌더링되지 않는Razor 코드 블록입니다.
코드 명령문의 출력을 렌더링하려면 C# 식 앞에 @
를 사용합니다. <h1>
태그 앞의 코드 블록에 한 가지 예가 있습니다.
웹 사이트를 만들고 게시하는 것은 좋은 웹 사이트를 만드는 첫 번째 단계에 불과합니다. 콘텐츠 추가를 시작하면 사이트를 업데이트해야 합니다. 사이트를 Azure에 게시한 후 언제든지 업데이트할 수 있습니다.