Visual studio code(VSC) IDE로 Blazor WebAssembly 살펴보기 (2021. 03. 17)

VSC = Visual studio code

📖VSC로 Blazor WebAssembly project 열어서 세팅하기

1. 명령어에서 해당 프로젝트 폴더로 간뒤 VSC로 열기
   

   

2. 처음으로 VSC를 열어보면 Blazor WebAssembly 응용 프로그램을 개발 할 수 있습니다. 우선, 오른쪽 아래에 뜨는
   
   "Yes"를 눌러 주시고, 또 확장(Extension)을 설치 해줍시다. C#, JavaScript debugger 입니다.
   
   
3. 이후에는 이전 코스 (Blazor 호스팅 환경 시작하기) 에서 빌드 한 것처럼
   
   VSC에서도 명령어를 사용할 수 있습니다.
   
   "Ctrl + ~"를 사용하여 dotnet build를 입력 할 수 있습니다.
   
   
4. "Server" 디렉터리로 이동하여 "dotnet run" 명령어 실행으로 응용 프로그램을 실행 할 수있습니다.
   

   

   꿀팁: 해당폴더 경로에서 앞에 cmd를 붙여보기

 

📖Blazor wasm(web assembly)

Blazor WebAssembly의 진입점 - Client/Program.cs 의 main 클래스가 진입점.

 

1. 응용 프로그램을 실행 하기 전에 루트 추가&DOM 요소의 이름을 지정

builder.RootComponents.Add<App>("#app");

요소의 이름을 wwwroot/index.html에서 찾을 수 있다.

<div id="app">Loading...</div>

요소의 이름을 다른것으로 변경하기 위해서는 위 두개의 app이라고 적혀있는부분을

 

다음과 같이 고쳐보자.

builder.RootComponents.Add<App>("#CuriousDrive");

<div id="CuriousDrive">Loading...</div>

[chrome F12가 켜져있는 사진]

 

요소의 이름이 기존 app 에서 CuriousDrive로 바뀌어 있다.

 

루트 구성요소를 어디에서 여나요? (라우터)

위 그림 파일 같이 Project/Client/App.razor 요소에 라우터가 있습니다.

<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

에서

 

2. MainLayout은 Client/Shared/Mainrayout.razor에서 찾아 볼 수 있습니다.

아래는 Mainrayout.razor 입니다.

 

3. NavMenu는 Shared/NavMenu.razor에서 살펴 볼 수있고, 그 안에

 

 

NavLink 태그 안에 herf="" 는 Client/Pages/Index.razor 에서 루트주소 @page "/" 를 볼 수 있다.

 

href="counter"는 Pages에서 Counter.razor 에서 @page "/counter"를 볼 수 있다.

 

 

4. FetchData.razor에서는 WeatherForecast 데이터를 받아오는데

 

VSC 단축키인 Ctrl + P 를 활용하여 "WeatherForecast" 를 검색해서 찾아보면

 

WeatherForecastController.cs가 보이는데 경로는 Project/Server/Controllers 에 있다.

 

localhost:5001/WeatherForecast 에서 Json 데이터를 확인 가능 하다.