yunTechDiary

안녕하세요 이번에 작성하게 될 내용은 Next.Js로 프로젝트를 진행해 본 경험이 적다 판단하여 Next로 진행할 토이 프로젝트 구상을 진행한 스토리입니다. 해당 글은 프로젝트의 진행도에 따라 추가적으로 글이 작성될 예정입니다.🧐 프로젝트 계기최근 채용공고를 살펴보면 React와 더불어 Next를 많이 사용하는 것을 확인해 볼 수 있습니다.  React에 대한 경험은 있지만, Next.js에 대한 사용 경험이 아직 부족하다는 생각이 들었습니다. 인프런 강의를 수강하고 간단한 프로젝트를 하나 진행한 경험은 있지만, Next.js를 능숙하게 다룰 수 있다고 자신 있게 말하기에는 아직 아쉬운 부분이 많다고 느꼈습니다.그렇기에 Next.js를 좀 더 깊이 있게 이해하고, 실제로 활용할 수 있는 능력을 키우기 ..

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

1. 프로젝트 개요 1-1. 이 멤버가 모이게 된 스토리 💡 우리 모두의 이야기를 한데 모으기 전에, 잠깐! 이 모임에 합류하게 된 계기부터 소개해볼까요? 팀원 해당 프로젝트의 팀원은 고윤태 🦮 [프론트엔드] 신영석 🐩 [백엔드] 서연주 🐈 [디자이너] 공윤혜 🐈‍⬛ [PM] 총 4명으로 구성이 되어 있었습니다. 합류 이야기는 저의 이야기만 공유드리겠습니다. 안녕하세요 프론트엔드 개발자 고윤태입니다. 저는 평소 토이 프로젝트를 진행하는 것을 매우 좋아했습니다. 이에는 몇 가지 이유가 있습니다. 새로운 기술 스택의 사용 다양한 패턴으로의 코드 구현 기획 단계부터 참여하는 제품 개발 새로운 분야에 대한 지식 습득 토이 프로젝트를 통해 이런 기회를 얻고, 큰 만족감을 느꼈습니다. 운이 좋게도, 하나의 프로젝트..

안녕하세요 이번에 작성하게 될 내용은 제가 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를 확인했습니다. 이러한 디자인이 나왔고 정규 회의 시간에 디자이너님의 설명과 함께 디자인을 확인했습니다. 확인하는 도중 디자이너님께서 저한테 말씀하셨습니다. 디자이너님 : 윤태 님 아코디언 형태로 알잘딱깔센 하게 만들어주세요! 저 : 네... 이러한 계기로 인해서 아코디언을 구현하게 되었습니다. 🤔 기능 산출 및 개발 계획 ..