핵심 요약
여기어때가 Vue2 디자인 시스템을 React로 옮기며, 프레임워크 종속 UI 라이브러리 부재, 디자인 토큰의 설정화, 양측 Tailwind 기반이라는 세 가지 조건이 이식의 핵심임을 공유합니다.
주요 경험
- 세 가지 조건이 이식 가능성의 결정 요인임을 확인했습니다.
- 여백은 prop이 아닌 className으로 처리하고, 레이아웃 래퍼는 필요 시에만 사용했습니다.
- 카드/입력 포맷 로직 등 도메인 지식을 화면 밖으로 빼고, 재사용 가능한 함수로 분리했습니다.
얻은 인사이트
- 디자인 토큰이 컴포넌트 밖에 있을 때 이식성과 재사용성이 크게 향상됩니다.
- 전역 유틸리티 의존성을 줄이고, 문자열 기반 Tailwind 클래스의 이식성을 유지하는 것이 중요합니다.