yunTechDiary

안녕하세요 이번에 작성하게 될 내용은 제가 회사에서 간단한 개발을 통해서 CS팀에 아주 좋은 만족도를 주게 된 경험에 대해 공유하고자 글을 작성하게 되었습니다. 💻 개발 환경React + javascript로 진행되었습니다.🧐 구현하게 된 계기저는 프로덕트를 직접 이용하는 고객들뿐만 아니라, CS 처리를 위해 어드민 기능을 사용하는 CS팀 역시 제가 기여한 서비스의 사용자로 생각합니다.그렇기에 종종 대면하게 되었을 때 현재 업무 처리 방식에 불편함은 없는지 좀 더 능률적으로 할 수 있는 방향성이 있다면 언제든 회사 메신저를 통해 공유를 해달라고 요청드립니다.물론 기존의 일정이 우선이기 때문에 모든 요청을 즉시 처리할 수는 없습니다. 그래서 '바로 처리는 어렵지만, 가능한 시기에 검토하여 반영하겠습니다..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 개발한 useComfirm custom hook에 대해 공유하고자 글을 작성하게 되었습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 React Native 앱 개발 과정에서 흔히 마주치는 UI 구성 요소인 모달과 오버레이를 더욱 스마트하게 관리할 수 있는 방법에 대해 이야기해보려 합니다. 특히, 반복되는 Dialog 생성 코드의 중복을 줄이기 위해 커스텀 훅을 만들어 관리하는 경험을 공유하려고 합니다. 특히나 현재 저희 서비스에는 삭제/닫기를 통해 사용자에게 확인을 하는 Flow가 다수 존재했습니다. 사용자에게 선택을 요구하는 다양한 상황에서 Dialog 컴포넌트를..

안녕하세요 이번에 작성하게 될 내용은 제가 회사에서 API 호출을 최적화 한 경험에 대해 공유하고자 글을 작성하게 되었습니다. 💻 개발 환경 React-native(CLI) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 간단한 서비스 및 환경 소개 서비스 저희 회사는 O2O(Online to Offline) 서비스를 운영 중입니다. 간단히 말해, 가맹점은 서비스에 등록하여 유저들에게 자신의 매장을 홍보하고, 유저들은 이 서비스를 통해 다양한 가맹점에서 제공하는 서비스를 이용하며 경험을 공유할 수 있습니다. 회사는 이 플랫폼을 통해 가맹점과 유저 사이의 연결고리 역할을 합니다. 가맹점: 가맹점은 서비스 제공 회사에 구독비를 지불하고, 자신의 가맹점을 등록하여 서비스 플랫폼에 참여합니다. 이..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 useImageAspectRatio custom hook을 구현한 이유와 방식에 대해 공유하고자 글을 작성하게 되었습니다. 💻 개발 환경 React-native(CLI) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 이번에 회사에서 UI 리뉴얼 작업을 진행했습니다. 진행 도중 최대한 활용할 수 있는 것은 하되 프로젝트를 상하게 만드는 코드는 거침없이 리팩토링을 진행하자가 제 지조였습니다. (상하게 만드는 코드 : 개인적으로 사용하는 말이지만 설명을 드리자면 스파게티 코드 또는 레거시 등 프로젝트의 곰팡이를 생기게 할 수 있는 코드를 뜻 합니다) 위의 사진과 같은 UI로 Home 화면이 변경이 되었고 최상단에서 Banne..

안녕하세요 이번에 작성하게 될 내용은 제가 그동안 개발을 하면서 JWT를 사용하면서 느꼈던 경험과 모자란 지식을 채운 경험에 대해 공유하고자 글을 작성하게 되었습니다. (당연히 지금도 모자다라고 생각합니다.) 🤔 JWT가 뭔데? JWT란? JWT(Json Web Token)는 말 그대로 웹에서 사용되는 JSON 형식의 토큰에 대한 표준 규격인데요. 주로 사용자의 인증(authentication) 또는 인가(authorization) 정보를 서버와 클라이언트 간에 안전하게 주고받기 위해서 사용됩니다. JWT 토큰 웹에서 보통 Authorization HTTP 헤더를 Bearer 의 형태로 설정하여 클라이언트에서 서버로 전송되며, 서버에서는 토큰에 포함되어 있는 서명(signature) 정보를 통해서 위변..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 최근에 제가 진행한 리팩토링에 대해 공유하고자 글을 작성하게 되었습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 진행하게 된 계기 진행 중인 프로젝트의 앱의 완성을 위해 여러 스크린을 작업을 진행하고 있었습니다. 디자이너 분이 처음에 설계하셨던 디자인 시스템의 AppBar 컴포넌트는 이러한 UI를 가지고 있었습니다. 하지만 실제 디자인 작업이 진행되다 보니 AppBar에서 어느 순간부터 Label(문자열) 뿐만 아니라 위의 사진처럼 햄버거 메뉴를 구현해야 하는 케이스도 존재하였고 이렇게 Title이 기존과 다른 케이스도 존재하기도 했습니다. 또한 AppBar의 BackButton을 ..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 Tabs UI를 구현한 방식에 대해 공유하고자 글을 작성하게 되었습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 현재 진행 중인 프로젝트에서 아래 사진과 같은 Tabs 컴포넌트를 개발해야 했습니다. 사실상 React-Native의 TabView를 사용하면 손쉽게 개발이 가능했지만 직접 여러 개의 Tabs를 커스텀하면서 구현해보고 싶다는 욕구가 갑자기 불타올랐습니다. 이유는 아마도 제가 평소의 네이버 웹툰을 정말 좋아하는 편인데 사용하면서 나도 이런 UI, UX를 만들어 보고 싶다 생각을 종종 했었기에 기회가 와서 열정이 올라온 것 같습니다. (쿠기 후원은 언제든 환..

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 accordion UI를 구현한 방식에 대해 공유하고자 글을 작성하게 되었습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 매번 같은 말로 시작하는 것 같지만 현재 진행 중인 프로젝트에서 새로운 feature의 디자인이 나왔다는 소식에 Figma를 확인했습니다. 이러한 디자인이 나왔고 정규 회의 시간에 디자이너님의 설명과 함께 디자인을 확인했습니다. 확인하는 도중 디자이너님께서 저한테 말씀하셨습니다. 디자이너님 : 윤태 님 아코디언 형태로 알잘딱깔센 하게 만들어주세요! 저 : 네... 이러한 계기로 인해서 아코디언을 구현하게 되었습니다. 🤔 기능 산출 및 개발 계획 ..

안녕하세요 이번에 작성하게 될 내용은 이번 프로젝트에서 제가 고차 컴포넌트를 사용하게 된 계기와 방법에 대해 글을 작성해 보겠습니다. 💻 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 🧐 구현하게 된 계기 저희 프로젝트는 일정 또는 QA 수정사항을 현재는 Jira를 사용하여 관리하지만 기존에는 Notion을 사용하여 관리했었습니다. 그러던 와중 PM님에 의해서 하나의 수정사항 요청이 생겼습니다. 지금 프로젝트를 진행하고 계시는 PM님이 친절하시고 꼼꼼하신 편이어서 상세 내역에 테스트 케이스를 작성해 주셨습니다. 즉 현재 화면에서 사용자가 설정할 수 있는 펫의 종류는 강아지 또는 고양이입니다. 강아지와 고양이는 각각 선택할 수 있는 필터의 옵션이 다르기 때문에 사용자..

안녕하세요 이번에 작성하게 될 내용은 제가 지난번에 개발한 채팅방 목록에서 기획자 분이 새로운 기능을 요청하셔서 수정하게 된 이야기를 가볍게 적어볼까 합니다. 💻 개발 환경 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에서 채팅방 목록을..