연습 - 프로젝트 사용자 지정 - Training

12분

팀이 피자 인벤토리 관리 앱에 대한 작업을 분할했습니다. 팀원들이 사용자를 위해 ASP.NET Core 웹앱을 만들었으며, 이미 데이터베이스에 피자 데이터를 읽고 쓸 수 있는 서비스를 빌드했습니다. 피자 목록 페이지에서 작업하도록 할당되었습니다. 그러면 피자 목록이 표시되고 데이터베이스에 새 피자를 추가할 수 있습니다. 먼저 프로젝트 둘러보기를 통해 프로젝트 구성 방법을 이해할 것입니다.

참고 항목

이 모듈에서는 로컬 개발에 .NET CLI(명령줄 인터페이스) 및 Visual Studio Code를 사용합니다. 이 모듈을 완료하면 Visual Studio(Windows) 또는 Visual Studio Code(Windows, Linux 및 macOS)를 사용한 연속 개발을 사용하여 개념을 적용할 수 있습니다.

프로젝트 파일 얻기

GitHub Codespaces를 사용하는 경우 브라우저에서 리포지토리를 열고코드를 선택한 다음, main 분기에 새 codespace를 만듭니다.

GitHub Codespaces를 사용하지 않는 경우 프로젝트 파일을 가져온 후, 다음 단계를 수행하여 Visual Studio Code에서 엽니다.

명령 셸을 열고 명령줄을 사용하여 GitHub에서 프로젝트를 복제합니다.
```
git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core
```
mslearn-create-razor-pages-aspnet-core 디렉터리로 이동하여 Visual Studio Code에서 프로젝트를 엽니다.
```
cd mslearn-create-razor-pages-aspnet-core
code .
```

팁

호환되는 컨테이너 런타임이 설치된 경우 개발 컨테이너 확장을 사용하여 도구가 사전 설치된 컨테이너에서 프로젝트를 열 수 있습니다.

팀 동료의 작업 검토

잠시 시간을 내어 ContosoPizza 폴더의 기존 코드를 알아보겠습니다. 이 프로젝트는 dotnet new webapp 명령을 사용하여 만든 ASP.NET Core 웹앱입니다. 팀 동료가 변경한 내용은 아래에 설명되어 있습니다.

팁

이러한 변경 내용을 검토하는 데 너무 많은 시간을 할애하지 마세요. 팀원들은 데이터베이스와 서비스를 만들어 데이터베이스에 피자를 읽고 쓰는 작업을 이미 수행했지만 UI를 변경하지는 않았습니다. 다음 단원에서는 해당 서비스를 사용하는 UI를 빌드합니다.

Models 폴더가 프로젝트에 추가되었습니다.
- 모델 폴더에는 피자를 나타내는 Pizza 클래스가 포함되어 있습니다.
Data 폴더가 프로젝트에 추가되었습니다.
- 데이터 폴더에는 데이터베이스 컨텍스트를 나타내는 PizzaContext 클래스가 포함되어 있습니다. Entity Framework Core의 DbContext 클래스에서 상속됩니다. Entity Framework Core는 데이터베이스 작업을 더 쉽게 수행할 수 있는 ORM(개체 관계형 매퍼)입니다.
Services 폴더가 프로젝트에 추가되었습니다.
- Services 폴더에는 피자를 나열하고 추가하는 메서드를 노출하는 PizzaService 클래스가 포함되어 있습니다.
- PizzaService 클래스는 PizzaContext 클래스를 사용하여 데이터베이스에 피자를 읽고 씁니다.
- 클래스는 Program.cs(줄 10)에서 종속성 주입을 위해 등록됩니다.

Entity Framework Core는 다음과 같은 몇 가지 작업을 생성했습니다.

Migrations 폴더가 생성되었습니다.
- Migrations 폴더에는 데이터베이스 스키마를 만드는 코드가 포함되어 있습니다.
SQLite 데이터베이스 파일 ContosoPizza.db가 생성되었습니다.
- SQLite 확장이 설치되어 있거나 GitHub Codespaces를 사용하는 경우 파일을 마우스 오른쪽 단추로 클릭하고 데이터베이스 열기를 선택하여 데이터베이스를 볼 수 있습니다. 데이터베이스 스키마는 Explorer 창의 SQLite Explorer 탭에 표시됩니다.

Razor Pages 프로젝트 구조 검토

프로젝트의 다른 모든 항목은 프로젝트를 만들 때와 변경되지 않습니다. 다음 표에서는 dotnet new webapp 명령에 의해 생성된 프로젝트 구조에 대해 설명합니다.

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

기타 주목할 만한 관찰 내용:

Razor 페이지 파일 및 쌍을 이루는 PageModel 클래스 파일

Razor 페이지는 Pages 디렉터리에 저장됩니다. 위에서 설명한 대로 각 Razor 페이지에는 .cshtml 파일과 .cshtml.csPageModel 클래스 파일이 있습니다. PageModel 클래스를 사용하면 Razor 페이지의 논리와 프레젠테이션을 분리하고, 요청에 대한 페이지 처리기를 정의하고, Razor 페이지로 범위가 지정된 데이터 속성 및 논리를 캡슐화할 수 있습니다.

Pages 디렉터리 구조 및 요청 라우팅

Razor Pages는 요청을 라우팅하는 규칙으로 Pages 디렉터리 구조를 사용합니다. 다음 표에서는 URL을 파일 이름에 매핑하는 방법을 보여 줍니다.

URL	Razor 페이지에 매핑
`www.domain.com`	Pages/Index.cshtml
`www.domain.com/Index`	Pages/Index.cshtml
`www.domain.com/Privacy`	Pages/Privacy.cshtml
`www.domain.com/Error`	Pages/Error.cshtml

Pages 디렉터리의 하위 폴더는 Razor 페이지를 구성하는 데 사용됩니다. 예를 들어 Pages/Products 디렉터리가 있는 경우 URL은 해당 구조를 반영합니다.

URL	Razor 페이지에 매핑
`www.domain.com/Products`	Pages/Products/Index.cshtml
`www.domain.com/Products/Index`	Pages/Products/Index.cshtml
`www.domain.com/Products/Create`	Pages/Products/Create.cshtml

레이아웃 및 기타 공유 파일

여러 페이지에서 공유되는 여러 파일이 있습니다. 이러한 파일은 일반적인 레이아웃 요소 및 페이지 가져오기를 결정합니다. 다음 표에서는 각 파일의 용도를 설명합니다.

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

처음으로 프로젝트 실행

프로젝트를 실행하여 작동 중인 프로젝트를 확인해 보겠습니다.

Explorer에서 ContosoPizza 폴더를 마우스 오른쪽 단추로 클릭하고 통합 터미널에서 열기를 선택합니다. 그러면 프로젝트 폴더의 컨텍스트에서 터미널 창이 열립니다.
터미널 창에서 다음 명령을 입력합니다.
```
dotnet watch
```
이 명령은 다음을 수행합니다.
- 프로젝트를 빌드합니다.
- 앱을 시작합니다.
- 파일 변경 내용을 감시하고 변경 내용을 감지하면 앱을 다시 시작합니다.
IDE는 브라우저에서 앱을 열라는 메시지를 표시합니다. 브라우저에서 열기를 선택합니다.

팁

터미널 창에서 URL을 찾아 앱을 열 수도 있습니다. Ctrl 키를 누른 상태로 URL을 클릭하여 브라우저에서 엽니다.
렌더링된 홈페이지를 IDE의 Pages/Index.cshtml과 비교합니다.
- 파일에서 HTML, Razor 구문, C# 코드의 조합을 관찰합니다.
  - Razor 구문은 @ 문자로 표시됩니다.
  - C# 코드는 @{ } 블록으로 묶입니다. 파일 맨 위에 있는 지시문을 기록해 둡니다.
  - @page 지시문은 이 파일이 Razor 페이지임을 지정합니다.
  - @model 지시문은 페이지의 모델 형식을 지정합니다(이 경우 Pages/Index.cshtml.cs에서 정의된 IndexModel).
- C# 코드 블록을 검토합니다.
  - 코드는 ViewData 사전 내의 Title 항목 값을 “홈페이지”로 설정합니다.
  - ViewData 사전은 Razor 페이지와 IndexModel 클래스 간에 데이터를 전달하는 데 사용됩니다.
  - 런타임 시 Title 값은 페이지의 <title> 요소를 설정하는 데 사용됩니다.

터미널 창에서 앱을 실행 상태로 둡니다. 예정된 단위에서 사용합니다. 실행 중인 Contoso Pizza 앱과 함께 브라우저 탭을 그대로 둡니다. 앱을 변경하면 브라우저가 자동으로 새로 고침하여 변경 내용을 표시합니다.

방문 페이지 사용자 지정

피자 앱과 더 관련성을 높일 수 있도록 방문 페이지를 몇 가지 변경해 보겠습니다.

Pages/Index.cshtml에서 C# 코드 블록의 코드를 다음 코드로 바꿉니다.
```
ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);
```
위의 코드는
- ViewData 사전 내 Title 항목의 값을 “피자 애호가를 위한 홈”으로 설정합니다.
- 비즈니스가 시작된 후 경과된 시간을 계산합니다.
다음과 같이 HTML을 수정합니다.
- <h1> 요소를 다음 코드로 바꿉니다.
```
<h1 class="display-4">Welcome to Contoso Pizza</h1>
```
- <p> 요소를 다음 코드로 바꿉니다.
```
<p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>
```
위의 코드는
- 제목을 “Contoso Pizza 시작”으로 변경합니다.
- 비즈니스가 시작된 후 경과된 일 수를 표시합니다.
  - @ 문자는 HTML에서 Razor 구문으로 전환하는 데 사용됩니다.
  - Convert.ToInt32 메서드는 timeInBusiness 변수의 TotalDays 속성을 정수로 변환하는 데 사용됩니다.
  - Convert 클래스는 ContosoPizza.csproj파일의 <ImplicitUsings> 요소에 의해 자동으로 가져오는 System 네임스페이스의 일부입니다.
파일을 저장합니다. 앱이 있는 브라우저 탭이 자동으로 새로 고침되어 변경 내용을 표시합니다. GitHub Codespaces를 사용하는 경우 파일이 자동으로 저장되지만 브라우저 탭을 수동으로 새로 고쳐야 합니다.

중요

dotnet watch를 사용하여 파일을 저장할 때마다 터미널 창을 주의 깊게 관찰합니다. 경우에 따라 코드에 무례한 편집이라고 하는 내용이 포함될 수 있습니다. 즉, 애플리케이션을 다시 시작하지 않고는 변경한 코드를 다시 컴파일할 수 없습니다. 앱을 다시 시작하라는 메시지가 표시되면 y(예) 또는 a(항상)를 누릅니다. 항상 터미널 창에서 Ctrl+C를 눌러 애플리케이션을 중지한 다음, dotnet watch를 실행하여 다시 시작할 수 있습니다.

Razor 페이지를 처음 변경했습니다! 다음 단원에서는 피자 목록을 표시하는 새 페이지를 앱에 추가합니다.

계속

연습 - 프로젝트 사용자 지정

프로젝트 파일 얻기

팀 동료의 작업 검토

Razor Pages 프로젝트 구조 검토

처음으로 프로젝트 실행

방문 페이지 사용자 지정

피드백