yunTechDiary

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 Dropdown을 어떤 계기로 구현하게 되었고 어떤 식으로 구현했는지에 대해 전달을 하고자 작성해 봅니다 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 진행 중인 토이 프로젝트에서 디자인 시스템에 DropDown이 존재하였기에 개발을 하게 되었습니다. 훌륭한 라이브러리들이 많이 존재했지만 원하는 디자인과 디자인 시스템에 맞춰 개발을 하기 위해 직접 구현을 하기로 결정했습니다. 🤔 기능 산출 및 개발 계획 현재 개발해야 하는 컴포넌트는 Figma를 통해서 확인할 수 있듯이 크게 2가지로 나누어집니다. Dropdown과 ListValue로 ListValue를 이용하여 Drop..

개요 안녕하세요 이번에 작성하게 될 내용은 제가 react-native Expo 환경에서 갤러리와 카메라를 어떤 식으로 구현을 했는지 작성해 보겠습니다. 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 구현하게 된 계기 요즘 진행 중인 토이 프로젝트에서 프로필 사진을 선택하거나 유저가 글을 작성할 때 사진을 선택하거나 촬영하는 기능이 필요해서 구현하게 되었습니다. 제가 구현했어야 하는 UI, UX는 이렇습니다. 사진을 보시면 아시겠지만 사진 목록이 나오고 사진을 선택할 수 있어야 했습니다. 또한 선택 가능한 사진의 개수가 제한이 걸려있다면 Modal을 통해 사용자에게 안내를 해줘야 합니다. 처음에는 expo 환경에서 사람들이 자주 사용하는 라이브러리 중 하나인 Exp..

개요 안녕하세요 이번에 작성하게 될 내용은 제가 자주 사용하는 useInputState라는 hook입니다. 이 글은 ReactNative에서 작성했지만 Type만 바꾸면 React(Web) 환경에서도 정말 유용한 Hook이라 생각이 들어서 작성하게 됐습니다. 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 구현하게 된 계기 저는 개인적으로 개발할 때 의미 없는 반복을 정말 싫어하는 편입니다. 제가 custom hook을 잘 모르던 시절에 항상 반복하던 코드가 하나 있습니다. 개발 환경이 React 또는 React-Natvie에서도 항상 작성하던 그 코드는 사진과 같은 Input이 화면에 존재할 때 나타납니다. const ScreenA = () => { const [t..

개요 안녕하세요 이번에 작성하게 될 내용은 제가 작성한 useDeviceType이라는 custom hook에 대해 글을 작성해 보겠습니다. 개발 환경 React + TypeScript로 진행되었습니다. 구현하게 된 계기 이번에 React를 사용하여 Web 환경에서 토이 프로젝트를 하나 진행하고 있습니다. 이런 식의 UI를 구현하게 되었습니다. 개발하는 도중 문득 모바일 우선 디자인 (Mobile First Design)이라는 것이 떠올랐습니다. 만약 제가 이것을 떠올리지 않았더라면 이 useDeviceType라는 custom hook을 개발하지 않았을 수도 아니면 시간이 더 흐르고 개발했을 수도 있습니다. 저는 생각이 난 김에 이 UI에서 어떻게 하면 모바일 사용자에게 편의성을 제공하는 UI를 구성할까 ..

개요 안녕하세요 제가 이번에 작성할 내용은 useDebounce라는 custom hook은 어떤 상황에서 어떤 식으로 활용했는지에 작성해 보겠습니다. 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 상황 설명 이번에 진행 중인 토이 프로젝트에서 아래 사진과 같은 Ui가 존재합니다. 화면 Flow 설명 처음에 GPS를 활용하여 주변 동네에 대한 정보를 받고 사용자가 Text를 입력하게 된다면 해당 입력한 값으로 검색 결과를 보여주는 화면입니다. 개발 계획 위의 Flow대로 개발을 진행하기로 결정했습니다. 여기서 사용자가 주소 검색 시 디바운싱을 적용하기로 했습니다. 디바운싱이란? 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 디바운싱을 ..

개요 안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 제가 흔히 Chip이라 불리는 컴포넌트를 어떤 식으로 구현했고 어떤 식으로 사용하고 있는지 전달하고자 이렇게 글을 작성하게 됐습니다. 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 구현하게 된 계기 요즘 진행 중인 토이 프로젝트가 하나 있습니다. 지난 글에서도 작성을 하긴 했지만 이 토이 프로젝트에서 저희가 사용하게 될 디자인 시스템에 이런 모양의 사람들이 흔히 Chip이라고 부르는 요소가 추가되었습니다. 이렇게 구글에 자료가 너무나도 많지만 제가 개인적으로 라이브러리에 의존적인 걸 좋아하지 않습니다. 라이브러리는 우리의 개발을 편하고 빠르게 도와주는 좋은 도구지만 지금 사용하는 라이브러리가..

안녕하세요 이번에 작성하게 될 내용은 제가 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을 쓰기 위해 구현했습니다. 구상 구현을 위해 제가 생각한 포인트 관점입니다. 이 포인트에 맞춰서 개..