Blazor WebAssembly 프로젝트에서 브라우저의 언어 설정에 따라 다른 언어를 보여주는 방법을 포스팅하겠습니다.프로젝트는 Blazor WebAssembly 독립실행형 앱이고 .NET 버전은 9.0입니다.다국어 지원을 위한 환경 설정하기Nuget Pakage Manager에서 Microsoft.Extensions.Localization을 설치하고 프로젝트에 추가해줍니다. 프로젝트 전역에서 Localizer를 사용할 수 있도록 _Imports.razor파일에 Microsoft.Extensions.Localization 네임스페이스를 추가해줍니다. @using Microsoft.Extensions.Localization 프로젝트의 .csproj 파일에서 BlazorWebAssemblyLoadAll..
API Controller의 반환형식을 보면 익명객체를 사용하여 `Token`과 `UserDetail`속성을 반환하고 있다. 하지만 API의 요청결과를 보면 `$id`라는 속성이 자동으로 추가되어있다. 여기서 `ReferenceHandler.Preserve` 옵션이 원인이다. 순환참조를 방지하기 위해 사용했던 옵션이 다른 문제를 일으킨 것이다. 순환참조만을 무시하기 위해선 `ReferenceHandler.IgnoreCycles`옵션을 사용하면 된다.
정규표현식은 정규식이라고도 불리며 영어로는 Regurlar Expression 혹은 Regex라고 합니다. 정규표현식을 사용하면 문자열에서 특정 패턴을 찾아낼 수 있기 때문에 컴파일러, IDE 같은 고급 문서 편집기, 혹은 사용자가 입력한 이메일, 전화번호등의 유효성을 검증하기 위해 사용됩니다. 정규표현식은 패턴과 플래그를 가지며 아래와 같은 구조로 작성됩니다. / 패턴 / 플래그 / (?:Mon|Tues|Wednes)day / g Monday // true Tuesday // true Wednesday // true Thursday // false Friday // false패턴 패턴은 문자열에서 메타문자를 조합해 검색기준을 정의합니다. 문자 클래스 필요한 규칙에 따라 문자 집합을 정의할 수 있고, 만..
모든 스타일들을 하나의 SCSS파일안에 담을 필요는 없습니다. 연관되어 있는 스타일들을 여러 SCSS파일로 분할하여 사용할 수 있습니다. 분리할 스타일들을 별도의 SCSS파일로 만들고, @import키워드를 사용하여 스타일을 불러올 수 있습니다. SCSS파일끼리는 확장자를 붙이거나 생략할 수 있습니다. /* variables.scss */ $item-bg: #fff; $item-mg: 10px; /* style.scss */ @import "variables"; .item { background-color: $item-bg; margin: $item-mg; } @minxin을 사용하면 SCSS파일 자체를 분할 하는것이 아닌 스타일을 함수처럼 만들어 재사용할 수 있습니다. @include로 선언된 @min..
앞의 포스트에서 잠깐 보았던 변수에 대해 설명하겠습니다. 변수는 SCSS에만 있는 기능이 아니라 CSS에도 변수가 있고, 아래의 코드와 같이 선언 및 사용할 수 있습니다. CSS에서는 :root 또는 특정선택자 내에서만 변수를 생성하고 사용할 수 있습니다. :root { --main-bg-color: #fff; } div { background-color: var(--main-bg-color); } SCSS에서의 변수는 $기호를 사용하여 변수를 만들 수 있습니다. 다른 프로그래밍 언어들과 마찬가지로 변수명은 숫자로 시작할 수 없고, -, _외에는 특수기호를 사용할 수가 없습니다. SCSS에서는 다음과 같이 변수를 선언하고 사용할 수 있습니다. 변수에는 모든 속성들의 값이 들어갈 수 있습니다. 변수는 자신..
네스팅이란 무엇일까? 우선 CSS를 예로 들어보겠습니다. 아래의 코드에서 보이듯이 CSS에서는 sub-items라는 클래스에 접근하기 위해서는 상위에 있는 모든 클래스를 작성해야합니다. 그렇기 때문에 코드에 중복이 많이 발생하고, 만약 .items클래스의 이름이 변경된다면 .items라는 이름이 쓰인 모든 클래스 선택자의 이름을 변경해야 합니다. .items {} .items .item {} .items .item .title {} .items .item .desc {} 하지만 SCSS는 Nesting을 통해 CSS의 이러한 문제점을 해결할 수 있습니다. SCSS로 작성한 코드는 CSS의 문제점이었던 똑같은 코드의 중복작성을 줄이고, 클래스의 이름을 변경했을 때 모든 하위 클래스의 부모 클래스이름을 바꿔..
SCSS란 CSS를 위한 전처리언어 입니다. CSS는 웹사이트가 커질수록 코드가 복잡해지고, 유지하기가 더 어려워지게 되는데 이 문제를 해결해 줄 수 있는 것이 SCSS입니다. SCSS를 사용하면 변수, 연산자, 상속, 믹스인, 네스팅 등을 사용해 코드를 효율적으로 관리하고, 작성할 수 있게 도와줍니다. 예를 들어 CSS에서는 아래와 같이 코드를 작성해야했다면, .items .main-item > a { } .items .main-item > a:after { } .items .main-item .sub-items { } .items .main-item .sub-items a { } SCSS에서는 이렇게 작성할 수 있습니다. 이걸 네스팅이라고 합니다. .items { .main-item { > a:aft..
EF Core 에서는 다양한 데이터베이스 공급자를 지원하고 있다. 이 글에서는 MySql과 MariaDB 모두를 지원하는 Pomelo.EntityFrameworkCore.MySql 를 사용한다. 1. NuGet 패키지 관리에서 Pomelo.EntityFrameworkCore.MySql를 검색하여 설치하거나 아래의 명령어를 입력한다. dotnet add package Pomelo.EntityFrameworkCore.MySql 2. 아래의 코드를 복붙한다. AppDbContext.cs public class AppDbContext : DbContext { public AppDbContext() { } } Program.cs static void Main(string[] args) => Host.CreateD..