C#로 SPA의 Blazor 개발 환경을 제작하는 방법 - Visual Studio 편

5969 단어 Blazor

개시하다


이 기사는 Advent Calendar 2019의 Day6 기고문인 C#이 SPA 개발을 가능한 기술인'Blazor(Brader)'로 만든 기고문이다.

  • Day3 Blazor Advent Calendar 2019 의 경우 Blazor 애플리케이션에서 Material 설계에 맞는 구성 요소 사용 예
  • Day4에서는 Blazor가 등장하기 전부터 웹 애플리케이션 프레임워크인 ASP가 있었다.NET Core MVC를 통한 웹 응용Blazor의 구성 요소를 혼합하여 Blazor 응용 개발을 하나하나 추진하는 예,
  • 그리고 Day5에서 Blazor에 대한 제호의 하나모델의 속성 지정에서 이루어진 폼 입력 검증
  • 이런 투고가 있습니다.
    이런 투고를 통해 더욱 현실적인 Blazer 응용 개발의 기술 노하우를 알게 되어 정말 기쁩니다!
    그렇다면 데이2에서는 블레이저 앱의 개발 환경으로서의 제작 방법을 설명CLI(명령줄 인터페이스) 편했다.
    운영 체제가 Windows인 경우 Blazor 애플리케이션 개발 환경을 구축할 때 Visual Studio를 설치할 수 있습니다.
    그럼 이번에는 데이2의 투고를 이어가며 블라조르 앱의 개발 환경 구축을 설명한 Visual Studio 편입니다.

    그렇다면 Visual Studio는 무엇입니까?


    여기서 말하는'Visual Studio'(Visual Studio)는 다양한 프로그램 개발을 위한'통합 개발 환경(IDE, Integrated Development Environment)'앱이다.
    'Visual Studio Code'는 고급 편집기인'Visual Studio IDE'와도 비교할 수 있습니다.
    Visual Studio는 Visual Studio Code와 같은 고급 편집기 클래스에 비해 설치 크기가 상당히 큽니다.
    대체라고는 하지만 설치와 디버깅을 지원하는 기능이 많다.
    Visual Studio를 사용한 프로그램 개발과 관련해서는 다음 소개 비디오 등을 참조하십시오.

    또한 Visual Studio에는 MacOS 버전도 포함되어 있습니다.
    하지만 Windows Visual Studio 버전만 알고 있기 때문에 이 기고문에서는 생략됩니다.

    필요한 Visual Studio 버전


    그렇다면 현재 Blazor 애플리케이션 개발에 필요한 Visual Studio의 버전은 다음과 같습니다.

  • 서버측 Blazor 애플리케이션 개발 시
    Visual Studio 2019

  • 클라이언트 Blazor 애플리케이션 개발 시
    Visual Studio 2019 Preview
  • Visual Studio는 여러 가지 기능을 사용하여 편집할 수 있습니다.
    Visual Studio 버전은 Blazo 애플리케이션 개발에 사용할 수 있습니다.
    특히 개인 이용을 포함해 규정된 규칙을 충족하는 소규모 개발에도 무료로 이용할 수 있는'커뮤니티 버전'을 마련했다.
    이용 조건에 문제가 없다면 이후 설명된 링크를 통해 다운로드·설치할 수 있어 무료로 손쉽게 이용할 수 있다.
    또한 Visual Studio(.NET Core SDK)는 같은 PC, OS에 여러 버전의 편집을 설치할 수 있습니다.
    "Visual Studio 2019 Security Edition의 일반적인 개발 활용"
    동시에
    "클라이언트 Blazor 어플리케이션 개발 시 Visual Studio 2019 Preview 시작"
    이렇게 할 수 있다.

    Visual Studio 다운로드 및 설치


    Visual Studio 2019는 아래 링크를 통해 설치 설치 설치 프로그램을 다운로드하여 설치할 수 있습니다.
  • 안정적인 버전 여기 있습니다 -> https://visualstudio.microsoft.com/vs/
  • 프리뷰는 여기서부터 -> https://visualstudio.microsoft.com/vs/preview/
  • 설치 과정에서 어떤 종류의 소프트웨어를 개발하려면 '작업 불러오기' 를 선택해야 합니다.
    Blazor 애플리케이션을 개발하려면 워크로드를 선택할 때 적어도 다음 두 가지를 선택하십시오.
  • ASP.NET Core 웹 애플리케이션 개발
  • .NET Core 교차 플랫폼 개발

  • 그나저나 이렇게 설치하면NET Core SDK를 설치하고 터미널(명령 프롬프트, PowerShell)에서도 dotnet 명령을 사용할 수 있습니다.

    Blazor 프로그램의 프로젝트 새로 만들기 방법


    Visual Studio 2019가 설치되면 Blazor 애플리케이션의 프로젝트를 새로 만들 수 있습니다.
    구체적으로 먼저 Visual Studio 2019에서 다음 중 하나를 수행하여 프로젝트를 새로 만듭니다.
  • Visual Studio 시작 화면에서 [새 프로젝트(N)]
  • 선택
  • 메뉴에서 [파일(F)] - [새로 만들기(N)] - [프로젝트(P)...] 선택
  • Ctrl + Shift + N 키보드 단축키
  • etc.
  • 다음 그림은 Visual Studio 2019 시작 화면의 예입니다.

    그런 다음 나오는 프로젝트 템플릿 선택 대화 상자에서 "Blazor Application"을 선택하면 됩니다.

    [다음]으로 이동한 후 프로젝트 이름과 대상 폴더를 지정합니다.
    적절하게 입력하고 지정한 후 [만들기] 버튼을 누릅니다.

    마지막으로 서버 쪽 Blazor인지 클라이언트 쪽 Blazor인지 어떤 종류의 Blazor 응용 프로그램을 만드는지 선택한다.
    특히 Blazor WebAssiembly App(= 클라이언트 측 Blazer)을 선택한 경우 다음 그림의 적환 검사 ON/Off에서 ASP를 선택합니다.NET Core를 통한 웹 서버 구현 여부를 선택하고 지정할 수 있습니다.
    이 화면에서 만들고 싶은 호스트 모형을 선택하고 [제작] 버튼을 누르면 새로운 프로젝트 제작이 완성됩니다.

    이상의 이야기!


    지금까지 Blazor 애플리케이션 개발 환경에 구축된 Visual Studio 편을 살펴보았습니다.
    Visual Studio Code를 비롯한 고기능 편집기 종류도 편안할지 모르지만 개인적으로 Visual Studio를 사용하면 편안한 인상을 줄 수 있다는 생각이 듭니다.
    또한 위에서 말한 바와 같이 Visual Studio에도 맥OS가 있고, C# 언어를 잘 사용하는 종합개발환경(IDE) 제품으로 JetBrains사의 라이더와 같은 제품도 있다.

  • JetBrains Rider
    https://www.jetbrains.com/ja-jp/rider/
    "빠르고 강력한 크로스오버 플랫폼. NET IDE-Windows, Mac, Linux,.NET, ASP.NET,.NET Core, Xamarin
    또는 Unity 애플리케이션 개발"
  • 다만, 나는 이 IDE 제품들이 Blazor 응용 개발을 할 수 있는지에 대한 정보를 가지고 있지 않다.
    따라서 이 기고문에서는 이러한 IDE 제품에 대한 언급을 피합니다.
    Happy Coding! :)

    좋은 웹페이지 즐겨찾기