블레이저 wasm 7.0 => 8.0 마이그레이션

🧵 Slog
1

이 시리즈의 모든 글은 블레이저팁스 태그를 통해 볼 수 있습니다.

프로젝트의 웹 프론트엔드를 Blazor Webassembly 7.0 에서 8.0으로 올렸습니다.

참고로, 저는 아래의 글처럼, 레이저 요소는 전부 RCL 에 모아 두었습니다.

RCL 마이그레이션

별거 없습니다. 프로젝트 파일에서 타겟 프레임워크를 net7.0 에서 net8.0 으로 바꿔 주고, 의존 패키지들도 호환 버전으로 업데이트 해주면 됩니다.

wasm 앱 마이그레이션

문제는 이 부분입니다.

동일하게 마이그레이션 했고, 빌드도 문제가 없었는데, 실행해 보니, wasm 파일은 정상적으로 다운로드 되지만, 실행되지 않는 문제가 발생하더군요.

브라우저 콘솔이 아래의 에러 메시지를 보여 주는데,

blazor.webassembly.js:1 Uncaught (in promise) Error: Failed to start platform. Reason: TypeError: Cannot read properties of undefined (reading ‘AspNetCore’)
at mn (blazor.webassembly.js:1:57654)

검색을 해 봐도 마땅한 해결책을 찾을 수 없더군요.
검색된 글들은 주로 7.0 => Blazor Web App 8.0 (서버 앱) 인 경우가 많았습니다.

블레이저는 javascript 덩어리이기 때문에, 이런 경우 참 난감합니다.

너댓 시간 헤매다가 무식하게, 8.0 프로젝트를 새롭게 만들고, 기존의 파일들을 복사 붙여 넣기 했는데, 정상 동작하더군요.

다행스러운 점은 wasm 앱이 껍데기 뿐이라, 작업량은 많지 않았습니다.

돌이켜 생각해 보면, RCL에 모아 두길 잘 했다는 생각이 듭니다.
닷넷 문서에서 괜히 권한 게 아니라는 생각이 듭니다.(일종의 밑밥이 아닌가 하는)

사실 블레이저 프로젝트는 아직은 그렇게 깔끔하지는 않은 것 같습니다.
식별자 이름 변경이 일반적인 C# 프로젝트 만큼 원활하지도 않고, 중요한 설정들을 문자열로 처리하는 경우가 많아 프로젝트 단위의 복붙은 정말 큰 맘 먹어야 합니다.

이번 계기로, wasm 이든 Blazor Web App 이든, 레이저 요소는 전부 RCL에 모아 두는 게 진리라는 교훈을 얻었습니다. 차기 버전에서는 또 어떤 문제가 발생할 지 모르니까요.

마지막으로 간단한 코드 공유합니다.

public interface ILocalStorageService
{
    ValueTask SaveAsync(string key, string value);
    ValueTask<string?> FindAsync(string key);
}

using Microsoft.JSInterop;

public class BrowserLocalStorage : ILocalStorageService
{
    readonly IJSRuntime _js;
    public BrowserLocalStorage(IJSRuntime js) => _js = js;

    public ValueTask<string?> FindAsync(string key) =>
        _js.InvokeAsync<string?>("window.localStorage.getItem", key);    

    public ValueTask SaveAsync(string key, string value) =>
        _js.InvokeVoidAsync("window.localStorage.setItem", key, value);
}
3개의 좋아요