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..
markdown 파일을 html로 변환해줄 라이브러리인 Markdig를 다운로드합니다. Markdig.Markdown.ToHtml() 메서드를 사용해 읽어온 markdown 문자열을 HTML로 변환합니다. 그리고 나서 MarkupString를 앞에 붙여줍니다. @page "/markdown" @inject HttpClient Http MarkDown MarkDown @if (htmlString == null) { Loading... } else { @((MarkupString)htmlString) } @code { private string? htmlString; protected override async Task OnInitializedAsync() { var markdown = await Http...
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..
Git 이 초기화 되어있는 폴더에서 아래의 명령어를 실행해 줍니다. dotnet new blazorwasm# Blazor WebAssembly 프로젝트 생성 dotnet new gitignore# dotnet 의 gitignore 생성 그리고 나서 Github에 프로젝트를 Push하고, Action에 들어가 아래의 코드로 action을 생성합니다. name: Deploy to GitHub Pages # develop 브랜치에 push가 발생할 때 마다 실행 on: push: branches: [ develop ] jobs: deploy-to-github-pages: runs-on: ubuntu-18.04 steps: # develop branch를 기준으로 체크아웃 - uses: actions/check..
나는 코드를 작성할 때 여는 중괄호를 메서드 바로 뒤에 두는걸 선호한다. public void Test() { //... } 하지만 Visual Studio에서는 중괄호가 자꾸 밑으로 내려갔다.. public void test() { //... } 도구 > 옵션 > 텍스트 편집기 > C# > 코드스타일 > 서식 > 줄 추가 에서 ~ 새 줄에 배치 항목들이 모두 체크되어있을텐데 해제 해주면 해결된다.
