yunTechDiary

안녕하세요 이번에 작성하게 될 내용은 제가 지난번에 개발한 채팅방 목록에서 기획자 분이 새로운 기능을 요청하셔서 수정하게 된 이야기를 가볍게 적어볼까 합니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 제가 지난번에 아래 글에도 작성했듯이 채팅방 목록을 구현했었습니다. https://yun-tech-diary.tistory.com/entry/React-Native-%EC%B1%84%ED%8C%85%EB%B0%A9-%EB%AA%A9%EB%A1%9D-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 React Native 채팅방 목록 구현하기 안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 채팅방 목록을..

안녕하세요 이번에 작성하게 될 내용은 제가 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는 카카오톡이기에 채팅을 만들 때 카카오톡처럼 만든다면 잘 만든 것이라는 의견을 제시했습니다. (사실 이 말은 전에 다니던 회사 팀장님이 회사 내에 채팅을 구현할 때 이런 ..

서론 안녕하세요 저는 평소 시간이 남을 때 다른 분들의 개발 블로그를 읽는 것을 좋아합니다. 시간이 남으면 심심하기도 하고 다른 분들이 노력을 통해 얻은 지식을 깔끔하게 정리해 주신 글을 보면 여러 가지 감정이 느껴지기도 하고 도움이 많이 되어서 감사하게 읽고 있습니다. 개인적으로 판단했을 때 글 내용이 너무 무겁지 않으면서 재밌게 읽은 글이거나 제 학습에 도움이 되는 글을 이곳저곳에 글을 읽은 순간에 퍼져서 저장을 해놨습니다만 다시 읽고 싶어서 찾는 과정에 시간 소모를 너무 많이 했습니다. 그래서 이번 기회에 git repository를 하나 파서 readme에 정리해 놓기로 결심했습니다. 다른 분들도 읽고 재밌었던 글이나 도움이 됐던 글을 댓글 또는 git으로 알려주신다면 바로 반영하도록 하겠습니다...

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

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