전체 글

시작말재사용 가능한 공통 컴포넌트, 확장성 있는 컴포넌트란 무엇일까?에 대해 고민하다가잘 만들어진 오픈소스 UI 라이브러리 코드들을 보면 그 답을 알 수 있지 않을까 해서 Radix UI와 Headless UI의 라이브러리 코드를 살펴보기로 했다.소스코드에서 공통적으로 사용하는 컴포넌트 설계 패턴이 있는데 4가지의 핵심 React Composition 패턴에 대해 정리해보려고 한다.1. Compound Component 패턴핵심 개념은 간단하다.부모 컴포넌트가 상태를 관리하고, 자식 컴포넌트들은 Context를 통해 그 상태를 공유하는 것이다.Radix UI의 Select 컴포넌트에서 이 패턴을 확인할 수 있었다.// Context 생성const SelectContext = React.createCont..

시작말프로젝트에서 '공유' 기능을 구현하면서 다음과 같은 요구사항이 생겼다.공유된 링크를 클릭했을 때 앱이 설치되어 있으면 앱이 열려야 하고앱이 미설치 상태라면 웹 브라우저로 열려야 한다.이러한 동작을 iOS에서는 유니버셜 링크(Universal Links), 안드로이드에서는 앱 링크(App Links)라고 부른다. 이전에 모동숲마켓에서 푸시 알림을 클릭했을 때 앱이 열리도록 딥링크를 구현한 적 있다.그때는 Custom URL Scheme 방식을 사용했는데, 이 방식은 앱이 설치된 경우에만 동작하고, 앱이 설치되어있지 않으면 시에는 아무 동작도 하지 않는다는 한계가 있다.그래서 이번에는 앱 설치 여부와 관계없이 동작하는 링크 구조를 구현해야했고, Universal Links/App Links를 적용하게 ..

시작말칭찬스티커 앱 Podo에서 구현하기 가장 까다로웠던 기능은 스티커 드래그앤드롭이었다.현실에서의 스티커를 떼고 붙이는 아날로그 경험을 앱에서도 비슷하게 구현하고 싶었고, 요구사항은 다음과 같았다.스티커를 뗄 때는 Long Press로 떼고, 이 때 햅틱 피드백으로 스티커가 떨어졌음을 알려준다.스티커는 스티커판의 아무 칸에 붙이는 게 아니라 비어있는 가장 앞쪽 칸에만 붙일 수 있다.유효한 영역(± N px)에 놓았을 시 scale 애니메이션과 함께 자석처럼 붙어야 한다. 전체 구조드래그앤드롭 시스템은 크게 3가지 요소로 구성된다.영역 측정 (좌표 추적) -> 드래그/드롭 가능한 영역들의 위치를 파악드래그 상태 관리 -> 사용자의 터치 이벤트를 추적하고 드래그 상태를 관리드롭 검증 로직 -> 스티커가 ..