본문 바로가기

전체 글41

무한스크롤을 통해서 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.
공식문서로 forwardRef와 useImperativeHandle 알아보기 1. forwardRef는?이제 forwardRef로 들어가보자. forwardRef는 자식 컴포넌트가 부모 컴포넌트에 DOM 노드를 노출할 때 사용한다. 나 같은 경우는 Atomic 패턴을 이용해 컴포넌트를 나누면서 부모 컴포넌트가 자식 컴포넌트 DOM 노드의 값을 가져가 사용할 일이 많다보니 자연스럽게 사용하게 되었다.forwardRef를 사용하면 컴포넌트가 ref를 사용하여 부모 컴포넌트에 DOM 노드를 노출할 수 있습니다. forwardRef는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 달리, forwardRef가 반환하는 컴포넌트는 ref prop을 받을 수도 있습니다. 컴포넌트의 DOM 노드는 비공개가 기본이지만, forwardRef.. 2023. 11. 7.

티스토리툴바