yunTechDiary

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 WebSocket을 활용하여 채팅 기능을 구현한 방식에 대해 공유하고자 글을 작성하게 되었습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 지난번에 제가 작성한 포스트에도 작성했던 내 용지만 제가 지금 진행 중인 토이 프로젝트에서 유저 간의 채팅 기능은 선택이 아닌 필수였습니다. 서비스의 특성상 사용자끼리의 채팅으로 소통을 해야 하는 케이스가 존재하기 때문입니다. 지난번에는 채팅방 목록을 보여주는 방 목록 컴포넌트를 만드는 것에 대해 작성했으나 이번에는 채팅 기능을 구현하는 글을 작성하게 되었습니다. 🤔 기능 산출 및 개발 계획 채팅 기능을 개발할 때 저희가 흔하게 ..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 Picker(가명)을 어떤 계기로 구현하게 되었고 어떤 식으로 구현했는지에 대해 전달을 하고자 작성해 봅니다 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 진행 중인 토이 프로젝트에서 이러한 UI 디자인이 존재했습니다. IOS 유저 분들이시라면 어? 어디서 봤던 기억이 있는데 하고 생각나실 수 있는 UI입니다. 실제로 IOS에서 UiPickerView 이렇게 제공하고 있기 때문입니다. React Native에서 저 Picker를 간단하게 구현을 한다면 https://github.com/react-native-picker/picker GitHub - react-native-..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 useAsyncWithLoading이라는 custom hook을 구현한 방법에 대해 글을 작성해 보겠습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. React 환경에서도 당연히 사용이 가능합니다. 🧐 구현하게 된 계기 프로젝트를 진행하다 보면 사용자에게 좋은 경험을 남기기 위해선 서버와 통신 시에 무언가 처리 중이다라고 사용자에게 알려주는 것이 굉장히 중요하다고 생각합니다. 개발자 입장에서야 API 요청을 보냈다고 알 수 있지만 사용자에겐 에러로 느낄 수 있습니다. 이런 상황을 사용자에게 느끼지 않도록 하기 위해선 우리에겐 Loading 중이다라는 것을 알리는 선택지가 존재합니다. 그러..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 RadioButton을 구현한 방법에 대해 글을 작성해 보겠습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 진행하고 있는 토이 프로젝트에서 디자인 시스템에 RadioButton이 존재하고 있습니다. 이런 식으로 말이죠 사실 개발은 예전에 진행하고 이미 사용 중에 있습니다만 최근에 블로그 관리(?)를 통해 확인해 보니 제 블로그 글 중에 항상 매주 1위를 하고 있는 글이 있습니다. 바로 React Native에서 라이브러리를 사용하지 않고 checkbox를 구현하는 법을 작성한 글입니다. https://yun-tech-diary.tistory.com/entry/Rea..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 useOverlay라는 custom hook을 구현한 과정과 어떤 식으로 구현했는지에 대해 글을 작성해 보도록 하겠습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 저 같은 경우 기술 블로그를 보는 것을 정말 정말 좋아합니다. 작성자 분이 제가 읽고 있는 글을 작성하시기 위해 얼마나 많은 노력과 고민이 담겨 있는지도 느껴지기도 하고 그 과정을 함축하여 누구나 정보를 습득할 수 있도록 글에 옮기신 것이 너무 멋있다고 생각하기 때문입니다. 제가 몇 개월 전부터 제 것으로 만들기 위해 눈여겨보며 틈틈이 다시 읽던 블로그 글이 하나 있습니다. 토스 기술 블로그의 선언적인 코..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 채팅방 목록을 어떤 식으로 구현했는지 글을 작성했습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 현재 진행 중인 토이프로젝트에서 채팅 기능이 필요했습니다. 그 이유는 당근마켓을 벤치마킹한 서비스를 만들고 있기 때문에 사용자들끼리의 소통은 필수였기에 채팅 기능은 선택이 아닌 필수였습니다. 처음에 채팅에 대한 기획 + 아이디어 회의를 진행할 때 제가 제시했던 의견은 사용자에게 가장 친숙한 UI, UX는 카카오톡이기에 채팅을 만들 때 카카오톡처럼 만든다면 잘 만든 것이라는 의견을 제시했습니다. (사실 이 말은 전에 다니던 회사 팀장님이 회사 내에 채팅을 구현할 때 이런 ..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 ToastMessage을 어떤 계기로 구현하게 되었고 어떤 식으로 구현했는지에 대해 전달을 하고자 작성해 봅니다 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 진행 중인 토이 프로젝트에서 디자인 시스템에 ToastMessage가 존재하였기에 개발을 하게 되었습니다. 처음에는 디자이너 분과 얘기해서 라이브러리를 사용하려고 생각을 해서 여러 다양한 ToastMessage를 사용할 수 있는 라이브러리를 찾아보고 좋으신 분들이 작성해 주신 글도 읽어봤습니다. 하지만 아쉽게도 제 기준에 미관상 현재 서비스에 맞지 않거나 style에 대한 커스텀이 불가능하거나 사용법이 불편하거나(지..

안녕하세요 이번에 작성하게 될 내용은 제가 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..