yunTechDiary

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 저만의 checkbox를 어떤 계기로 구현하게 되었고 어떤 식으로 구현했는지에 대해 전달을 하고자 작성해 봅니다 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 구현하게 된 계기 요즘 퇴근 후 토이 프로젝트를 진행하고 있습니다. checkbox를 사용하는 UI가 존재하여 처음에는 checkbox를 사용하기 위해 React-Native 공식 문서에 가서 확인해 보니 이런 문구가 존재했습니다. 제거가 됐다 커뮤니티의 패키지를 사용해라 그래서 저는 제가 사용할 라이브러리를 찾기 시작했고 눈에 들어온 것은 이것이었습니다. 덕분에 편하게 하겠다는 마음에 expo-checkbox를 사용하여 디자인 시스템 와이..

안녕하세요 이번에 소개드릴 내용은 제가 이번에 구현한 useList(가명)에 대해 소개 드리려고 합니다. 제가 어떠한 상황에서 useList를 구현하기로 마음을 먹었고 어떤 식으로 구현을 했는지에 대해 알려드리면 좋을 거 같다고 판단이 되어서 한 번 작성해 봅니다. 개발 환경 React-native + TypeScript로 진행되었습니다. 구현하게 된 계기 위 사진과 같은 화면 구현의 업무를 맡았습니다. 탭 형식으로 이루어졌으며 선택된 카테고리의 리스트를 보여주는 화면이었습니다. 어떻게 예쁘게 구현할까 고민을 한 후 custom hook으로 구현해야겠다 마음을 먹고 바로 기능들을 추출해봤습니다. 기능 추출 A Tab 리스트 불러오기 인피니티 스크롤 인증하지 않은 유저라면 인피니티 스크롤 X, 리스트 하단..

안녕하세요 이번에 회사 앱에 flow를 깊게 확인하기 위해 이것저것 해보는 와중 제 눈에 띈 것이 하나 있습니다. 바로 Modal 입니다. Modal은 앱에서 흔히 볼 수 있는 UI입니다. Modal을 사용하는 곳에서는 항상 기본적으로 state 1개와 함수 2개로 구성이 되어있었습니다. const [isModalOpened, setIsModalOpened] = useState(false); const closeModal = () => { setModalOpened(false); }; const openModal = () => { setModalOpened(true); }; 이런 똑같은 코드가 반복이 되는 것이 보기가 싫어 리팩토링을 해보도록 하겠습니다. 구현 단계 1차 구현 interface Modal..

구현하게 된 계기 이번에 근무하고 있는 회사에서는 React-Native를 사용하고 있습니다. 하지만 React-Native의 가장 큰 장점인 CodePush를 사용하지 않고 업데이트마다 매번 앱, 플레이 스토어의 심사를 거치고 있는 상황이었습니다. 너무 비효율적이다 생각한 저는 의견을 제시하여 바로 CodePush를 도입을 하게 되었고 제가 직접 반영하게 되었습니다. CodePush를 반영하고 난 뒤 사용자의 CodePush의 업데이트를 관리하는 custom hook을 만들자 해서 구현하게 되었습니다. 사실 주원인은 디자이너 분이 기본 제공하는 Dialog가 예쁘지 않다고 말씀하셔서 customModal을 쓰기 위해 구현했습니다. 구상 구현을 위해 제가 생각한 포인트 관점입니다. 이 포인트에 맞춰서 개..