My Boundary As Much As I Experienced

설계 배경UI 개발에서 버튼은 필수적인 컴포넌트 중 하나이다.하지만 단순한 기능처럼 보여도 버튼 컴포넌트를 잘 설계하는 것은 생각보다 까다로운 작업이다.다양한 상태, 크기, 색상, 아이콘 배치 등 요구사항을 충족하면서도 유지보수성과 재사용성을 고려해야 하기 때문이다. 이번에 디자이너 분이 디자인 시스템을 본격적으로 만드시기 시작했는데 (내가 디자이너 시절에 만들었던 시안을 보고 작업하셨다ㅋㅋ..)다른 컴포넌트에 비해 버튼이 특히 매우 다양한 variants가 존재하는 걸 알 수 있다.이렇게 많은 variants들은 단순 prop들로만 관리하기 힘들었고, 나는 대안으로 컴파운드 컴포넌트 패턴을 활용하기로 했다. 이번 글에서는 컴파운드 컴포넌트 패턴과 디자인 시스템을 활용한 Button 컴포넌트를 어떻게 ..

배경오늘의 일기에 프리텐다드 폰트와 교보손글씨체2019 폰트를 스위칭 할 수 있는 기능을 만들었다.그러기 위해 일단 폰트를 리액트 네이티브에 추가하려고 했는데,웹처럼 웹폰트를 import하거나, global.css에 한 줄 추가로 해결이 안 되었다.(React Native에서 폰트 설정은 웹보단 조금 더 복잡함..) 하여튼 내가 경험해본 바로는 React Native에서 Text 컴포넌트에 커스텀 폰트를 적용하려면 다음 단계를 따르면 된다.1. 커스텀 폰트 파일 추가프로젝트에 폰트 파일을 추가한다..ttf 또는 .otf 파일 형식의 폰트를 프로젝트의 assets/fonts 폴더에 저장한다.2. react-native.config.js 파일 수정React Native가 폰트를 인식하도록 설정한다.프로젝트 ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.