FluentUI 사용하기 / dotnet8 blazorapp InteractiveMode
Microsoft FAST 소개
Fast Blazor 적응기 - slog
연관된 글은 이쪽입니다.
정확히는
이 링크에 대한 해결책에 가깝습니다.
어쩌면 중복된 내용이 더 많을 수도 있겠습니다.
이 글은 먼저 시도해본, Blazor Web App - InteractiveServer Mode 입니다.
닷넷 8 버전에 와서 템플릿 구조가 살짝 바뀌었어요.
(물론 기존 프로젝트도 정상 작동합니다.)
닷넷 8 부터 외부 js 파일을 추가하고, html 문서의 Header가 포함되던 _Layout.cshtml 가 감쪽같이 없어졌지요?
해당 내용은 app.razor로 이동되었습니다.
헌데,
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
이게
<HeadOutlet/>
이렇게 바뀌었지요. 어라?!???!??!
게다가, 여기에 js를 올려도 적용이 안 되는 현상이 있어서 제가 여기 하소연 했었지요.
이게 이제 rc2부터 새로운 옵션이 추가되었습니다.
<HeadOutlet @rendermode="@RenderMode.InteractiveServer" />
다음 릴리즈 때에는
<HeadOutlet @rendermode="InteractiveServer" />
로 변경된다고 하니 참고부탁드립니다.
설명이 조금 더 필요한데요.
HeadOutlet 컴포넌트와 Routes 컴포넌트를 InteractiveServer 모드로 하면
예전의 그 Blazor Server 그 맛과 똑같은 전역 Interactive 모드로 작동합니다.
또는 ,
이 스크린샷과 같이 Interactivity type : Server, Location : global로 설정하시면 위와 같이 자동 설정됩니다.
이 rendermode에 관한건 따로 쬐끔 더 다뤄보도록 할게요.
이제서야 본 내용입니다.
어흑. 너무 많이 돌아왔지요?
이후부터는 거의 동일 합니다.
Package에 Microsoft.Fast.Components.FluentUI 추가하고 쓰시면 정상 작동합니다.
web-components.min.js 추가하는 태그는 2.3패키지부터 삭제하도록 권장하고,
<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />
이 부분은 이제 자동생성되니 신경쓰지 않으셔도 됩니다.
헌데, 프로젝트명을 바꿀때마다 자동으로 변경 되지는 않아서 한번씩 체크 해주셔야 합니다.