ASP.NET Core Blazor용 도구

이 문서에서는 다양한 플랫폼에서 Blazor 앱을 빌드하는 도구를 설명합니다.

  1. ASP.NET 및 웹 개발 워크로드가 있는 최신 버전의 Visual Studio 2022를 설치합니다.

  2. 새 프로젝트를 만듭니다.

  3. Blazor WebAssembly 환경의 경우 Blazor WebAssembly 앱 템플릿을 선택합니다. Blazor Server 환경의 경우 Blazor Server 앱 템플릿을 선택합니다. 새로 만들기를 선택합니다.

  4. 프로젝트 이름을 제공하고 위치가 올바른지 확인합니다. 다음을 선택합니다.

  5. 추가 정보 대화 상자에서 호스팅된 Blazor WebAssembly 앱의 ASP.NET Core 호스트됨 확인란을 선택합니다. 만들기를 선택합니다.

    두 가지 Blazor 호스팅 모델인 Blazor WebAssembly(독립형 및 호스팅) 및 Blazor Server에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.

  6. Ctrl+F5(Windows) 또는 +F5(macOS)를 눌러 앱을 실행합니다.

    Visual Studio에서 호스트된 Blazor WebAssembly솔루션을 실행하는 경우 솔루션의 시작 프로젝트는 Server 프로젝트입니다.

ASP.NET Core HTTPS 개발 인증서 신뢰에 대한 자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.

중요

호스트된 Blazor WebAssembly 앱을 실행하는 경우 솔루션의 Server 프로젝트에서 앱을 실행합니다.

.NET CLI(명령줄 인터페이스)를 사용하여 Linux 명령 셸에서 명령을 실행합니다.

  1. .NET Core SDK의 최신 버전을 설치합니다. 이전에 SDK를 설치한 경우 다음 명령을 실행하여 설치된 버전을 확인할 수 있습니다.

    dotnet --version
    
  2. 최신 버전의 Visual Studio Code를 설치합니다.

  3. 최신 Visual Studio Code용 C# 확장을 설치합니다.

  4. Blazor WebAssembly 환경의 경우 다음 명령을 실행합니다.

    dotnet new blazorwasm -o WebApplication1
    

    호스트된 Blazor WebAssembly 환경의 경우 호스트된 옵션(-ho 또는 --hosted)을 명령에 추가합니다.

    dotnet new blazorwasm -o WebApplication1 -ho
    

    Blazor Server 환경의 경우 다음 명령을 실행합니다.

    dotnet new blazorserver -o WebApplication1
    

    두 가지 Blazor 호스팅 모델인 Blazor WebAssembly(독립형 및 호스팅) 및 Blazor Server에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.

  5. Visual Studio Code에서 WebApplication1 폴더를 엽니다.

  6. IDE에서 프로젝트를 빌드 및 디버그하기 위한 자산을 추가하도록 요청합니다. Yes를 선택합니다.

    Visual Studio Code가 자산을 자동으로 만들도록 제안하지 않는 경우 다음 파일을 사용합니다.

    .vscode/launch.json(Blazor WebAssembly 앱 시작 및 디버그용으로 구성됨):

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "blazorwasm",
          "name": "Launch and Debug Blazor WebAssembly Application",
          "request": "launch",
          "cwd": "${workspaceFolder}",
          "browser": "edge"
        }
      ]
    }
    

    .vscode/tasks.json:

    {
      "version": "2.0.0",
      "tasks": [
        {
          "label": "build",
          "command": "dotnet",
          "type": "shell",
          "args": [
            "build",
            "/property:GenerateFullPaths=true",
            "/consoleloggerparameters:NoSummary",
           ],
           "group": "build",
           "presentation": {
              "reveal": "silent"
           },
           "problemMatcher": "$msCompile"
        }
      ]
    }
    

    프로젝트의 Properties/launchSettings.json 파일에는 파일의 profiles 섹션에 있는 모든 프로필에 대한 디버깅 프록시의 inspectUri 속성이 포함됩니다.

    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    

    호스트된 Blazor WebAssembly 시작 및 작업 구성

    호스트된 Blazor WebAssembly솔루션의 경우 launch.jsontasks.json 파일이 포함된 .vscode 폴더를 솔루션의 부모 폴더에 추가(또는 이동)합니다. 이 폴더는 Client, ServerShared의 일반적인 프로젝트 폴더 이름을 포함하는 폴더입니다. launch.jsontasks.json 파일의 구성이 Server 프로젝트에서 호스트된 Blazor WebAssembly 앱을 실행하는지 확인하거나 업데이트합니다.

    중요

    호스트된 Blazor WebAssembly 앱을 실행하는 경우 솔루션의 Server 프로젝트에서 앱을 실행합니다.

    Properties/launchSettings.json 파일을 검사하고 applicationUrl 속성에서 앱의 URL을 확인합니다(예: https://localhost:7268). 이 값은 launch.json 파일에서 사용합니다.

    .vscode/launch.json 파일의 시작 구성에서 다음을 수행합니다.

    • 현재 작업 디렉터리(cwd)를 Server 프로젝트 폴더로 설정합니다.
    • url 속성이 있는 앱의 URL을 표시합니다. Properties/launchSettings.json 파일에서 이전에 기록한 값을 사용합니다.
    "cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
    "url": "{URL}"
    

    위의 구성:

    • {SERVER APP FOLDER} 자리 표시자는 Server 프로젝트의 폴더(일반적으로 Server)입니다.
    • {URL} 자리 표시자는 applicationUrl 속성에 있는 앱의 Properties/launchSettings.json 파일에 지정된 앱의 URL입니다.

    Microsoft Edge를 사용하고 Google Chrome이 시스템에 설치되지 않은 경우 "browser": "edge"의 추가 속성을 구성에 추가합니다.

    다음 예제 .vscode/launch.json 파일:

    • 현재 작업 디렉터리를 Server 폴더로 설정합니다.
    • 앱의 URL을 https://localhost:7268로 설정합니다.
    • 기본 브라우저를 현재 기본 브라우저인 Google Chrome에서 Microsoft Edge로 변경합니다.
    "cwd": "${workspaceFolder}/Server",
    "url": "https://localhost:7268",
    "browser": "edge"
    

    전체 .vscode/launch.json 파일:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "blazorwasm",
          "name": "Launch and Debug Blazor WebAssembly Application",
          "request": "launch",
          "cwd": "${workspaceFolder}/Server",
          "url": "https://localhost:7268",
          "browser": "edge"
        }
      ]
    }
    

    .vscode/tasks.json에서, Server 앱의 프로젝트 파일에 대한 경로를 지정하는 build 인수를 추가합니다.

    "${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
    

    위의 인수는 다음과 같습니다.

    • {SERVER APP FOLDER} 자리 표시자는 Server 프로젝트의 폴더(일반적으로 Server)입니다.
    • {PROJECT NAME} 자리 표시자는 앱의 이름이며 일반적으로 Blazor WebAssembly 프로젝트 템플릿에서 생성된 앱에서 .Server가 뒤에 오는 솔루션 이름을 기반으로 합니다.

    솔루션의 Server 폴더에 BlazorHosted라는 이름의 Server 프로젝트가 있는 예제 .vscode/tasks.json 파일:

    {
      "version": "2.0.0",
      "tasks": [
        {
          "label": "build",
          "command": "dotnet",
          "type": "process",
            "args": [
              "build",
              "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
              "/property:GenerateFullPaths=true",
              "/consoleloggerparameters:NoSummary",
            ],
            "group": "build",
            "presentation": {
              "reveal": "silent"
            },
            "problemMatcher": "$msCompile"
        }
      ]
    }
    
  7. Ctrl+F5(Windows) 또는 +F5(macOS)를 눌러 앱을 실행합니다.

참고

지금은 브라우저 디버깅만 지원됩니다.

예를 들어 dotnet watch run으로 앱을 실행하여 디버그하는 동안 호스트된 Blazor WebAssembly 솔루션의 백 엔드 Server 앱을 자동으로 다시 빌드할 수는 없습니다.

개발 인증서 신뢰

자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.

  1. Mac용 Visual Studio를 설치합니다.

  2. 파일>새 솔루션을 선택하거나 시작 창에서 프로젝트를 만듭니다.

  3. 사이드바에서 웹 및 콘솔>을 선택합니다.

    Blazor WebAssembly 환경의 경우 Blazor WebAssembly 앱 템플릿을 선택합니다. Blazor Server 환경의 경우 Blazor Server 앱 템플릿을 선택합니다. 새로 만들기를 선택합니다.

    두 가지 Blazor 호스팅 모델인 Blazor WebAssembly(독립형 및 호스팅) 및 Blazor Server에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.

  4. 인증인증 없음으로 설정되었는지 확인합니다. 새로 만들기를 선택합니다.

  5. 호스트된 Blazor WebAssembly 환경의 경우 ASP.NET Core 호스트됨 확인란을 선택합니다.

  6. 프로젝트 이름 필드에서 앱 이름을 WebApplication1로 지정합니다. 만들기를 선택합니다.

  7. 실행>디버깅하지 않고 시작을 선택하여 ‘디버거 없이’ 앱을 실행합니다. 실행>디버깅 시작으로 앱을 실행하거나 실행(▶) 단추를 사용하여 디버거로 앱을 실행합니다.

개발 인증서를 신뢰하라는 메시지가 표시되면 인증서를 신뢰하고 계속합니다. 인증서를 신뢰하려면 사용자 및 키 집합 암호가 필요합니다. ASP.NET Core HTTPS 개발 인증서 신뢰에 대한 자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.

중요

호스트된 Blazor WebAssembly 앱을 실행하는 경우 솔루션의 Server 프로젝트에서 앱을 실행합니다.

Visual Studio 솔루션 파일(.sln)

솔루션은 하나 이상의 관련된 코드 프로젝트를 구성할 컨테이너입니다. Visual StudioMac용 Visual Studio는 솔루션 파일(.sln)을 사용하여 솔루션에 대한 설정을 저장합니다. 솔루션 파일은 고유한 형식을 사용하며 직접 편집할 수 없습니다.

Visual Studio 및 Mac용 Visual Studio 외부의 도구는 솔루션 파일과 상호 작용할 수 있습니다.

  • .NET CLI는 솔루션 파일을 만들고 dotnet sln 명령을 통해 솔루션 파일에서 프로젝트를 나열/수정할 수 있습니다. 다른 .NET CLI 명령은 다양한 게시, 테스트 및 패키징 명령에 솔루션 파일의 경로를 사용합니다.
  • Visual Studio Code는 통합 터미널을 통해 dotnet sln 명령 및 기타 .NET CLI 명령을 실행할 수 있지만 솔루션 파일의 설정을 직접 사용하지는 않습니다.

Blazor 설명서 전체에서 솔루션ASP.NET Core 호스트 옵션을 사용하여 Blazor WebAssembly 프로젝트 템플릿에서 만든 앱 또는 Blazor Hybrid 프로젝트 템플릿에서 만든 앱을 설명하는 데 사용됩니다. 이러한 프로젝트 템플릿에서 생성된 앱에는 기본적으로 솔루션 파일(.sln)이 포함되어 있습니다. 개발자가 Visual Studio 또는 Mac용 Visual Studio를 사용하지 않는 호스트된 Blazor WebAssembly 앱에서 .NET CLI 명령과 함께 사용하지 않는 솔루션 파일은 무시하거나 삭제할 수 있습니다.

자세한 내용은 Visual Studio 설명서의 다음 리소스를 참조하세요.

플랫폼 간 Blazor 개발용 Visual Studio Code 사용

Visual Studio Code는 Blazor 앱을 개발하는 데 사용할 수 있는 오픈 소스 플랫폼 간 IDE(통합 개발 환경)입니다. .NET CLI를 사용하여 Visual Studio Code로 개발할 새 Blazor 앱을 만들 수 있습니다. 자세한 내용은 이 문서의 Linux 버전을 참조하세요.

플랫폼 간 Blazor 개발용 Visual Studio Code 사용

Visual Studio Code는 Blazor 앱을 개발하는 데 사용할 수 있는 오픈 소스 플랫폼 간 IDE(통합 개발 환경)입니다. .NET CLI를 사용하여 Visual Studio Code로 개발할 새 Blazor 앱을 만들 수 있습니다. 자세한 내용은 이 문서의 Linux 버전을 참조하세요.

Blazor 템플릿 옵션

Blazor 프레임워크는 두 개의 각 Blazor 호스팅 모델용 새 앱을 만들기 위한 템플릿을 제공합니다. 템플릿은 Blazor 개발을 위해 선택하는 도구(Visual Studio, Mac용 Visual Studio, Visual Studio Code, .NET CLI(명령줄 인터페이스) 등)에 관계없이 새 Blazor 프로젝트와 솔루션을 만드는 데 사용됩니다.

  • Blazor Server 프로젝트 템플릿: blazorserver
  • Blazor WebAssembly 프로젝트 템플릿: blazorwasm

Blazor의 호스팅 모델에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요. Blazor 프로젝트 템플릿에 대한 자세한 내용은 ASP.NET Core Blazor 프로젝트 구조를 참조하세요.

템플릿 옵션에 대한 자세한 내용은 다음 리소스를 참조하세요.

  • .NET Core 설명서의 ‘dotnet new에 대한 .NET 기본 템플릿’ 문서:
  • 명령 셸에서 도움말 옵션(-h 또는 --help)을 dotnet new CLI 명령에 전달:
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

.NET WebAssembly 빌드 도구

.NET WebAssembly 빌드 도구는 웹 플랫폼을 위한 컴파일러 도구 체인인 Emscripten을 기준으로 합니다. .NET WebAssembly 빌드 도구를 설치하려면 다음 방법 중 하나를 사용하세요.

  • Visual Studio 설치 관리자의 ASP.NET 및 웹 개발 워크로드의 경우 선택적 구성 요소 목록에서 .NET WebAssembly 빌드 도구 옵션을 선택합니다.
  • 명령 셸에서 dotnet workload install wasm-tools를 실행합니다.

자세한 내용은 다음 자료를 참조하세요.

추가 리소스

  1. ASP.NET 및 웹 개발 워크로드가 있는 최신 버전의 Visual Studio 2022를 설치합니다.

  2. 새 프로젝트를 만듭니다.

  3. Blazor WebAssembly 환경의 경우 Blazor WebAssembly 앱 템플릿을 선택합니다. Blazor Server 환경의 경우 Blazor Server 앱 템플릿을 선택합니다. 새로 만들기를 선택합니다.

  4. 프로젝트 이름을 제공하고 위치가 올바른지 확인합니다. 다음을 선택합니다.

  5. 추가 정보 대화 상자에서 호스팅된 Blazor WebAssembly 앱의 ASP.NET Core 호스트됨 확인란을 선택합니다. 만들기를 선택합니다.

    두 가지 Blazor 호스팅 모델인 Blazor WebAssembly(독립형 및 호스팅) 및 Blazor Server에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.

  6. Ctrl+F5(Windows) 또는 +F5(macOS)를 눌러 앱을 실행합니다.

    Visual Studio에서 호스트된 Blazor WebAssembly솔루션을 실행하는 경우 솔루션의 시작 프로젝트는 Server 프로젝트입니다.

ASP.NET Core HTTPS 개발 인증서 신뢰에 대한 자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.

중요

호스트된 Blazor WebAssembly 앱을 실행하는 경우 솔루션의 Server 프로젝트에서 앱을 실행합니다.

  1. .NET Core SDK의 최신 버전을 설치합니다. 이전에 SDK를 설치한 경우 명령 셸에서 다음 명령을 실행하여 설치된 버전을 확인할 수 있습니다.

    dotnet --version
    
  2. 최신 버전의 Visual Studio Code를 설치합니다.

  3. 최신 Visual Studio Code용 C# 확장을 설치합니다.

  4. Blazor WebAssembly 환경의 경우 명령 셸에서 다음 명령을 실행합니다.

    dotnet new blazorwasm -o WebApplication1
    

    호스트된 Blazor WebAssembly 환경의 경우 호스트된 옵션(-ho 또는 --hosted)을 명령에 추가합니다.

    dotnet new blazorwasm -o WebApplication1 -ho
    

    Blazor Server 환경의 경우 명령 셸에서 다음 명령을 실행합니다.

    dotnet new blazorserver -o WebApplication1
    

    두 가지 Blazor 호스팅 모델인 Blazor WebAssembly(독립형 및 호스팅) 및 Blazor Server에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.

  5. Visual Studio Code에서 WebApplication1 폴더를 엽니다.

  6. IDE에서 프로젝트를 빌드 및 디버그하기 위한 자산을 추가하도록 요청합니다. Yes를 선택합니다.

    Visual Studio Code가 자산을 자동으로 만들도록 제안하지 않는 경우 다음 파일을 사용합니다.

    .vscode/launch.json(Blazor WebAssembly 앱 시작 및 디버그용으로 구성됨):

    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "blazorwasm",
                "name": "Launch and Debug Blazor WebAssembly Application",
                "request": "launch",
                "cwd": "${workspaceFolder}",
                "browser": "edge"
            }
        ]
    }
    

    .vscode/tasks.json:

    {
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "2.0.0",
        "tasks": [
            {
                "label": "build",
                "command": "dotnet",
                "type": "shell",
                "args": [
                    "build",
                    // Ask dotnet build to generate full paths for file names.
                    "/property:GenerateFullPaths=true",
                    // Do not generate summary otherwise it leads to duplicate errors in Problems panel
                    "/consoleloggerparameters:NoSummary",
                ],
                "group": "build",
                "presentation": {
                    "reveal": "silent"
                },
                "problemMatcher": "$msCompile"
            }
        ]
    }
    

    호스트된 Blazor WebAssembly 시작 및 작업 구성

    호스트된 Blazor WebAssembly솔루션의 경우 launch.jsontasks.json 파일이 포함된 .vscode 폴더를 솔루션의 부모 폴더에 추가(또는 이동)합니다. 이 폴더는 Client, ServerShared의 일반적인 프로젝트 폴더 이름을 포함하는 폴더입니다. launch.jsontasks.json 파일의 구성이 Server 프로젝트에서 호스트된 Blazor WebAssembly 앱을 실행하는지 확인하거나 업데이트합니다.

    중요

    호스트된 Blazor WebAssembly 앱을 실행하는 경우 솔루션의 Server 프로젝트에서 앱을 실행합니다.

    .vscode/launch.json (launch 구성):

    ...
    "cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
    ...
    

    현재 작업 디렉터리(cwd)에 대한 위 구성에서 {SERVER APP FOLDER} 자리 표시자는 Server 프로젝트의 폴더(일반적으로 “Server”)입니다.

    Microsoft Edge를 사용하고 Google Chrome이 시스템에 설치되지 않은 경우 "browser": "edge"의 추가 속성을 구성에 추가합니다.

    Server의 프로젝트 폴더 및 기본 브라우저 Google Chrome 대신 디버그 실행용 브라우저로 Microsoft Edge를 생성하는 예제:

    ...
    "cwd": "${workspaceFolder}/Server",
    "browser": "edge"
    ...
    

    .vscode/tasks.json(dotnet 명령 인수):

    ...
    "${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
    ...
    

    위의 인수는 다음과 같습니다.

    • {SERVER APP FOLDER} 자리 표시자는 Server 프로젝트의 폴더(일반적으로 “Server”)입니다.
    • {PROJECT NAME} 자리 표시자는 앱의 이름이며 일반적으로 Blazor 프로젝트 템플릿에서 생성된 앱에서 솔루션 이름과 그 뒤에 오는 “.Server”를 기반으로 합니다.

    Blazor WebAssembly 앱에서 SignalR 사용에 대한 자습서의 다음 예제에서는 Server의 프로젝트 폴더 이름과 BlazorWebAssemblySignalRApp.Server의 프로젝트 이름을 사용합니다.

    ...
    "args": [
      "build",
        "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
        ...
    ],
    ...
    
  7. Ctrl+F5(Windows) 또는 +F5(macOS)를 눌러 앱을 실행합니다.

개발 인증서 신뢰

자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.

  1. Mac용 Visual Studio를 설치합니다.

  2. 파일>새 솔루션을 선택하거나 시작 창에서 프로젝트를 만듭니다.

  3. 사이드바에서 웹 및 콘솔>을 선택합니다.

    Blazor WebAssembly 환경의 경우 Blazor WebAssembly 앱 템플릿을 선택합니다. Blazor Server 환경의 경우 Blazor Server 앱 템플릿을 선택합니다. 새로 만들기를 선택합니다.

    두 가지 Blazor 호스팅 모델인 Blazor WebAssembly(독립형 및 호스팅) 및 Blazor Server에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.

  4. 인증인증 없음으로 설정되었는지 확인합니다. 새로 만들기를 선택합니다.

  5. 호스트된 Blazor WebAssembly 환경의 경우 ASP.NET Core 호스트됨 확인란을 선택합니다.

  6. 프로젝트 이름 필드에서 앱 이름을 WebApplication1로 지정합니다. 만들기를 선택합니다.

  7. 실행>디버깅하지 않고 시작을 선택하여 ‘디버거 없이’ 앱을 실행합니다. 실행>디버깅 시작으로 앱을 실행하거나 실행(▶) 단추를 사용하여 디버거로 앱을 실행합니다.

개발 인증서를 신뢰하라는 메시지가 표시되면 인증서를 신뢰하고 계속합니다. 인증서를 신뢰하려면 사용자 및 키 집합 암호가 필요합니다. ASP.NET Core HTTPS 개발 인증서 신뢰에 대한 자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.

중요

호스트된 Blazor WebAssembly 앱을 실행하는 경우 솔루션의 Server 프로젝트에서 앱을 실행합니다.

Visual Studio 솔루션 파일(.sln)

솔루션은 하나 이상의 관련된 코드 프로젝트를 구성할 컨테이너입니다. Visual StudioMac용 Visual Studio는 솔루션 파일(.sln)을 사용하여 솔루션에 대한 설정을 저장합니다. 솔루션 파일은 고유한 형식을 사용하며 직접 편집할 수 없습니다.

Visual Studio 및 Mac용 Visual Studio 외부의 도구는 솔루션 파일과 상호 작용할 수 있습니다.

  • .NET CLI는 솔루션 파일을 만들고 dotnet sln 명령을 통해 솔루션 파일에서 프로젝트를 나열/수정할 수 있습니다. 다른 .NET CLI 명령은 다양한 게시, 테스트 및 패키징 명령에 솔루션 파일의 경로를 사용합니다.
  • Visual Studio Code는 통합 터미널을 통해 dotnet sln 명령 및 기타 .NET CLI 명령을 실행할 수 있지만 솔루션 파일의 설정을 직접 사용하지는 않습니다.

Blazor 설명서 전체에서 솔루션ASP.NET Core 호스트 옵션을 사용하여 Blazor WebAssembly 프로젝트 템플릿에서 만든 앱 또는 Blazor Hybrid 프로젝트 템플릿에서 만든 앱을 설명하는 데 사용됩니다. 이러한 프로젝트 템플릿에서 생성된 앱에는 기본적으로 솔루션 파일(.sln)이 포함되어 있습니다. 개발자가 Visual Studio 또는 Mac용 Visual Studio를 사용하지 않는 호스트된 Blazor WebAssembly 앱에서 .NET CLI 명령과 함께 사용하지 않는 솔루션 파일은 무시하거나 삭제할 수 있습니다.

자세한 내용은 Visual Studio 설명서의 다음 리소스를 참조하세요.

플랫폼 간 Blazor 개발용 Visual Studio Code 사용

Visual Studio Code는 Blazor 앱을 개발하는 데 사용할 수 있는 오픈 소스 플랫폼 간 IDE(통합 개발 환경)입니다. .NET CLI를 사용하여 Visual Studio Code로 개발할 새 Blazor 앱을 만들 수 있습니다. 자세한 내용은 이 문서의 Linux 버전을 참조하세요.

플랫폼 간 Blazor 개발용 Visual Studio Code 사용

Visual Studio Code는 Blazor 앱을 개발하는 데 사용할 수 있는 오픈 소스 플랫폼 간 IDE(통합 개발 환경)입니다. .NET CLI를 사용하여 Visual Studio Code로 개발할 새 Blazor 앱을 만들 수 있습니다. 자세한 내용은 이 문서의 Linux 버전을 참조하세요.

Blazor 템플릿 옵션

Blazor 프레임워크는 두 개의 각 Blazor 호스팅 모델용 새 앱을 만들기 위한 템플릿을 제공합니다. 템플릿은 Blazor 개발을 위해 선택하는 도구(Visual Studio, Mac용 Visual Studio, Visual Studio Code, .NET CLI 등)에 관계없이 새 Blazor 프로젝트와 솔루션을 만드는 데 사용됩니다.

  • Blazor WebAssembly 프로젝트 템플릿: blazorwasm
  • Blazor Server 프로젝트 템플릿: blazorserver

Blazor의 호스팅 모델에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요. Blazor 프로젝트 템플릿에 대한 자세한 내용은 ASP.NET Core Blazor 프로젝트 구조를 참조하세요.

템플릿 옵션은 명령 셸에서 도움말 옵션(-h 또는 --help)을 dotnet new CLI 명령에 전달하여 사용할 수 있습니다.

dotnet new blazorwasm -h
dotnet new blazorserver -h

추가 리소스

  1. ASP.NET 및 웹 개발 워크로드가 있는 최신 버전의 Visual Studio 2022를 설치합니다.

  2. 새 프로젝트를 만듭니다.

  3. Blazor WebAssembly 환경의 경우 Blazor WebAssembly 앱 템플릿을 선택합니다. Blazor Server 환경의 경우 Blazor Server 앱 템플릿을 선택합니다. 새로 만들기를 선택합니다.

  4. 프로젝트 이름을 제공하고 위치가 올바른지 확인합니다. 다음을 선택합니다.

  5. 추가 정보 대화 상자에서 호스팅된 Blazor WebAssembly 앱의 ASP.NET Core 호스트됨 확인란을 선택합니다. 만들기를 선택합니다.

    두 가지 Blazor 호스팅 모델인 Blazor WebAssembly(독립형 및 호스팅) 및 Blazor Server에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.

  6. Ctrl+F5(Windows) 또는 +F5(macOS)를 눌러 앱을 실행합니다.

    Visual Studio에서 호스트된 Blazor WebAssembly솔루션을 실행하는 경우 솔루션의 시작 프로젝트는 Server 프로젝트입니다.

ASP.NET Core HTTPS 개발 인증서 신뢰에 대한 자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.

호스트된 Blazor WebAssembly 앱을 실행하는 경우 솔루션의 Server 프로젝트에서 앱을 실행합니다.

  1. .NET Core SDK의 최신 버전을 설치합니다. 이전에 SDK를 설치한 경우 명령 셸에서 다음 명령을 실행하여 설치된 버전을 확인할 수 있습니다.

    dotnet --version
    
  2. 최신 버전의 Visual Studio Code를 설치합니다.

  3. 최신 Visual Studio Code용 C# 확장을 설치합니다.

  4. Blazor WebAssembly 환경의 경우 명령 셸에서 다음 명령을 실행합니다.

    dotnet new blazorwasm -o WebApplication1
    

    호스트된 Blazor WebAssembly 환경의 경우 호스트된 옵션(-ho 또는 --hosted)을 명령에 추가합니다.

    dotnet new blazorwasm -o WebApplication1 -ho
    

    Blazor Server 환경의 경우 명령 셸에서 다음 명령을 실행합니다.

    dotnet new blazorserver -o WebApplication1
    

    두 가지 Blazor 호스팅 모델인 Blazor WebAssembly(독립형 및 호스팅) 및 Blazor Server에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.

  5. Visual Studio Code에서 WebApplication1 폴더를 엽니다.

  6. IDE에서 프로젝트를 빌드 및 디버그하기 위한 자산을 추가하도록 요청합니다. Yes를 선택합니다.

    Visual Studio Code가 자산을 자동으로 만들도록 제안하지 않는 경우 다음 파일을 사용합니다.

    .vscode/launch.json(Blazor WebAssembly 앱 시작 및 디버그용으로 구성됨):

    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "blazorwasm",
                "name": "Launch and Debug Blazor WebAssembly Application",
                "request": "launch",
                "cwd": "${workspaceFolder}",
                "browser": "edge"
            }
        ]
    }
    

    .vscode/tasks.json:

    {
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "2.0.0",
        "tasks": [
            {
                "label": "build",
                "command": "dotnet",
                "type": "shell",
                "args": [
                    "build",
                    // Ask dotnet build to generate full paths for file names.
                    "/property:GenerateFullPaths=true",
                    // Do not generate summary otherwise it leads to duplicate errors in Problems panel
                    "/consoleloggerparameters:NoSummary",
                ],
                "group": "build",
                "presentation": {
                    "reveal": "silent"
                },
                "problemMatcher": "$msCompile"
            }
        ]
    }
    

    호스트된 Blazor WebAssembly 시작 및 작업 구성

    호스트된 Blazor WebAssembly솔루션의 경우 launch.jsontasks.json 파일이 포함된 .vscode 폴더를 솔루션의 부모 폴더에 추가(또는 이동)합니다. 이 폴더는 Client, ServerShared의 일반적인 프로젝트 폴더 이름을 포함하는 폴더입니다. launch.jsontasks.json 파일의 구성이 Server 프로젝트에서 호스트된 Blazor WebAssembly 앱을 실행하는지 확인하거나 업데이트합니다.

    .vscode/launch.json (launch 구성):

    ...
    "cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
    ...
    

    현재 작업 디렉터리(cwd)에 대한 위 구성에서 {SERVER APP FOLDER} 자리 표시자는 Server 프로젝트의 폴더(일반적으로 “Server”)입니다.

    Microsoft Edge를 사용하고 Google Chrome이 시스템에 설치되지 않은 경우 "browser": "edge"의 추가 속성을 구성에 추가합니다.

    Server의 프로젝트 폴더 및 기본 브라우저 Google Chrome 대신 디버그 실행용 브라우저로 Microsoft Edge를 생성하는 예제:

    ...
    "cwd": "${workspaceFolder}/Server",
    "browser": "edge"
    ...
    

    .vscode/tasks.json(dotnet 명령 인수):

    ...
    "${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
    ...
    

    위의 인수는 다음과 같습니다.

    • {SERVER APP FOLDER} 자리 표시자는 Server 프로젝트의 폴더(일반적으로 “Server”)입니다.
    • {PROJECT NAME} 자리 표시자는 앱의 이름이며 일반적으로 Blazor 프로젝트 템플릿에서 생성된 앱에서 솔루션 이름과 그 뒤에 오는 “.Server”를 기반으로 합니다.

    Blazor WebAssembly 앱에서 SignalR 사용에 대한 자습서의 다음 예제에서는 Server의 프로젝트 폴더 이름과 BlazorWebAssemblySignalRApp.Server의 프로젝트 이름을 사용합니다.

    ...
    "args": [
      "build",
        "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
        ...
    ],
    ...
    
  7. Ctrl+F5(Windows) 또는 +F5(macOS)를 눌러 앱을 실행합니다.

개발 인증서 신뢰

자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.

  1. Mac용 Visual Studio를 설치합니다.

  2. 파일>새 솔루션을 선택하거나 시작 창에서 프로젝트를 만듭니다.

  3. 사이드바에서 웹 및 콘솔>을 선택합니다.

    Blazor WebAssembly 환경의 경우 Blazor WebAssembly 앱 템플릿을 선택합니다. Blazor Server 환경의 경우 Blazor Server 앱 템플릿을 선택합니다. 새로 만들기를 선택합니다.

    두 가지 Blazor 호스팅 모델인 Blazor WebAssembly(독립형 및 호스팅) 및 Blazor Server에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요.

  4. 인증인증 없음으로 설정되었는지 확인합니다. 새로 만들기를 선택합니다.

  5. 호스트된 Blazor WebAssembly 환경의 경우 ASP.NET Core 호스트됨 확인란을 선택합니다.

  6. 프로젝트 이름 필드에서 앱 이름을 WebApplication1로 지정합니다. 만들기를 선택합니다.

  7. 실행>디버깅하지 않고 시작을 선택하여 ‘디버거 없이’ 앱을 실행합니다. 실행>디버깅 시작으로 앱을 실행하거나 실행(▶) 단추를 사용하여 디버거로 앱을 실행합니다.

개발 인증서를 신뢰하라는 메시지가 표시되면 인증서를 신뢰하고 계속합니다. 인증서를 신뢰하려면 사용자 및 키 집합 암호가 필요합니다. ASP.NET Core HTTPS 개발 인증서 신뢰에 대한 자세한 내용은 ASP.NET Core에서 HTTPS 적용을 참조하세요.

호스트된 Blazor WebAssembly 앱을 실행하는 경우 솔루션의 Server 프로젝트에서 앱을 실행합니다.

Visual Studio 솔루션 파일(.sln)

솔루션은 하나 이상의 관련된 코드 프로젝트를 구성할 컨테이너입니다. Visual StudioMac용 Visual Studio는 솔루션 파일(.sln)을 사용하여 솔루션에 대한 설정을 저장합니다. 솔루션 파일은 고유한 형식을 사용하며 직접 편집할 수 없습니다.

Visual Studio 및 Mac용 Visual Studio 외부의 도구는 솔루션 파일과 상호 작용할 수 있습니다.

  • .NET CLI는 솔루션 파일을 만들고 dotnet sln 명령을 통해 솔루션 파일에서 프로젝트를 나열/수정할 수 있습니다. 다른 .NET CLI 명령은 다양한 게시, 테스트 및 패키징 명령에 솔루션 파일의 경로를 사용합니다.
  • Visual Studio Code는 통합 터미널을 통해 dotnet sln 명령 및 기타 .NET CLI 명령을 실행할 수 있지만 솔루션 파일의 설정을 직접 사용하지는 않습니다.

Blazor 설명서 전체에서 솔루션ASP.NET Core 호스트 옵션을 사용하여 Blazor WebAssembly 프로젝트 템플릿에서 만든 앱 또는 Blazor Hybrid 프로젝트 템플릿에서 만든 앱을 설명하는 데 사용됩니다. 이러한 프로젝트 템플릿에서 생성된 앱에는 기본적으로 솔루션 파일(.sln)이 포함되어 있습니다. 개발자가 Visual Studio 또는 Mac용 Visual Studio를 사용하지 않는 호스트된 Blazor WebAssembly 앱에서 .NET CLI 명령과 함께 사용하지 않는 솔루션 파일은 무시하거나 삭제할 수 있습니다.

자세한 내용은 Visual Studio 설명서의 다음 리소스를 참조하세요.

플랫폼 간 Blazor 개발용 Visual Studio Code 사용

Visual Studio Code는 Blazor 앱을 개발하는 데 사용할 수 있는 오픈 소스 플랫폼 간 IDE(통합 개발 환경)입니다. .NET CLI를 사용하여 Visual Studio Code로 개발할 새 Blazor 앱을 만들 수 있습니다. 자세한 내용은 이 문서의 Linux 버전을 참조하세요.

플랫폼 간 Blazor 개발용 Visual Studio Code 사용

Visual Studio Code는 Blazor 앱을 개발하는 데 사용할 수 있는 오픈 소스 플랫폼 간 IDE(통합 개발 환경)입니다. .NET CLI를 사용하여 Visual Studio Code로 개발할 새 Blazor 앱을 만들 수 있습니다. 자세한 내용은 이 문서의 Linux 버전을 참조하세요.

Blazor 템플릿 옵션

Blazor 프레임워크는 두 개의 각 Blazor 호스팅 모델용 새 앱을 만들기 위한 템플릿을 제공합니다. 템플릿은 Blazor 개발을 위해 선택하는 도구(Visual Studio, Mac용 Visual Studio, Visual Studio Code, .NET CLI 등)에 관계없이 새 Blazor 프로젝트와 솔루션을 만드는 데 사용됩니다.

  • Blazor WebAssembly 프로젝트 템플릿: blazorwasm
  • Blazor Server 프로젝트 템플릿: blazorserver

Blazor의 호스팅 모델에 대한 자세한 내용은 ASP.NET Core Blazor 호스팅 모델을 참조하세요. Blazor 프로젝트 템플릿에 대한 자세한 내용은 ASP.NET Core Blazor 프로젝트 구조를 참조하세요.

템플릿 옵션은 명령 셸에서 도움말 옵션(-h 또는 --help)을 dotnet new CLI 명령에 전달하여 사용할 수 있습니다.

dotnet new blazorwasm -h
dotnet new blazorserver -h

추가 리소스