Blazor WebAssembly에서 다국어 지원하기

Blazor WebAssembly 프로젝트에서 브라우저의 언어 설정에 따라 다른 언어를 보여주는 방법을 포스팅하겠습니다.
프로젝트는 Blazor WebAssembly 독립실행형 앱이고 .NET 버전은 9.0입니다.

다국어 지원을 위한 환경 설정하기

Nuget Pakage Manager에서 Microsoft.Extensions.Localization을 설치하고 프로젝트에 추가해줍니다.

 

프로젝트 전역에서 Localizer를 사용할 수 있도록 _Imports.razor파일에 Microsoft.Extensions.Localization 네임스페이스를 추가해줍니다.

   @using Microsoft.Extensions.Localization

 

프로젝트의 .csproj 파일에서 BlazorWebAssemblyLoadAllGlobalizationData를true로 추가해줍니다.

 

Program.cs파일에서 서비스를 등록해 줍니다.

builder.Services.AddLocalization();

다국어 리소스 파일 생성하기

다국어 문자열을 작성할 리소스 파일을 생성합니다.
리소스 파일의 이름은 어떤것을 사용하던 상관없지만 같은 리소스의 파일은 이름이 같아야 합니다.
AppResource.resx: 기본 언어
AppResource.{언어코드}.resx: 지원할 국가의 언어코드

 

리소스 파일을 열고 키값과 언어별 문자열을 추가해줍니다.
저는 키값으로 GreetingString, 기본값은 "안녕하세요"로 추가했습니다.

다국어 페이지 만들기

다국어를 보여줄 페이지에서 종속성주입을 통해 Localizer를 받아옵니다.
이때 Localizer의 제네릭 형식은 앞에서 만들었던 리소스 파일의 타입입니다.
이 코드는 VisaulStudio의 도구에 의해 자동 생성됩니다.

 

만약 자동생성된 코드인 AppResource.Designer.cs파일이 생성되지 않는다면 속성에서 사용자 지정 도구에 PublicResXFileCodeGenerator를 입력한 뒤 빌드해주시면 됩니다.

 

이제 프로젝트를 실행하면 브라우저의 언어별로 다른 문자열들이 보여집니다.