본문 바로가기
일하기/공부하기

첫 Blazor App 만들기

by 달콤말 2021. 3. 14.
반응형

BlazorMS에서 201812월 공개한 SPA를 위한 .NET 컴포넌트 기반의 UI 웹 프레임워크로, JavaScript 대신 .NETC#을 사용한다.

Blazor 컴포넌트는 웹앱 개발을 위해 다양한 방법으로 사용될 수 있는데, 서버 영역에선 Blazor Server를 통해 호스팅되거나, Blazor WebAssembly를 통해 wasm 기반의 .NET 런타임을 통해 클라이언트 영역에서 실행될 수 있다.

Blazor: A Beginner's Guide

Blazor WebAssembly Visual Studio Code를 사용하여 웹앱 빌드

Awesome Blazor


첫번째 Blazor App 만들기

  • install the .NET SDK (Software Development Kit) - 닷넷 SDK를 설치하세요.

  • open a new command prompt and run - 커맨드 프롬프트를 열고 닷넷을 실행하세요.

  • Create new Blazor app project - 새로운 Blazor 앱 프로젝트를 만드세요. 

This command creates your new Blazor app project and places it in a new directory called BlazorApp inside your current location. (현재 디렉토리에 BlazorApp 이라는 디렉토리가 새로 생성됩니다.)
디렉토리로 이동해서 살펴보면, 

  • Program.cs is the entry point for the app that starts the server. (서버를 시작하는 포인트)
  • Startup.cs is where you configure the app services and middleware. (서비스와 미들웨어에 대한 컨피규레이션)
  • App.razor is the root component for the app. (앱의 루트(최상위) 컴포넌트)
  • The BlazorApp/Pages directory contains some example web pages for the app. (앱의 예제 웹페이지들이 들어있는 디렉토리)
  • BlazorApp.csproj defines the app project and its dependencies. (앱 프로젝트와 의존관계를 정의)
  • Run your app  - 앱을 실행하세요.

  • The dotnet watch run command will build and start the app, and then rebuild and restart the app whenever you make code changes. You can stop the app at any time by selecting Ctrl+C.
    ((리)빌드/(리)스타트 앱 명령어, 앱을 중단하고 싶으면 Ctrl + C)
  • Wait for the app to display that it's listening on http://localhost:5000 and for the browser to launch at that address. (브라우저가 열리고 http://localhost:5000에 앱이 디스플레이됨) 

The displayed page is defined by the   Pages / Index.razor   file .

반응형

댓글