활동 3 - 웹 애플리케이션 만들기

활동 지침

프로젝트 생성

  1. Visual Studio Code가 열려 있는지 확인합니다.

  2. 액티비티 바(Activity Bar)에서 Explorer 아이콘을 선택합니다.

  3. Create .NET Project 버튼을 클릭합니다.

    명령 팔레트(Command Palette)가 드롭다운 형태로 나타나며 프로젝트 유형 목록이 표시됩니다.

  4. 제공된 목록에서 Blazor Server App을 선택합니다.

  5. 새 애플리케이션을 저장할 폴더를 선택합니다.

  6. 애플리케이션에 이름을 지정합니다.

    애플리케이션이 생성되며, 탐색기(Explorer)에서 Solution 메뉴가 표시됩니다.

    Screenshot of Solution Explorer in VS Code

이제 여러분이 직접 만든 페이지가 생겼습니다!

Razor Pages 프로젝트 구조 검토

아래 표는 생성된 Razor Pages 프로젝트 구조를 설명합니다:

이름설명
Pages/Razor 페이지와 지원 파일을 포함합니다. 각 Razor 페이지는 .cshtml 파일과 .cshtml.cs PageModel 클래스 파일을 가집니다.
wwwroot/HTML, JavaScript, CSS와 같은 정적 자산 파일을 포함합니다.
ContosoPizza.csproj프로젝트의 종속성과 같은 구성 메타데이터를 포함합니다.
Program.cs앱의 진입점 역할을 하며, 라우팅과 같은 앱의 동작을 구성합니다.

기타 주요 관찰 사항:

다음 표는 URL이 파일명으로 매핑되는 방식을 보여줍니다:

URL매핑되는 Razor 페이지
www.domain.comPages/Index.cshtml
www.domain.com/IndexPages/Index.cshtml
www.domain.com/PrivacyPages/Privacy.cshtml
www.domain.com/ErrorPages/Error.cshtml

Pages 디렉터리의 하위 폴더는 Razor 페이지를 체계적으로 구성하는 데 사용됩니다. 예를 들어, Pages/Products 디렉터리가 있다면 URL은 아래와 같이 매핑됩니다:

URL매핑되는 Razor 페이지
www.domain.com/ProductsPages/Products/Index.cshtml
www.domain.com/Products/IndexPages/Products/Index.cshtml
www.domain.com/Products/CreatePages/Products/Create.cshtml

Razor Pages는 여러 페이지에서 공통으로 사용되는 파일들을 지원합니다. 이 파일들은 공통 레이아웃 요소와 페이지에서 공유되는 설정을 정의합니다. 다음 표는 주요 공용 파일의 목적을 설명합니다:

파일명설명
_ViewImports.cshtml여러 페이지에서 사용되는 네임스페이스와 클래스를 가져옵니다.
_ViewStart.cshtml모든 Razor 페이지에 적용되는 기본 레이아웃을 지정합니다.
Pages/Shared/_Layout.cshtml_ViewStart.cshtml 파일에 의해 지정된 레이아웃으로, 여러 페이지에서 공통 레이아웃 요소를 구현합니다.
Pages/Shared/_ValidationScriptsPartial.cshtml모든 페이지에 유효성 검사 기능을 제공합니다.

프로젝트 실행

  1. Visual Studio Code 열기 및 탐색기 선택 확인

    • Visual Studio Code가 열려 있는지 확인하고, 액티비티 바(Activity bar)에서 탐색기(Explorer)가 선택되어 있는지 확인합니다.
  2. 솔루션 탐색기에서 프로젝트 실행

    • 솔루션 탐색기(Solution Explorer)에서 프로젝트 이름을 마우스 오른쪽 버튼으로 클릭합니다.

    • Debug(디버그)를 선택한 후, Start new instance(새 인스턴스 시작)를 선택합니다.

이 작업은 새 웹사이트를 빌드하고 실행합니다.

Screenshot of the website you just created
  1. 웹사이트에서 CounterFetch Data 링크를 클릭하여 페이지를 탐색합니다.

랜딩 페이지 사용자 지정

웹 애플리케이션에 더 적합하도록 랜딩 페이지를 변경해 봅시다.

  1. Pages/Index.razor 파일에서 아래 C# 코드를 추가합니다:
@code {
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2010, 01, 17);
}

위 코드는 비즈니스가 시작된 이후 경과한 시간을 계산합니다.

  1. PageTitle 요소를 “Welcome to my first web page” 로 변경합니다.

  2. h1 요소를 “Welcome to my first Razor web app” 로 변경합니다.

  3. 나머지 텍스트를 아래 코드로 대체합니다:

<p class="lead">The best website in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

코드 설명:

  1. 파일을 저장한 후, 앱이 실행 중인 브라우저 탭을 새로고침하여 변경 내용을 확인합니다.
Screenshot of site after changes from Activity 3