카테고리 없음

ASP.NET Core 6.0

algml0703 2022. 4. 5. 23:11
반응형

.NET 6.0

개발자가 하나의 통합 플랫폼만으로 데스크톱, 웹 앱 클라우드 AI솔루션 게임, 모바일 앱 IOT 등에 접근하고 구현하는 것을 가능하게 함.

  • windows, Linux, macOS에서 Visual Studio를 통해 모두 접근 가능.

✔ one.NET

A unified .NET platform with a single set of Base Class Libraries, SDK, languages, and tools for cross platform development.

👍 .NET 6.0의 새로운 기능

  • 기본 클래스 라이브러리, SDK, 언어 및 도구의 통합 집합 제공
  • c# 10 성능 개선, Visual Studio 22 통합, Hot Reload 등을 지원
  • HTTP 기반 웹 서비스 구축을 위한 더욱 간단한 구문 제공

👍 Visual Studio 2022

  • 64비트로 프로젝트의 응답성과 리스스 할당 향상시키는 주요 성능 업그레이드 됨.
  • 개선된 intellisense
  • 새로운 구문
  • 향상된 깃 통합
  • 프로젝트 시작 템플릿에 대한 업데이트
  • Updated SPA Templates

✔ Hot Reload

앱이 실행되는 동안 변경사항을 감지하고 필요한 어셈블리 변경사항을 재검파일하고 적용. 다시 시작하거나 상태를 잃지 않고 현재 응용 프로그램 프로세스에서 기존 작업 수행 가능. Hot Reload는 Visual Studio UI 또는 Command line의 콘솔을 통해 사용가능.

📌 .NET 6.0 설치

  1. Visual Studio 2022
    Visual Studio 2022 설치시 .NET 6.0이 함께 다운로드되어 설치됨
    1) 워크로드에서 ASP.NET and web development 설치
    :웹 앱 작업을 위해 필요

            Visual Studio 2019와 같은 이전 버전은 .NET 6.0을 온전히 지원하지 않음.

  1. Download and .NET 6.0 directly by itself
    1) https://dotnet.microsoft.com/en-us/ 로 이동해서 다운로드
[ 설치확인 ]
다운로드 후 터미널(명령 프롬프트)에서 아래의 명령어 입력하면 아래와 같이 나옴 
> dotnet --info

 

- Asp.NET


웹 앱 구축을 위해 설계된 것.

- Razor Pages


page oriented abstraction for building UIs.

- MVC


- Web API


- Blazor


A UI framework for rich client experiences.

  • 자바스크립트가 아닌 c#을 사용하여 UI 구현.
    자바스크립트의 대안으로도 볼 수 있다.

1) Blazor 앱은 구성요소를 기반으로 함

  • 구성요소 ex) 페이지, 대화상자, 데이터 입력 양식 등과 같은 UI 요소

- SignalR


Realtime communication via Web Sockets.

- gRPC


원격 프로시저 호출 처리를 위한 프레임워크

- 향상된 C# 구문


  • 최상위 문은 중괄호 메서드 또는 네임스페이스 없이 파일 루트에 작성 가능.

Programs.cs

  • 프로젝트에서 최상위 문을 가지는 하나의 파일
  • 앱에 대한 모든 시작 논리를 포함.
  • 전역 using 문을 도입
    // 전역 사용시 global 키워드를 사용하여 프로젝트의 한 파일에서 네임스페이스를 선언 후 해당 using 문을 프로젝트의 모든 클래스에 적용 가능.
    // global using을 한 파일에 중앙집중화화면 프로젝트에서 특정 전역 사용이 선언된 위치에 대한 혼돈을 줄여줌.
  • Null parameter checks
  • File namespaces
  • Record structs
  • Lambda improvements
  • String interpolation enhancements
    ....

 

🌞 sample

목적 : 카페 관련 앱 만들기
기능 : 온라인 주문 / 문의 / 프로모션 정보 / 관리자페이지 등

// 참고 git 주소 
> https://github.com/alex-wolf-ps/whats-new-aspdotnet-6

// 비쥬얼 스튜디오 켜고 위의 저장소 git clone 
// 아래와 같은 폴더 구조를 지님

참고 git 주소
https://github.com/alex-wolf-ps/aspdotnet5-upgrade

 

✅ 개발 워크로드의 속도 향상 시키는 방법?

  • 솔루션 내부에는 앱의 UI에 데이터를 제공하는 웹 API가 존재. 해당 프로젝트 실행
  • 기존 Visual Studion 개발에서 내용 변경 시 앱을 중지하고 다시 시작해야 함.
using Microsoft.ASPNetCore.Mvc;

namespace WiredBrainCoffee.Api.Controllers
{
	[ApiController]
    [Route("[controller]")]
    public class HelloWorldController : Controller
    {
    	[HttpGet()]
        public IActionResult GetGreeting()
        {
        	return ok("Hello world!")
        }
    }
}
  • Hot Reload의 경우 이러한 문제를 해결함
  • Hot Reload는 상태를 보존하며 변경 사항을 적용시킴.
  • 빌드 후 빨간 버튼이 생기는데 내용을 변경 후 빨간 버튼을 누르면 재 로드 없이도 변경된 내용이 적용됨.

Q Visual Studio 사용 없이 하는 방법?

  • 프로젝트 위에서 마우스 오른쪽 버튼을 클릭하여 파일 탐색기를 연다. (open folder in file explorer)
  • 주소 표시줄에 cmd를 바로가기로 입력하여 명령 프롬프트 실행
  • dotnet watch run 입력 -> 앱을 컴파일하고 실행시켜주며 변경 사항을 모니터링하고 앱을 자동으로 다시 컴파일하고 실행해줌.

✅ 실행 안 될때?

.sln 확장자를 가진 파일 더블 클릭 해준 후 빌드해야함.

✅ Programs.cs?

using BlazorApp2.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

var builder = WebApplication.CreateBuilder(args);
// 웹 호스트 빌더 개체를 만드는 것.

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
// 종속성 주입을 위한 서비스 추가.

var app = builder.Build();

// Configure the HTTP request pipeline.
// HTTP 파이프라인 구성
// UseRouting, useHttpsRedirection 등 use 키워드로 시작하는 메서드는 파이프라인에 미들웨어를 추가해줌. 
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();
// 앱을 시작해줌.

 

Razor

개발자 생산성을 위해 설계된 HTML 태그와 C# 코드를 결합하는 구문.

  • 확자장 .razor

 

test해보기

cmd 이용
1. Blazor 프로젝트를 생성할 경로로 이동
2. Blazor 프로젝트 생성 명령어 입력
> dotnet new blazorserver -o BlazorApp --no-https
> cd BlazorApp // 생성된 프로젝트 폴더로 이동


// 위와 같은 폴더트리가 생성됨.

👍 각 파일 역할

Program.cs
the entity point for the app thet starts the server and where you configure the app services and middleware
App.razor
the root component for the app
Pages
the directory contains some example web pages for the app
BlazorApp.csrproj
defines the app project and its dependencies.
Properties
L launchSettings.json
defines different profile settings for the local development environment. A port number ranging between 5000-5300 is automatically assigned at project creation and saved on this file.

  1. > dotnet watch
    위의 명령어를 통해 앱 빌드하고, 코드 변경시에도 적용됨.

간단한 TodoList 만들어보기

  1. TodoList 생성할 경로로 이동
  2. Blazor 생성해주는 명령어 입력
    > dotnet new blazorserver -o TodoList
    > cd TodoList
  3. 앱에 새로운 Razor 구성 요소 추가
    > dotnet new razorcomponent -n Todo -o Pages
    -n [name] or -name [name] 으로 만드는 Razor 구성요소의 이름 지정
    -o [폴더명] | --output [폴더명] 으로 새로운 Razor 구성요소를 생성할 폴더 위치 지정.
    ⭐ Razor 구성요소 파일 이름의 첫 글자는 무조건 대문자로 시작해야함. ⭐
  4. 빌드
    > dotnet watch run
  5. TodoList 폴더(최상위 폴더)에 TodoItem.cs 파일 추가
    // todo 항목을 나타내는 클래스 저장하기 위함.
    5-1) 마우스 오른쪽 버튼 누르고 추가 - 새 파일 선택
    5-2) 파일명 TodoItem.cs 로 함
    5-3) 아래는 파일 내용
  6. Todo 구성요소 내용 수정

ASP.NET 6.0 Blazor에서 자바스크립트 파일 사용

반응형