Blazor 웹앱 만들기Create Blazor web apps

이 가이드에서는 첫 번째 Blazor 웹앱을 만드는 방법을 설명합니다.This guide offers an introduction to creating your first Blazor web app. 자세한 지침은 ASP.NET Core 소개Blazor를 참조하세요.For more in-depth guidance, see Introduction to ASP.NET Core Blazor.

ASP.NET Core Blazor는 두 가지 호스팅 옵션 Blazor WebAssembly(WASM) 또는 Blazor Server를 지원합니다.ASP.NET Core Blazor supports two different hosting options; Blazor WebAssembly (WASM) or Blazor Server. Mac용 Visual Studio는 두 호스팅 모델을 모두 지원합니다.Visual Studio for Mac supports both hosting models. Mac용 Visual Studio 8.4 이상 버전에서는 Blazor Server를 지원하고, Mac용 Visual Studio 8.6 이상 버전에서는 둘 다 지원합니다.Visual Studio for Mac 8.4+ supports Blazor Server and Visual Studio for Mac 8.6+ supports both. Blazor 호스팅 모델에 관한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.For more info on Blazor hosting models see ASP.NET Core Blazor hosting models . Mac용 Visual Studio에서 Blazor WebAssembly 프로젝트 디버깅에 대한 지원은 미리 보기 v8.8에서 사용할 수 있습니다(Visual Studio > 업데이트 확인... 메뉴에서 미리 보기 업데이트 채널을 통해 사용할 수 있음).Support for debugging Blazor WebAssembly projects in Visual Studio for Mac is available in the Preview release of v8.8 (available via the Preview update channel in the Visual Studio > Check for Updates... menu).

Blazor란?What is Blazor? Blazor는 .NET을 사용하여 대화형 클라이언트 쪽 웹 UI를 빌드하기 위한 프레임워크로, 웹 개발자에게 다음과 같은 이점을 제공합니다.Blazor is a framework for building interactive client-side web UI with .NET, which offers the following advantages to web developers:

  • JavaScript 대신 C#으로 코드를 작성합니다.Write code in C# instead of JavaScript.
  • .NET 라이브러리의 기존 .NET 에코시스템을 활용합니다.Leverage the existing .NET ecosystem of .NET libraries.
  • 서버 및 클라이언트에서 앱 논리를 공유합니다.Share app logic across server and client.
  • .NET의 성능, 안정성 및 보안을 활용합니다.Benefit from .NET’s performance, reliability, and security.
  • PC, Linux 및 macOS에서 Visual Studio를 사용하여 생산성을 유지합니다.Stay productive with Visual Studio on PC, Linux, and macOS.
  • 안정적이고, 기능이 풍부하고, 사용하기 쉬운 공통 언어, 프레임워크 및 도구 세트를 기반으로 빌드합니다.Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

새 Blazor WebAssembly 프로젝트 만들기Create a new Blazor WebAssembly project

  1. 시작 창 에서 새로 만들기 를 선택하여 새 프로젝트를 만듭니다.On the Start Window, select New to create a new project:

    새 선택 영역이 강조 표시된 Mac용 Visual Studio 시작 창

  2. 새 프로젝트 대화 상자에서 .NET Core > > Blazor WebAssembly 앱 을 선택하고 다음 을 선택합니다. Blazor WebAssembly를 사용하는 새 프로젝트 대화 상자의 스크린샷 ASP.NET Core 아래 앱 창에서 앱이 강조 표시되고 다음 단추가 선택됩니다.In the New Project dialog box, select .NET Core > App > Blazor WebAssembly App and select Next: Screenshot of the New Project dialog with Blazor WebAssembly App highlighted in the App pane under ASP.NET Core and the Next button selected.

  3. 대상 프레임워크로 .NET Core 3.1을 선택하고 다음 을 선택합니다.Select .NET Core 3.1 as the target framework, then select Next. 대상 프레임워크가 .NET Core 3.1로 선택되어 표시된 새 Blazor WebAssembly 앱 구성 대화 상자Configure your new Blazor WebAssembly App dialog displayed with Target Framework selected to .NET Core 3.1

  4. 프로젝트 이름을 선택하고 필요한 경우 Git 지원을 추가합니다.Choose a name for your project, and add Git support if desired. 만들기 를 선택하여 프로젝트를 만듭니다.Select Create to create the project. 프로젝트 이름을 입력하는 동안 표시되는 새 Blazor WebAssembly 앱 구성 대화 상자Configure your new Blazor WebAssembly App dialog displayed while entering Project Name

    Mac용 Visual Studio에서 프로젝트가 코드 레이아웃 창에 열립니다.Visual Studio for Mac opens your project in the Code layout window.

  5. 실행 > 디버깅하지 않고 시작 을 선택하여 앱을 실행합니다.Select Run > Start Without Debugging to run the app.

    Visual Studio에서 Kestrel을 시작하고 브라우저에서 https://localhost:5001을 열어 첫 번째 Blazor 웹앱을 표시합니다.Visual Studio starts Kestrel, opens a browser to https://localhost:5001, and displays your Blazor web app.

    Microsoft Edge의 Blazor 웹앱

새 Blazor Server 프로젝트 만들기Creating a new Blazor Server project

  1. 시작 창 에서 새로 만들기 를 선택하여 새 프로젝트를 만듭니다.On the Start Window, select New to create a new project:

    새 선택 영역이 강조 표시된 Mac용 Visual Studio 시작 창

  2. 새 프로젝트 대화 상자에서 .NET Core > > Blazor Server 앱 을 선택하고 다음 을 선택합니다. Blazor)를 사용하는 새 프로젝트 대화 상자의 스크린샷 ASP.NET Core 아래의 앱 창에서 서버 앱이 강조 표시되고 다음 단추가 선택됩니다.In the New Project dialog box, select .NET Core > App > :::no-loc(Blazor Server App and select Next: Screenshot of the New Project dialog with Blazor Server App highlighted in the App pane under ASP.NET Core and the Next button selected.

  3. 대상 프레임워크로 .NET Core 3.1을 선택하고 다음 을 선택합니다.Select .NET Core 3.1 as the target framework, then select Next. 대상 프레임워크가 .NET Core 3.1로 선택된 새 Blazor Server 앱 구성 대화 상자Configure your new Blazor Server App dialog displayed with Target Framework selected to .NET Core 3.1

  4. 프로젝트 이름을 선택하고 필요한 경우 Git 지원을 추가합니다.Choose a name for your project, and add Git support if desired. 만들기 를 선택하여 프로젝트를 만듭니다.Select Create to create the project. 대상 프레임워크가 .NET Core 3.1로 선택된 새 Blazor Server 앱 구성 대화 상자Configure your new Blazor Server App dialog displayed while entering Project Name

    Mac용 Visual Studio에서 프로젝트가 코드 레이아웃 창에 열립니다.Visual Studio for Mac opens your project in the Code layout window.

  5. 실행 > 디버깅하지 않고 시작 을 선택하여 앱을 실행합니다.Select Run > Start Without Debugging to run the app.

    Visual Studio에서 Kestrel을 시작하고 브라우저에서 https://localhost:5001을 열어 첫 번째 Blazor 웹앱을 표시합니다.Visual Studio starts Kestrel, opens a browser to https://localhost:5001, and displays your Blazor web app.

    Microsoft Edge의 Blazor 웹앱

Mac용 Visual Studio의 Blazor 지원Blazor support in Visual Studio for Mac

Mac용 Visual Studio(버전 8.4부터)에는 새 Blazor Server 프로젝트를 만드는 데 도움이 되는 새로운 기능이 포함되어 있습니다.Visual Studio for Mac (starting with version 8.4) includes new features to help you create new Blazor server projects. 또한 Blazor 프로젝트를 빌드, 실행 및 디버깅과 같은 표준 지원을 제공합니다.As well, it provides you the standard support you would expect such as building, running and debugging Blazor projects. Mac용 Visual Studio 8.6에서는 Blazor WebAssembly 프로젝트 만들기, 빌드 및 실행이 추가로 지원됩니다.In Visual Studio for Mac 8.6 support for creating, building and running Blazor WebAssembly projects was added.

위의 연습에서는 Blazor Server 앱 프로젝트 템플릿을 사용하여 새 Blazor Server 앱 또는 Blazor WebAssembly 앱 프로젝트를 만드는 방법을 살펴보았습니다.In the walkthrough above, we saw how the Blazor Server App project template helps you create a new Blazor Server App or Blazor WebAssembly App project. Mac용 Visual Studio에서 Blazor 프로젝트 개발을 지원하기 위한 추가 기능 중 일부를 살펴보겠습니다.Let's take a look at some of the additional features in Visual Studio for Mac to support Blazor project development.

.razor 파일에 대한 편집기 지원Editor support for .razor files

Mac용 Visual Studio에는 Blazor 애플리케이션을 만들 때 주로 사용하는 .razor 파일을 편집하는 기능이 포함되어 있습니다.Visual Studio for Mac includes support for editing .razor files - the majority of the files that you’ll be using when creating Blazor applications. Mac용 Visual Studio는 프로젝트에 선언된 Razor 구성 요소 완성을 포함하여 .razor 파일에 대한 전체 색 지정 및 완성 지원을 제공합니다.Visual Studio for Mac provides full colorization and completion support for your .razor files including completions for Razor components declared in the project.

Blazor에 대한 Intellisense를 보여 주는 Mac용 Visual Studio 편집기 창

Azure App Service에 Blazor 애플리케이션 게시Publishing Blazor applications to Azure App Service

Blazor 애플리케이션을 Azure App Service에 직접 게시할 수도 있습니다.You can also publish Blazor applications directly to Azure App Service. Azure에서 Blazor 앱을 실행하기 위한 Azure 계정이 없는 경우 언제든지 여기에서 별도 비용 없이 가입할 수 있습니다. 그러면 12개월 인기 서비스 무료 혜택, $200 무료 Azure 크레딧, 25개 이상의 상시 무료 서비스가 제공됩니다.If you don’t have an Azure account to run your Blazor app on Azure, you can always sign up for a free one here that also comes with 12 months of free popular services, $200 in free Azure credits, and over 25 always free services.

Azure 게시 환경을 보여 주는 Mac용 Visual Studio

프로젝트 분석Project anatomy

Blazor 웹앱은 기본적으로 몇 가지 디렉터리와 파일을 포함합니다.Blazor web apps include a few directories and files by default. 시작할 때 알아야 할 주요 항목은 다음과 같습니다.As you're getting started, here are the main ones you'll need to be familiar with:

페이지 폴더Pages folder

이 폴더에는 .razor 파일 확장명을 사용하는 프로젝트의 웹 페이지가 포함됩니다.This folder contains a project's webpages, which use a .razor file extension.

공유 폴더Shared folder

이 폴더에는 .razor 확장명을 사용하는 공유 구성 요소가 포함됩니다.This folder includes shared components, also using the .razor extension. 여기에는 애플리케이션 전체에서 공통 레이아웃을 정의하는 데 사용되는 MainLayout.razor 가 포함됩니다.You'll see that this includes MainLayout.razor, which is used to define common layout across the application. 또한 모든 페이지에서 사용되는 공유 NavMenu.razor 구성 요소도 포함됩니다.It also includes the shared NavMenu.razor component, which is used on all pages. 재사용 가능한 구성 요소를 만들면 공유 폴더로 이동합니다.If you're creating reusable components, they'll go in the Shared folder.

앱 설정App settings

appSettings.json 파일에는 연결 문자열과 같은 구성 데이터가 포함되어 있습니다.The appSettings.json file contains configuration data such as connection strings.

구성에 대한 자세한 내용은 ASP.NET의 구성 가이드를 참조하세요.For more information about configuration, see the Configuration in ASP.NET guide.

wwwroot 폴더wwwroot folder

이 폴더에는 HTML, JavaScript, CSS 파일과 같은 정적 파일이 포함되어 있습니다.This folder contains static files, such as HTML, JavaScript, and CSS files. 자세한 내용은 ASP.NET Core의 정적 파일을 참조하세요.For more information, see Static files in ASP.NET Core.

Program.csProgram.cs

이 파일에는 프로그램 진입점이 포함되어 있습니다.This file contains the entry point for the program. 자세한 내용은 ASP.NET Core 웹 호스트를 참조하세요.For more information, see ASP.NET Core Web Host.

Blazor Server 앱 관련 파일Blazor Server App specific files

앱 설정App settings

appSettings.json 파일에는 연결 문자열과 같은 구성 데이터가 포함되어 있습니다.The appSettings.json file contains configuration data such as connection strings.

구성에 대한 자세한 내용은 ASP.NET의 구성 가이드를 참조하세요.For more information about configuration, see the Configuration in ASP.NET guide.

Startup.csStartup.cs

이 파일에는 앱에서 쿠키에 대한 동의 필요 여부 등의 앱 동작을 구성하는 코드가 포함되어 있습니다.This file contains code that configures app behavior, such as whether the app requires consent for cookies. 자세한 내용은 ASP.NET Core에서 앱 시작을 참조하세요.For more information, see App startup in ASP.NET Core.

요약Summary

이 자습서에서는 Mac용 Visual Studio에서 새로운 Blazor Server 앱 또는 Blazor WebAssembly 앱을 만드는 방법과 Mac용 Visual Studio에서 Blazor 애플리케이션을 만드는 데 도움이 되도록 제공하는 기능 중 일부에 대해 알아보았습니다.In this tutorial, you saw how to create a new Blazor Server App or Blazor WebAssembly App in Visual Studio for Mac, and learned about some of the features that Visual Studio for Mac offers to help you create Blazor applications.

참조See also

Blazor 웹앱을 만드는 방법에 관한 종합적인 가이드는 ASP.NET Core Blazor 소개를 참조하세요.For a more comprehensive guide to creating Blazor web apps, see Introduction to ASP.NET Core Blazor.