원티드 프리온보딩 마지막 후기이다.
마지막 주차에 진행했던 과제에 대해 작성하고 전체 과정에 대한 나의 생각을 남기려한다.
드간다.
📟500개의 주문내역 관리 어드민 페이지 구현 프로젝트
500의 mock data를 사용하여 data를 표로 보여주고 필터링 기능과 정렬 기능을 넣은 어드민 페이지를 구현하는 과제이다.
과제 중간 중간 이력서도 관리하고 강의도 듣고 하느라 일요일부터 과제를 진행했다.
뒤에 이야기하겠지만 이번 과제에서 sorting과 filtering을 함께하는법에 대해서 많은 고민을 했었다.
그리고 한가지 방법을 채택해 사용했는데 다른 방법(좀 더 깔쌈한)이 있다면 댓글로 알려주시면 감사드리겠습니다.
📝 과제에서 중요하게 생각한 부분
react-query 를 이용한 data fetch 및 refetchInterval setting
이번 과제에서도 mock data가 주어지긴 했지만 실 서버에서 data를 fetch 한다는 가정하에 진행했다.
과제에서도 그것을 원했다.그리고 받아온 data를 5초마다 새로 받아와서 항상 최신의 data를 유지할 수 있도록 하라는 요구사항이 있었다.
이거는 뭐 거의
react-query 쓰라는 거쥐~~~!!
요즘 대세 react-query를 바로 도입했다.
react-query
를 사용하면 서버에서 받아온 데이터를 프론트에서 따로 저장하여 사용해야하는 번거로움이 없어지고 서버의 데이터를 바로 사용할 수 있다.
데이터는 캐싱이 되고 cache의 max-age를 자체적으로 설정할 수 있는 기능을 상용할 수 있다.
react-query를 몇번 사용해봤는데 너무 편하고 좋은 것 같다. 아직 개념적으로 완벽히 이해하고 있지 않기에 계속 공부를 해야겠다.
기회가 생기면 글을 남기리라...
이번 프로젝트를 하며 알게 되었는데 useQuery의 refetchInterval 옵션을 추가하면
몇초마다 새로 서버에서 데이터를 받아올지 시간을 정할 수 있다.
과제 중 react-query 사용에 익숙하지 않는 팀원들은 useInterval이라는 외부 라이브러리 hook을 사용하여 개발했다.
추후에 나의 의견이 반영되어 react-query로 best-practice를 만들었다. const { data: tradeData } = useQuery({
queryKey: ['getTrade'],
queryFn: getTradeInfo,
refetchInterval: 5000,
})프로젝트의 규모가 커지면 이부분에서 useQeury를 따로 훅으로 빼는 것을 개인적으로 선호한다.
하지만 굉장히 작은 규모의 프로젝트였기에 best practice에서는 바로 main page 컴포넌트에서 구현했다.
sorting & filtering
이번 과제에서 나의 머리를 아주 많이 아프게 했던 부분이다.
따로따로는 많이 구현을 해봤지만 이번에 새롭게 느꼈다.
이거 복잡하다
왜인고하니~
우선 sorting과 filtering의 대상에 대해서 설명하겠다.
Sorting : id ( 주문 번호 ), transaction_time ( 거래 시간 )
Filtering : status ( 주문 상태 ), customer_name ( 거래인 이름 )
- id로 내림차순 정렬 & transaction_time으로 내림차순 정렬
- status로 (boolean 값) 필터링 & customer_name으로 검색
유저가 위 어드민 페이지에서 sorting 및 filtering을 하는 시나리오는 다음과 같다.
-
id 또는 transaction_time 버튼을 눌러 정렬을 한다.
-
status 버튼으로 필터링을 하거나 customer_name 으로 data 검색을 한다.
-
필터링 기능을 이용하고 정렬을 하거나, 정렬을 하고 필터링 기능을 이용한다.
1번과 2번은 문제가 없다. 하지만
3번은 생각해볼만하다.
상황1. 필터링 기능후 정렬시 필터링 된 값에서 정렬이 이루어져야하나?
이거는 흠 당연해보인다.
상황2. 정렬을 하고 필터링을 진행하면 필터링 된 데이터에 정렬상태가 유지되어 있어야 하나?
이건 의견이 나눨것 같다.
정렬이 리셋되어야 할 수도 있고, 유지되어야 할 수도 있겠다.
하지만 내 생각에는 유지되어야한다.
팀원들과의 논의 후에도 유지되는 쪽을 택했다.
HOW ?
많은 다양한 시도를 했었다. custom hook에서 sorting 용 data와 filtering용 data가 따로 있고 이를 동기화시켜서 화면에 보여줘야하나?
순서대로 어느 한 부분에 설정이 있지 않아도 sorting하고 filtering을 해서 data를 보여줘야하나?
사실 거의 똑같은 모습의 data를 여러 state에서 동시다발적으로 다뤄서 조작을 하려하니 머리가 터질것 같았고 방법도 맞지 않아보였다.
search params 이용
결국 유저의 검색 기록을 유지하듯 sorting과 filtering을 search params에 유지하고 sorting이나 filtering을 할 때마다
search params를 바꿔주는 방식으로 했다.
이렇게 하면 search params가 변경됨에 따라 지속적으로 sorting & filtering을 진행할 수 있다.
결론적으로 잘 구현이 되었지만 search params를 사용하지 않고 구현하고 싶은 마음이 가슴 한 켠에 남아있다. 씁쓸... ㅎㅎ
결론
사실 이번과제의 주된 포인트 중 하나가 test 였다.
vitest와 react-testing-library를 이용해 컴포넌트 별 test를 진행했고, router test와 custom hook test 그리고 msw로 가상 api 서버 통신을 만들어 api test도 진행했다.
test에 대해서는 다음에 글로 정리를 하도록 하겠다. 이로써
원티드 프리온보딩에서 진행한 과제가 마무리되었다.
많은 팀원들과 같이 작업하면서, 다양한 코드 스타일도 보고 코드 리뷰를 하며 best practice 코드도 만들어보고 좋은 경험을 할 수 있었다.
수업내용도 너무 알차고 좋은 내용들로 되어있어서 좋았다.이번 인턴십으로 많은 성장을 하게 된 것 같아 너무 뿌듯하다.
