VSC = Visual studio code
📖VSC로 Blazor WebAssembly project 열어서 세팅하기
- 명령어에서 해당 프로젝트 폴더로 간뒤 VSC로 열기
- 처음으로 VSC를 열어보면 Blazor WebAssembly 응용 프로그램을 개발 할 수 있습니다. 우선, 오른쪽 아래에 뜨는
"Yes"를 눌러 주시고, 또 확장(Extension)을 설치 해줍시다. C#, JavaScript debugger 입니다. - 이후에는 이전 코스 (Blazor 호스팅 환경 시작하기) 에서 빌드 한 것처럼
VSC에서도 명령어를 사용할 수 있습니다.
"Ctrl + ~"를 사용하여 dotnet build를 입력 할 수 있습니다. - "Server" 디렉터리로 이동하여 "dotnet run" 명령어 실행으로 응용 프로그램을 실행 할 수있습니다.
📖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 데이터를 확인 가능 하다.
'Develop Dairy > C#' 카테고리의 다른 글
Csharp은 어떻게 실행 되는걸까..? (2021. 05. 11) (0) | 2021.05.11 |
---|---|
SPA 이해 (2021. 04. 26) (0) | 2021.04.26 |
Blazor 호스팅 환경 시작하기 (WebAssembly) (2021. 03. 16) (0) | 2021.03.16 |
문자열 서식 기본 사항 (String formatting basics) (2021. 02. 18) (0) | 2021.02.18 |
First Blazor app build 블레이저 시작하기 (2021. 1. 31) (0) | 2021.01.31 |