4. 주문 목록 & 주문 상세

• 주문

강의 정리

주문 목록

상품 목록과 비슷한데, 상품 목록은 모든 사용자에게 보여지는 것이고, 주문 목록은 사용자마다 다르게 보여져야 한다. Order에 관련된 타입을 주문 날짜를 나타내는 값으로 orderedAt을 사용했는 데 createdTime과 같은 값보다 명시적인 것 같기도 하다.

주문 목록도 OrderListStore에서 관리한다. page, store단에서 반복되는 코드들이 많은데, 파일을 복사해서 빠르게 만드는 방식이 좋다. 주문 목록의 경우 로그인 상태가 아니면 아예 화면에 보여주지 않는식으로 구현.

주문 상세 확인

Cart랑 비슷하다. 추가적으로 파일의 양이 많아짐에 따라, 정확히는 기능이 추가됨에 따라 폴더 구조도 뎁스를 하나씩 만들어가면 좋을 것 같다. 처음부터 굳이 분리할 필요는 없고, 복잡해진다는 느낌이 들면 분리해주자.

비동기에서는 항상 3가지 상태에 대해 처리를 해줘야 한다. Pending, Fulfilled, Rejected 이 상태가 어플리케이션에서는 data, isLoading, isError로 처리된다. Pending일 때 Spinner, Skeleton. Fulfilled일 때 UI, rejected일 때 에러 처리. 특히 Pending, Rejected일 때의 처리에 대해 고민을 많이 하고 깊게 다뤄보면 좋을 것 같다. UX와 바로 맞닿아있는 부분이기 때문이다.

기존의 UI에서 사용하고 있던 부분을 새로운 페이지를 개발할 때 사용하고 싶으면, 해당 코드를 컴포넌트로 분리한다. 컴포넌트 명은 일반적으로 짓는다. HTML의 dl, dt, dd 태그 잘 사용하기. 시맨틱 마크업 중요하다. API의 응답값에 따라 특정 메시지를 출력해주고 싶을 때, STATUS_MESSAGES와 같은 객체를 만들어서 관리한다. 이렇게 관리하면 여러 곳에서 사용되더라도, 변화가 생겼을 때 한 곳만 수정해주면 된다. 또한 i18n같은 다국어 지원처리를 해줄때도 고생하지 않고 쉽게 활용할 수 있다.

모든 서비스는 쇼핑몰의 기능에서 크게 변하지 않는다. 조금만 응용하면 만들어 낼 수 있다. 이 과정을 스스로 거쳐야 배울 수 있다고 생각한다. 그리고 한없이 고통스러워야 한다.