Improvement tasks

[kangjae4real]

개요

제가 써보고 싶은 서비스이기도 하고.. 도움이 되고자 몇 자 적어봅니다. 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개의 회사를 보여주겠다!

[Ji-InPark]

@kangjae4real page per는 예정에 있었던 것이기 한데 귀찮아 냅두고 있었습니다... ㅎㅎ 해당 태스크 진행할 때 알려주시면 하위호환성 지키면서 배포해드릴게요!

[kangjae4real]

굳!