1/30 최종 프로젝트 11

내일배움캠프 오늘 학습 내용

 

• 최종 프로젝트 order 환불,교환,반품할 수 있도록 전체적으로 수정하기, product의 페이지네이션, 중간 발표 준비

 

 

끊임없는 프론트와의 연결을 위한 오류 수정...

 

며칠에 거쳐 오류나 제대로 연결되지 않고 필요한 정보가 넘어가지 않아 수정하는 작업이 몇 차례 있었다.

그 중 가장 큰 일은 product의 페이지네이션을 구현한 것과 order의 재구성이었다. product는 all을 할 때 전체를 다 불러오지만, 그렇게 되면 사이트의 로딩이 너무 오래 걸리고 가독성도 좋지 않기에 페이지네이션으로 12개씩 보여주기로 하였다.

또 프론트에서 각 상품의 리뷰 수나 찜 수 등을 같이 화면에 보여주기 위해서 해당 테이블과 join을 해야하는데 typeorm의 메소드로는 구현이 너무 복잡하고 어려워 sql문으로 구현하였다. review의 rate와 count를 sql로 join해서 받아와 리뷰 평점과 찜 수를 보여줄 수 있게 되었다. 또 page의 값을 query로 받아 limit과 offset으로 페이지네이션을 구현해 12개씩 나눠서 보여주었다. 조인의 위치와 방법에 따라 오류가 나기도 해서 여러 번 시행착오를 거쳐 구현되었다. getRawMany() 가 붙어야 결과적으로 오류를 내지 않고 제대로 출력을 해냈다.

 // 전체 상품 목록 조회
  async findAll(page: number) {
    return await this.dataSource
      .createQueryBuilder(Product, 'p')
      .select('p.*')
      .addSelect('COUNT(DISTINCT w.id) as wish_count')
      .leftJoin(Wish, 'w', 'w.product_id = p.id')
      .addSelect('ROUND(AVG(r.rate), 2) as average_rate')
      .addSelect('COUNT(DISTINCT r.id) as review_count')
      .leftJoin(Order, 'o', 'o.product_id = p.id')
      .leftJoin(Review, 'r', 'r.order_id = o.id')
      .groupBy('p.id')
      .where('p.id != :id', { id: 1 }) // product_id 1은 프로젝트에서 더미로 만들었기에 제외했음
      .limit(pageLimit)
      .offset((page - 1) * pageLimit)
      .getRawMany();
  }

 

 

order는 반품과 교환 기능을 구현하며 entity의 status를 string이 아닌 enum으로 바꾸면서 시작하였다. 반품은 배송지가 바뀔 수 있으니 배송지도 다시 입력받을 수 있게 해주었으며 교환은 반품 후 상품 재배송의 개념으로 구현하였다. 그리고 기간을 입력받아 기간별, 상태별 배송 내용을 선택해 확인할 수 있도록 api를 전체적으로 재구성하였다.

프론트와 연결하면서 프론트에서 필요한 부분이 아직 미구현이 되어있던 적이 있어 중간 발표 전까지 빠르게 제작하여 fix에 올려 풀리퀘스트와 코드 리뷰, 머지를 반복하고 있다. 도커에서 배포가 성공하면 이제 중간 발표를 위한 최종 테스트를 하면서 fix를 이어나가면 좋을 것 같다.