본문 바로가기

FrontEnd

 (437)
[번역] Headless UI Component란 무엇인가? 원문 : https://www.merrickchristensen.com/articles/headless-user-interface-components/ Merrick Christensen Using Webflow with Netlify Configure Netlify to send particular routes to Webflow so that you can selectively serve pages that are designed and hosted on Webflow. 2 Minute Read » JSON Lisp Learn about how programming languages work as we design & implemen www.merrickchristensen.com 요약 headele..
[React, framer-motion] 언마운트 대상 DOM 요소에 애니메이션 적용하기 with AnimatePresence 아래와 같은 360도 캐러셀을 개발하려면, 자바스크립트를 사용해아 한다. HTML 삽입 미리보기할 수 없는 소스 주로 react-slick을 사용할 것이다. 이러한 완성형 라이브러리들의 단점은 다음과 같다. UI 기능이 필요할 때마다 하나하나 깔다보면 라이브러리 갯수가 많아진다 masonry calendar carousel date-picker 등등... 스타일 커스터마이징이 어렵다. JS는 몇줄 안되는데 파일 하나가 CSS 조정하는데 다 쓰인다. (ex: MUI) 본인의 경우 해당 링크의 캐러셀과 유사하지만, 가운데로 오면 크기도 바뀌고, 컴포넌트도 바뀌는 캐러샐을 구현할 일이 있었다. 이런 캐러셀을 React-Slick만으로 구현하는건 쉽지 않을 것이다. 또한 이런 라이브러리들에 강제로 컴포넌트를 끼..
[CSS] 실전 Grid Layout 활용 원문 : https://ishadeed.com/article/css-grid/ Grid Layout Ah-ha Moment - Ahmad Shadeed ishadeed.com TL;DR grid 레이아웃은 마크업 구조에 영향을 덜 주면서 콘텐츠의 배치를 쉽게 조절할 수 있는 방법이다. CSS Grid란 행과 열 같은 이차원에서 컨텐츠를 제어할 수 있는 기능을 제공하는 CSS 레이아웃 모듈 Grid 사용하기 부모 컨테이너 요소에 display : grid를 선언 모든 자식 컴포넌트는 grid item이 됨 최소한 원하는 열 수를 지정해야 Grid의 효과를 볼 수 있음 grid-template-columns를 사용하여 원하는 열 수를 정의할 수 있으며 각 값은 열의 너비를 나타냄 아래에는 3개의 열이 있고 ..
[CSS] absolute positioning을 grid로 대체하기 원문 : https://ishadeed.com/article/less-absolute-positioning-modern-css/ Less Absolute Positioning With Modern CSS - Ahmad Shadeed How to use use position:absolute less by leveraging modern CSS ishadeed.com TL;DR grid display : contents aspect-ratio position : absolute를 활용한 카드 오버레이 구현 방식엔 전혀 문제가 없음 Title Subtitle display: grid를 활용한 카드 오버레이 display : grid를 사용해 해당 레이아웃을 구현해 보겠음. 먼저 아래와 같이 CSS를 적용함 ..
[CSS] 레이아웃 Wrapper 만들기 웹 사이트는 콘텐츠를 쉽게 읽을 수 있는 너비로 감싸거나(wrapping) 포함(containing)해야 합니다. 이를 달성하기 위해 래퍼 또는 컨테이너라고 하는 것을 사용할 수 있습니다. CSS에서 래퍼는 여러 방식으로 구현할 수 있으나, 이로 인해 몇 가지 문제가 발생할 수 있습니다. 이 기사에서는 CSS의 레이아웃 Wrapper, 동작 방식, 사용 방법 및 Wrapper를 사용하지 않는 경우에 대해 설명합니다. 이 기사 전체에서 래퍼와 컨테이너라는 용어를 언급할 수 있으며 둘 다 같은 의미입니다. Wrapper에 대한 간단한 설명 래퍼 또는 컨테이너라는 용어는 요소 그룹이 다른 요소 안에 감싸져있거나 포함되어 있음을 의미합니다. 추가 요소를 사용하지 않고 아래와 같이 요소를 래퍼로 사용할 수 있습니..
[Typescript] 타입스크립트의 21가지 사용법 해당 게시물에서는 타입스크립트의 21가지 사용법와 해당 사용법이 의미있는 경우를 알아봅니다. 원문 : https://itnext.io/mastering-typescript-21-best-practices-for-improved-code-quality-2f7615e1fdc3 🔥 Mastering TypeScript: 21 Best Practices for Improved Code Quality Achieve Typescript mastery with a 21-steps guide, that takes you from Padawan to Obi-Wan. itnext.io 1. 정적 타입 검사(Strict Type Checking) 정적 타입 검사의 목표는 런타임(코드 실행) 이전에 오류를 조기 발견하는 것입..
컴포넌트 합성 : 서브 컴포넌트의 모든 것 원문 : https://medium.com/eightshapes-llc/subcomponents-753ce9f6600a Subcomponents Relinquish control, offer parts, and let implementers compose medium.com TL;DR 재사용성을 고려한 컴포넌트를 만들기 위해서... 모든 것의 제어를 포기하고 (inversion of control) 부픔(서브컴포넌트)를 제공하고 구현하는 개발자가 컴포넌트를 합성하도록 합니다 디자인 시스템의 모든 사용 사례를 컴포넌트화 하는 것은 어리석은 일입니다만, 실무에서는 기존 피그마 컴포넌트를 작게 분리하는 것을 싫어하는 경향이 있습니다. 그리고 개발자는 바닥부터 컴포넌트를 다시 만드는 것을 싫어하죠. 컴포넌트 라..
컴포넌트 합성 : 레이아웃 기반 합성 컴포넌트 원문 : https://www.smashingmagazine.com/2022/01/composition-based-design-system-figma/ Composition-Based Design System In Figma — Smashing Magazine Figma has advanced enough where it now supports some powerful concepts that can help with the flexibility and maintainability of a design system. In this article, Sasha explains why she finds the Systems Designer position so rewarding — and it’s not on..

티스토리툴바