Recoil: React를 위한 상태 관리 라이브러리

Recoil 시작하며 React 프로젝트를 진행하다 보면 많은 프로젝트에서 상태관리 라이브러리를 사용하게 됩니다. 저 역시 이번에 새로운 프로젝트를 시작하면서 어떤 라이브러리를 사용하는 것이 좋을지 고민하게 되었고, 그 과정에서 다양한 상태관리 라이브러리에 대해 알아보게 되었습니다. 그러던 중 Facebook에서 2020년 발표한 Recoil이라는 React 전용 라이브러리에 대해 알게 더보기…

Dart Sass: @use, @forward, scss:math, variable syntax 적용방법

SASS는 Ruby 언어로 처음 만들어져, LibSass -> Node-Sass로 발전하면서 지난 몇년 간, UI엔지니어 사이에서 큰 사랑을 받았습니다.현재는, Dart Sass라는 이름으로 설치 후 사용 가능하며, 조만간 Node-Sass에서 사용했던 문법들이 depreciated 된다고 공지 되었습니다. The Sass team discourages the continued use of the @import rule.Sass will gradually 더보기…

CSS Cascade Layers 소개

Cascade Layers Chrome99+, Firefox97+, Safari Technology Preview 및 Safari iOS에 도입된 CSS의 새로운 스펙 Cascade Layers에 대해 정리했습니다. 이해 a. CSS Cascade CSS Cascade는 CSS의 가장 강력한 강점으로, CSS가 요소에 적용하려는 스타일의 우선순위를 정하는 데 사용하는 알고리즘입니다. CSS Cascade는 어떤 스타일을 더보기…

CSS touch-action 한눈에 알아보기

CSS touch-action 한눈에 알아보기 touch-action CSS touch-action 속성이 무엇이며 어떻게 동작하는지 테스트 및 gif로 보기 쉽게 정리해보았습니다. 1. touch-action 속성 기본적으로 터치 이벤트의 처리는 브라우저가 담당하는 영역입니다.touch-action 속성을 통해 어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있습니다.표준 터치 제스쳐로는 더보기…

CSS, SVG로 만드는 Circle Progress Bar (SVG stroke-dashoffset 활용)

Progress Bar는 어떠한 작업이 수행될 때, 그 작업의 진행 상태, 수치 값을 시각적으로 보여주기 위해 사용하는 요소입니다.막대 형태의 Progress Bar는 일반적으로 아래와 같이 진행 상태에 따른 %를 width 값으로 주고그 영역만 배경색을 적용하는 방법으로 간단히 처리할 수 있었습니다. 문득 원형의 경우는 어떻게 더보기…