본문 바로가기

Project29

무한스크롤을 통해서 UX 개선하기 / React-Native 0.TL;DR 같은 데이터를 상단에는 그래프로, 하단에는 날짜별 카드 형식으로 보여줘야하는 화면이 있음 모든 정보 한번에 로딩 / 페이지네이션 / 무한 스크롤 중 무한 스크롤 방식이 가장 적절해 선택 React-Native의 ScrollView를 사용해 무한 스크롤 카드 리스트 구현 ScrollView가 하위 요소를 한번에 랜더링하기에 성능 이슈가 발생할 수 있다고 생각, FlatList를 사용하도록 수정 1. Why? 관리하당의 혈당 정보 페이지와 식사 정보 페이지 기획 과정은 다음과 같았다. 1. 재사용성을 높이기 위해 같은 카드 형식 styled component를 사용해서 날짜별로 보여주자. 2. 혈당 정보와 식사 정보를 그래프로 시각적으로 알 수 있으면 좋겠다. 결론적으로 상단에는 그래프, 하단.. 2023. 11. 30.
Next.js 13 App Routing PWA 적용하기 / Next.js 1. Why? 핀테크 프로젝트 모익에서 PWA(Progressive Web App)를 적용시킬때의 기록이다. 모익은 모바일을 메인으로 하는 웹앱서비스로 기획되었기에 모바일 환경에서 유저의 경험을 향상시키기 위해 도입했다. PWA를 도입하면 웹앱을 앱처럼 설치할 수 있게 되고, 이번에는 사용해보지 못했지만 서비스 워커를 사용한 캐싱과 웹 푸시 메시지로 알람을 전송하는 것 등 많은 장점을 가지게 된다. PWA는 모두의 지하철을 만들며 한 번 도입해본적이 있었기도 했고, Trade off에 비해 얻을게 많다고 판단했기에 쉽게 결정을 내릴 수 있었다. 2. 도입 모익은 Next.js 13 App Routing 방식을 기반으로 하고 있었고, Next.js에서 PWA 도입을 위해 사용되는 next-pwa라이브러리는.. 2023. 11. 30.
Atomic 패턴과 react-hook-form으로 재사용성을 고려한 로그인&회원가입 컴포넌트 만들기 1. Why?로그인, 회원가입 등 회원관리와 프론트엔드에서의 보안, 토큰 처리 등을 해보고 싶었었다. 그런데 마침 프로젝트 파트 분배 과정에서 하고 싶은거 없냐길래 냉큼 회원관리 부분을 가져왔다. 유효성 검사와 form의 데이터 처리를 쉽게 할 수 있고, 최소한의 리렌더링만을 일으켜 성능면에서도 우수한 react-hook-form 라이브러리를 도입하기로 결정했고, 이와 함께 atomic 패턴도 사용해서 공통적으로 사용할 수 있는 form 컴포넌트를 만들고, 이를 이용해서 재사용성이 뛰어난 회원 관리 기능을 구현하는 것을 목표로 삼았다. 2. atomic하게 atom과 molcule부터 만들어보기그런데 막상 찾아보니 TypeScript로 react-hook-form + Atomic 패턴을 사용한 사람이 없.. 2023. 11. 30.
🌱새싹톤 <모두의 지하철> 회고 5월 중순부터 6월 중순까지 서울의 문제점을 해결하기 위해 서울시와 구름이 주최한 새싹톤에 FE개발자로 참여하였다. SSAFY 1학기는 개발 학습과 간단한 토이 프로젝트 정도만 진행하기에 프로젝트에 목마른 사람들이 많았고, 나를 포함한 SSAFY 동기들 3명이서 팀을 이뤘다. 5명을 채워서 진행하는 해커톤이였기에 외부에서 섭외한 기획자/디자이너 각 1분씩을 섭외해 참여했고, 적극적으로 함께 기획한 결과 1, 2차 예선을 무사히 통과해 본격적으로 개발에 들어가는 본선까지 참여할 수 있게 되었다. 🚇프로젝트 GitHub GitHub - Legitgoons/Everyones-Subway Contribute to Legitgoons/Everyones-Subway development by creating an .. 2023. 8. 28.

티스토리툴바