[C#] Blazor WebAssembly App 프로젝트 생성하기

ASP.NET Core Razor 구성 요소 | Microsoft Docs

구글 Documet를 참조하여 Blazor WebAssembly App 프로젝트를 생성해보겠다

 

 

프로젝트 생성

 

다음 클릭 후 

프로젝트 위치 설정 후

 

 

HTTPS에 대한 구성과 프로그레시브 웹 애플리케이션에 체크한다

=> 프로젝트 생성 완료

 

 

 

 

 프로젝트가 실행된 모습

 

한번 만들어보자

 

 

 

 

1. 솔루션 탐색기에서 Shared 폴더에 Heading.razor 라는 Razor Component 를 생성한다

Razor Componet를 간편하게 사용하기 위해서 3가지 파일을 생성해야한다

중요한 것은 class, css 파일의 이름에 Razor Componet 파일 이름을 포함시켜야한다는 것이다

 

• Razor Componet : html 코드 및 Razor Componet 구성
• class : Razor Componet의 서비스 코드 작성
• css : Razor Componet의 디자인 코드 작성

 

 

Razor Componet 인 Heading.razor 를 생성하자

 

 

 

그리고 Heading.razor 파일의 코드를 작성할 클래스 파일을 생성한다

 

 

 

 

마지막으로 디자인 코드를 작성할 Heading.razor.css 을 생성한다 

 

 

 

3. Heading.razor 작성

<h1 style="font-style:@headingFontStyle">@headingText</h1>

@가 붙은 코드는  Heading.razor.cs 에서 작성할 것이다

 

 

 

4. Heading.razor.cs 작성

namespace BlazorApp3.Shared;
public partial class Heading
{
    string headingFontStyle = "italic";
    string headingText = "Put on your new Blazor!";
}

class 선언에 partial 키워드를 적어야지 에러가 안난다

Heading 클래스에 변수를 선언하면 Heading.razor 에서 @를 붙여 사용할 수 있다

 

 

 

5. Heading.razor.css 작성

h1 {
    color:black;
}

css 파일은 Heading.razor의 디자인을 담당한다

 

 

 

 

이렇게 생성된 Razor Component 는 Componet 단위로 사용할 수 있다

Index.razor 에 적용시켜보자

<div>
    <Heading/>
</div>

Heading Component 를 마치 HTML 코드처럼 작성하여

Component 단위로 간편하게 사용할 수 있다