본문 바로가기

FrontEnd

 (437)
컴파운드 컴포넌트 잘만들기 2편 : Smarter, Dumb Breadcrumb 컴파운드 컴포넌트를 이용하여, 컴포넌트의 렌더링 위치에 관계없이 DOM을 원하는 곳에 삽입하는 방법을 배워봅니다. 원문 번역입니다 : https://jjenzz.com/smarter-dumb-breadcrumb Smarter, Dumb Breadcrumb With the help of React Context and Portals we can utilise the component tree to generate a breadcrumb trail that doesn't know your hierarchy or your location within it. jjenzz.com 이동 경로(Breadcrumbs)는 사용자가 웹사이트나 애플리케이션 내에서 자신의 위치를 찾는 데 도움이 되는 유용한 도구입니다. 컴파..
컴파운드 컴포넌트 잘만들기 1편 : 컴파운드 컴포넌트 알아보기 Radix UI 팀의 개발자가 작성한 컴파운드 컴포넌트 시리즈가 있어서 번역해왔습니다. 원문 : https://jjenzz.com/compound-components Compound Components Compound components provide a declarative API that can allow for some impressive solutions to everyday problems. But what are they? jjenzz.com 컴파운드 컴포넌트는 일상적인 문제에 대한 몇 가지 인상적인 솔루션일 수 있는 선언적 API를 제공합니다. 잠시 React에서 벗어나 HTML table 엘리먼트를 살펴보겠습니다. table 요소는 자체적으로 많은 작업을 수행하지 않습니다. 완벽한 테이블을..
보다 탄력적인 웹을 위한 점진적 향상[Progressively enhance for a more resilient web] 요즘 트위터에서 자주 언급되는 Progressive enhance에 대해 알아봅시다. 원문 주소입니다 : https://jjenzz.com/progressively-enhance-for-a-more-resilient-web Progressively enhance for a more resilient web There has been a lot of talk on the socials lately about progressive enhancement. Some good, some bad, and while the bad is often misled I get it. jjenzz.com 최근 점진적 향상(progressive enhancement)에 대한 이야기가 많이 나오고 있습니다. 이 주제에 대한 교육..
The Web’s Next Transition(웹 애플리케이션 아키텍처의 미래) 웹 애플리케이션 아키텍처의 미래를 살펴봅시다. 원문입니다 : https://www.epicweb.dev/the-webs-next-transition The Web’s Next Transition Web is made up of technologies that got started over 25 years ago. Now, we are transitioning to a new and improved architecture for building web applications. www.epicweb.dev 웹은 25년 전에 시작된 기술로 구성됩니다. HTTP, HTML, CSS, JS는 모두 90년대 중반(제가 8살 때)에 처음으로 표준화되었습니다. 그 이후로 웹은 유비쿼터스 애플리케이션 플랫폼으로 진화했습..
빠른 디자이너-개발자 의사소통을 위한 색상(color) 시스템 프레임워크 디자인 팀 / 개발 팀이 제품 전반에 걸쳐 일관성 있고, 목적있게 색상을 사용할 수 있도록 돕는 색상 프레임워크를 만들어 봅시다. 원문 링크입니다 : https://medium.com/prototypr/a-framework-to-create-accessible-and-harmonious-color-system-for-faster-design-dev-handoff-8138b3a9604d A framework to create an accessible and harmonious color system for faster design-dev handoff Enabling design & development teams to use colors deliberately for improved consistency..
[CSS] Spacing(간격) 프레임워크 구축 TL;DR 간격은 정보 계층을 표현 유지보수성 및 일관성 향상을 위해 시스템화 된 간격을 사용하자 원문 : https://medium.com/prototypr/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c A framework for creating a predictable & harmonious spacing system for faster design-dev handoff Enabling design & development teams to use spacing deliberately for improved readability and consistency in product blog.prototypr..
[CSS] 타이포그래피 프레임워크 구축 TL;DR 타이포그래피 시스템 프레임워크를 통해 디자인 / 개발 팀이 제품의 가독성 및 일관성을 향상시키고. 예측 가능한 방식으로 타이포그래피를 사용할 수 있습니다. 원문 : https://medium.com/prototypr/10-practical-steps-to-create-a-predictable-accessible-and-harmonious-typography-system-a-case-6c85d901bedd A framework to create an accessible & harmonious typography system for faster design-dev handoff Enabling design & development teams to use accessible and harmoniou..
UI 치트 시트 : 간격의 우정(UI cheat sheet: Spacing friendships) UI 설계시 가장 어려운 것 중 하나가 요소 간 간격(Spacing)을 설정하는 것입니다. 요소 간 간격을 설정하는 한가지 방법을 알아봅시다. 원문 링크입니다 : https://uxdesign.cc/ui-cheat-sheet-spacing-friendships-e37a6fccc407 UI cheat sheet: Spacing friendships Learn to space elements in your layout, with the help of a cheesy metephor. uxdesign.cc UI 디자이너의 실력을 보는 가장 쉬운 방법은 디자인에서 간격(spacing)을 사용하는 방법을 보는 것입니다. 색상, 타이포그래피, 이미지 등은 일반적으로 브랜드 가이드에서 제공되지만 간격을 올바르게 사용..

티스토리툴바