[Baeg-won Clothing Gallery] 4. CLOTHING, FOOTWEAR, ACCESSORIES 페이지 구현

📝 Outline

• 지난 시간에 이어서, Clothing, Footwear, Accessories 페이지 구현을 완료하였다.
• 면접 일정이랑 겹치는 바람에 프로젝트에 신경을 못쓰다가 오랜만에 코드를 작성하려다보니 시간이 조금 걸린것 같다.

• 각설하고, 각 페이지는 상품 카테고리별로 옷, 신발, 악세서리를 나누어 출력하며, 특별한 기능은 없으므로 기존에 사용했던 컴포넌트들(Image, List, Designer)을 재활용하여 구현하였다.
• 구현 스타일은 다음과 같다.

• 위와 동일한 스타일로 Footwear, Accessories 페이지도 구현해주었다.
• 즉, 기존의 Shop 페이지와 Brands 페이지에서는 카테고리 구분 없이 모든 상품을 출력해주었다면, 위의 세 페이지에서는 카테고리 기능이 추가된 것이다.
• 이를 위해 기존의 코드를 조금 수정해주어야 했는데, 이는 뒤에서 간단히 설명하겠다.

---

📝 Review

• 이번에도 간단하게 프로젝트 진행 과정을 리뷰해보겠다.

 

💬 List.vue

• 카테고리에 따라 데이터를 출력해야하는 상황에서 필자는 기존에 작성했던 코드를 최대한 재활용하면서 구현할 수 있도록 고민했다.
• 간단하게 각 페이지마다 axios 코드를 작성하여 각 페이지에 맞는 데이터를 불러오는 방식도 존재하겠지만, 이렇게 할 경우 중복되는 코드가 생기게 된다.
• 따라서 필자는 기존에 List.vue에서 데이터를 불러오는 방식은 그대로 두고, 각 페이지에서 자신이 어떤 카테고리의 상품을 출력해야 하는지만 알려주는 방식으로 구현해보았다.
• Clothing 페이지를 예로 들면 다음과 같다.

<template>
  <!-- Product List -->
  <div class="div-product_list">
    <List :category="category" :itemWidth="itemWidth" :itemHeight="itemHeight" />
  </div>
  <!-- Product List End -->
</template>

<script>
import List from "../components/List.vue";

export default {
  components: {
    List,
  },

  data() {
    return {
      category: "clothing",
      itemWidth: 294,
      itemHeight: 294,
    }
  },
}
</script>

• List 컴포넌트를 호출할 때, category 데이터를 넘겨주고 있는 것을 확인할 수 있다. Clothing 페이지의 카테고리는 clothing으로 설정되어 있다.

this.$axios.get(`/test2/${this.category}`).then((res) => {
  res.data.forEach((element) => {
    this.data.push({
      name: element.name,
      price: element.price.toLocaleString("ko-KR"),
      url: element.url,
      brand: element.brand,
      register_date: element.register_date
    });
  });
});

• 이후, List.vue에서는 위와 같은 형식의 GET 요청을 통해 서버 측에 데이터를 요청한다.

@GetMapping("/test2/{category}")
public List<ProductDto> test2(@PathVariable String category) {

    productList = productRepository.findProductByCategory(category);

    List<ProductDto> productDtoList = productList.stream().
            map(product -> modelMapper.map(product, ProductDto.class)).collect(Collectors.toList());

    return productDtoList;
}

• 서버단은 위와 같은 방식으로 구현되어 있으며, 즉 전달받은 카테고리에 따라 상품 리스트를 뽑아 클라이언트 측으로 전달해 줄 것이다.
• 이후 결과를 확인해보면?

 

💬 EventBus

• 이전에 상위 컴포넌트와 하위 컴포넌트 간에 데이터 전달 및 서로 간의 메서드 호출을 수행해본 바가 있다.
• 이번에는 이와 다르게 형제 컴포넌트 간에 통신해야하는 상황이 발생하였다.
• 이는 EventBus라는 객체를 사용하여 꽤 쉽게 구현이 가능하며 그 방법은 다음과 같다.

export const eventBus = new Vue();

• 우선 main.js 파일에 위 코드를 작성해준다.

import { eventBus } from "@/main.js"

• 다음으로, 서로 간에 통신할 형제 컴포넌트 각각에 위 코드를 작성해준다.

eventBus.$emit("setDesign", this.curBrand, this.curLow, this.curHigh);

• 이후, 이벤트를 호출하는 컴포넌트에서는 위와 같은 방법으로 형제 컴포넌트에 접근할 수 있다.
• 이때 $emit 메서드의 첫 번째 파라미터는 이벤트의 이름이며, 그 이후의 파라미터는 해당 이벤트에서 사용할 변수를 의미한다.

mounted() {
  eventBus.$on("setDesign", (curBrand, curLow, curHigh) => {
    this.printBy(curBrand, curLow, curHigh);
  });
},

beforeDestroy() {
  eventBus.$off("setDesign");
},

• 위 이벤트를 전달받기 위해서는 이벤트를 받는 컴포넌트에 위와 같이 코드가 작성되어 있어야 한다.
• $on 메서드를 통해 이벤트를 감지할 수 있으며, 호출되는 이벤트에 따라 원하는 동작을 수행할 수 있다.
• 다만, 이벤트는 off 되기 전까지 항상 이벤트를 받을 수 있는 상태이기 때문에 컴포넌트가 종료(destoryed)된다거나 할때 이벤트도 함께 종료(event.$off("이벤트 이름"))시켜주어야 한다.

---

GitHub - Baeg-won/Baeg-won-Mall