모든 스타일들을 하나의 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# > 코드스타일 > 서식 > 줄 추가 에서 ~ 새 줄에 배치 항목들이 모두 체크되어있을텐데 해제 해주면 해결된다.
리눅스환경에서 .NET 프로젝트를 개발하던 중 런타임에서 설정파일을 불러오는 일이 필요했습니다. 위의 소스코드를 사용하면 프로그램의 현재 실행되고 있는 경로에서 config.json파일을 가져옵니다. config.json을 빌드파일경로에 둘 수도 있지만 저는 프로젝트파일과 같은 경로에 config.json을 두고싶었습니다. 이때 프로젝트폴더에 있는 config.json을 수정하면 빌드폴더에 있는 config.json은 수정되지않는 문제가있습니다. 이 문제를 해결하기위해 저는 Symbolic Link를 사용했습니다. Symbolic Link는 리눅스에서 사용하는 윈도우의 바로가기파일과 같은 역할을 합니다. 심볼릭링크를 생성할 위치로 이동해서 `ln -s` 명령어로 원본파일경로와 심볼릭링크이름을 지정해주면됩..
이 글에서는 Google.Cloud.Firestore Nuget Pakage를 사용하여 Firestore를 다루는 방법에 대해 설명한다. 1. Firestore를 사용하기 위해선 먼저 Firebase 프로젝트 설정에 들어간뒤 서비스 계정에서 비공개 키를 생성한다. 2. Visual Studio로 와서 프로젝트에 위에서 생성한 비공개 키를 기존 항목으로 추가한다. 기존 항목으로 추가한 비공개 키는 속성을 아래 사진과 같이 변경해준다. 3. 프로젝트의 Nuget Pakage관리자에서 Google.Cloud.Firestore 를 설치한다. 4. 이제 프로젝트의 Program.cs 로 온뒤 프로그램이 실행될 때 비공개 키를 환경변수에 등록되도록한다. class Program { public Main() { st..
