[jiheon788] 주문 목록 페이지 구현 #9
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- ui library: chakra ui - fetch library: react-query - set mock data
- chakra provider - query client - api client - router setting
- 실 백엔드 API와 같은 환경으로 구현하기 위하여 가상 API server 구현
- 요구사항을 잘못이해하여 오늘의 날짜만 부른다고 판단하였음 - 요구사항 맞춰서 오늘의 주문보기, 전체보기로 분리
- 총 currency - 총 주문 수 - 현재 페이지 주문 index
- 반복되는 로직 줄이기 위함
|
지헌님 항상 과제에 대한 생각을 적어주셔서 좀 더 빠른 이해가 됩니다👍 저도 클라이언트에 과부화을 생각해 백엔드에서 처리해야 한다고 생각하고 mock데이터를 가공해서 클라이언트에 제공하는데 MSW 라이브러리를 사용해 가상의 REST API를 할 수 있는 부분을 배웠습니다. |
jhoon9494
reviewed
Mar 20, 2023
Noeyso
reviewed
Mar 20, 2023
|
지헌님 고생많으셨습니다!! |
tnghgks
reviewed
Mar 20, 2023
| placeholder="Select Date and Time" | ||
| size="lg" | ||
| bg="white" | ||
| type="date" |
There was a problem hiding this comment.
DatePicker를 통해서 날짜를 선택할 수 있는것이 사용자에게 좀더 좋은 경험이 될 수 있어서 좋은것 같습니다.
| import useGetOrderData from '@/lib/hooks/useGetOrderData'; | ||
| import useSetParams from '@/lib/hooks/useSetParams'; | ||
|
|
||
| const StatsArea = () => { |
There was a problem hiding this comment.
테이블의 종합 정보를 분리해서 깔끔하게 잘 보여주시는것 같습니다! 👍
| return { startDate, endDate }; | ||
| }; | ||
|
|
||
| export const generateZeroToNArr = (n: number) => Array.from(Array(n).keys()); |
There was a problem hiding this comment.
fill을 안쓰고 이렇게 빈 배열을 만들 수도 있군요 좋은걸 배워갑니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
구현 목록
e.g. Showing 51 - 100 out of 267참고 사항
Outlet사용useSetParams,useGetOrderData두 가지 커스텀 훅을 만들어 반복되는 로직을 재사용하고, 모든 컴포넌트에서 비동기처리 및 상태를 관리합니다.사용 라이브러리
React Query: data fetching 라이브러리, react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됩니다.MSW: MockServiceWorker를 사용하여 Mock 백엔드 API구현 사용 이유는 아래 상세 기재public/mockServiceWorker.js은 msw에서 제공하는 셋업용 보일러플레이트 코드입니다. 사용시 수정할 일이 전혀 없으므로 보지않으셔도 됩니다!!docs/API.md에 기재이번 과제에서 가장 깊게 고민해본것은 만약 실제 서비스라면 페이지네이션, 필터링, 소팅을 프론트에서 할것인가 백에서 할것인가였습니다. 이에 대해 조사한 결과는 다음과 같습니다.
조사를 통해 내린 결론은 정답이 아닌 각각 장단점이 존재합니다. 비즈니스 요구 사항을 분석해 어떤 것이 효율적인지 판단해 상황에 맞게 선택을 해야합니다.
이번 과제가 실제 서비스라면 백엔드에서 처리하는것이 효율적이라 생각합니다. 클라이언트에서 과도한 계산을 피하는 것이 좋습니다, 사용자 PC의 성능을 알 수 없기 때문입니다. 또한 클라이언트 솔루션은 소량의 데이터에 적합합니다. 현재 서버 없이 mock_data를 사용하여 데이터가 적다고 생각할 수 있습니다. 하지만 현재만 보는 것이 아니라 이를 실제 서비스 하였을때를 고려해야한다고 생각합니다. 저희 과제는 주문 목록을 보여주는 admin페이지를 구현하고 있습니다. 5초에 한번씩 최신화를 진행해야할 정도로 변화가 빠르고 데이터의 크기 또한 무한정 늘어날 것 입니다.
과제 요구사항 중
5초에 한번씩 최신화가 핵심이라 생각합니다. 5초에 한번씩 전체 데이터를 새로 받은 후 다시 각종 처리를 하는게 효율적이지 않다고 판단했습니다.과제는 전체데이터를 다 보여주는 것이 아닌 50개의 페이지당 컨텐츠 수가 정해져 있습니다. 즉 필요한 항목만을 서버에서 받아 클라이언트에 과부하를 주지 않을 수 있습니다.
결론
위의 이유로 실제 서비스라면 백엔드에서 처리하게 될 것을 가정하고 구현하였습니다. 프론트엔드는 필요한 것을 말하고 백엔드는 적용합니다.
참고 자료
Sample