제가 써보고 싶은 서비스이기도 하고.. 도움이 되고자 몇 자 적어봅니다.
Task 몇개 적어둘건데, 어짜피 제가 혼자서 직접 개선해볼 내용들이라 슬쩍 보시고 PR올라오면 리뷰 남겨주시면 감사하겠습니다.
FE Tasks
styling library 정리
현재는 Symentic tag에 @emotion/react 를 사용하여 직접 스타일링이 진행되는데, key-value 형태로 직접 스타일을 작성해야하니 불편한 점이 좀 있습니다. 이를 @emotion/styled library로 해결합니다.
장점: 각각의 styled-component 로 렌더링됨에 따라 props 전달, scss 스타일의 코드작성으로 효율을 챙길 수 있습니다. 보기도 편하구요 ㅋㅋ
UI library 도입
사이트의 Select, Button 과 같은 Element들이 일관되게 보이지 않음. 이를 정돈된 UI library를 사용하여 개선.
장점: 모든 환경(Chrome, Safari, Firefox 등..)에서 일관된 UI가 보일 수 있게 보장할 수 있음. 또한 애니메이션을 그대로 사용할 수 있으니 전체적인 퀄리티가 상승
단점: UI library 컴포넌트의 커스텀이 필요할 수 있음. 러닝커브도 존재.
Memoization 적극 활용
반복된 새로운 연산은 브라우저를 놀라게 하고 힘들게 해요!...
value가 이전과 같다면 데이터를 캐싱하고 캐싱된 데이터를 사용하는게 옳아보입니다. ㅋㅋㅋ
useMemo, useCallback 적극 활용
BE Tasks
Pagination FE -> BE로 이관
응답이 상당히 많은 상태인데, Client에서 pagination이 진행된다면 첫로드가 오래 걸릴 수 있음.(지금은 아니지만!) 이를 BE로 이관.
API parameter page, limit 을 두고 Client에서 요청을 보낼 때는 현재 페이지와 응답을 얼마나 보여줄 지 값을 담아 보내어 백엔드에서 잘라서 Client로 응답을 보내주시면 좋겠습니다.
e.g. www.api.com/list?page=1&limit=10 <- 현재 페이지는 1번 페이지이고, 페이지당 10개의 회사를 보여주겠다!
개요
제가 써보고 싶은 서비스이기도 하고.. 도움이 되고자 몇 자 적어봅니다. Task 몇개 적어둘건데, 어짜피 제가 혼자서 직접 개선해볼 내용들이라 슬쩍 보시고 PR올라오면 리뷰 남겨주시면 감사하겠습니다.
FE Tasks
Symentic tag
에@emotion/react
를 사용하여 직접 스타일링이 진행되는데,key-value
형태로 직접 스타일을 작성해야하니 불편한 점이 좀 있습니다. 이를@emotion/styled
library로 해결합니다. 장점: 각각의styled-component
로 렌더링됨에 따라props 전달
,scss 스타일의 코드작성
으로 효율을 챙길 수 있습니다. 보기도 편하구요 ㅋㅋSelect
,Button
과 같은Element
들이 일관되게 보이지 않음. 이를 정돈된 UI library를 사용하여 개선. 장점: 모든 환경(Chrome, Safari, Firefox 등..)에서 일관된 UI가 보일 수 있게 보장할 수 있음. 또한 애니메이션을 그대로 사용할 수 있으니 전체적인 퀄리티가 상승 단점: UI library 컴포넌트의 커스텀이 필요할 수 있음. 러닝커브도 존재.useMemo
,useCallback
적극 활용BE Tasks
page
,limit
을 두고 Client에서 요청을 보낼 때는 현재 페이지와 응답을 얼마나 보여줄 지 값을 담아 보내어 백엔드에서 잘라서 Client로 응답을 보내주시면 좋겠습니다. e.g.www.api.com/list?page=1&limit=10
<- 현재 페이지는 1번 페이지이고, 페이지당 10개의 회사를 보여주겠다!