Refactoring191105.vue

MyBookMarks.vue

<template>
<div class="MyBookMarks">
    <MainWrapper>
      <div class="container">
         <div class="row margin-top-40">
             <SideBarHeading
                 :title="title"
             />
         </div>
         <div class="row margin-top-35">
            <div class="col-xs-2">
               <SideCategoryList
                    :sideCategoryList="bookMarkSideCategories"
                    :portfolioTotalCount="portfolioBookmarksCount"
               />
            </div>
            <div class="col-xs-10">
                <GigCardLoaderList
                    v-if="isLoading"
                    :row=row
                    :col=col
                />
                <BookMarkList
                    v-else
                    :myBookMarkList="getBookMarkList"
                />
                <div class="paginate-container" v-if="hasPaginate">
                    <Paginate
                        :page-count="bookMarkData.last_page"
                        :click-handler="goToPage"
                        prev-text="<<"
                        next-text=">>"
                        container-class="paginate"
                    />
                </div>
            </div>
         </div>
      </div>
   </MainWrapper>
</div>
</template>

<script>
  import { mapActions, mapState, mapGetters } from 'vuex';
  import MainWrapper from '../../shared/MainWrapper.vue';
  import SideBarHeading from '../../shared/SideBarHeading.vue';
  import SideCategoryList from '../../shared/SideCategoryList.vue';
  import GigCardLoaderList from '../../shared/GigCardLoaderList.vue';
  import BookMarkList from './BookMarkList.vue';
  import Paginate from 'vuejs-paginate';

  export default {
    name: 'MyBookMarks',
    components: {
      MainWrapper,
      SideCategoryList,
      BookMarkList,
      SideBarHeading,
      GigCardLoaderList,
      Paginate
    },
    props: [],
    data() {
      return {
         sideCategoryList: [],
         isLoading: false,
         title: '찜한 서비스',
         row: 4,
         col: 4,
      };
    },
    computed: {
       ...mapState('common', [
         'portfolioBookmarksCount',
         'bookMarkData',
         'bookMarkSideCategories'
       ]),
      ...mapGetters('common', [
        'getBookMarkList'
      ]),
       getQuery() {
         return this.$route.query;
       },
       hasPaginate() {
         return this.bookMarkData && this.bookMarkData.last_page > 1;
       },
    },
    watch: {
      $route: 'updateBookMarkList',
      bookMarkData: 'closeLoading',
    },
    methods: {
      ...mapActions('common/', [
        'setNavBarCategoryListAction',
        'updateBookMarkListAction',
        'getBookMarkSideListAction'
      ]),
      updateBookMarkList() {
        this.isLoading = true;
        this.updateBookMarkListAction(this.getQuery);
      },
      closeLoading() {
        this.isLoading = false;
      },
      goToPage(pageNum) {
        this.$router.push({
            path: '/my_bookmarks',
            query: { ...this.getQuery, page: pageNum }
        });
      }
    },
    created() {
      // fix navCategory
       this.setNavBarCategoryListAction('category');
       // getCategoryCount
       this.getBookMarkSideListAction();
       this.updateBookMarkList();
    }
  };
</script>
<style lang="scss">
    .MyBookMarks {
        .paginate-container {
            display: flex;
            justify-content: center;
        }
        .paginate {
            display: flex;
            a {
                padding: 11px 14px;
                width: 42px;
                height: 42px;
                font-size: 11px;
                color: #373a3c;
                background-color: #fff;
                cursor: default;
                border: 1px solid #ccc;
                display: flex;
                justify-content: center;
                align-items: center;
                text-decoration: none;
            }
            .disabled {
                a {
                    pointer-events: none;
                }
            }
        }

    }
</style>

MyBookMarksPortfolio.vue

<template>
<div class="MyBookMarksPortfolio">
   <MainWrapper>
      <div class="container">
         <div class="row margin-top-40">
             <SideBarHeading
                 :title="title"
             />
         </div>
         <div class="row margin-top-35">
            <div class="col-xs-2">
               <SideCategoryList
                    :sideCategoryList="bookMarkSideCategories"
                    :portfolioTotalCount="portfolioBookmarksCount"
               />
            </div>
            <div class="col-xs-10">
                <GigCardLoaderList
                    v-if="isLoading"
                    :row=row
                    :col=col
                />
               <PortfolioList
                   v-else
                   :portfolioList="getPortfolioList"
               />
                <div class="paginate-container" v-if="hasPaginate">
                    <Paginate
                        :page-count="Number(portfolioData.last_page)"
                        :click-handler="goToPage"
                        prev-text="<<"
                        next-text=">>"
                        container-class="paginate"
                    />
                </div>
            </div>
         </div>
      </div>
   </MainWrapper>
</div>
</template>

<script>
  import { mapActions, mapState, mapGetters } from 'vuex';
  import MainWrapper from '../../shared/MainWrapper.vue';
  import SideBarHeading from '../../shared/SideBarHeading.vue';
  import SideCategoryList from '../../shared/SideCategoryList.vue';
  import GigCardLoaderList from '../../shared/GigCardLoaderList.vue';
  import PortfolioList from './PortfolioList.vue';
  import Paginate from 'vuejs-paginate';

  export default {
    name: 'MyBookMarksPortfolio',
    components: {
      MainWrapper,
      SideCategoryList,
      PortfolioList,
      SideBarHeading,
      GigCardLoaderList,
      Paginate
    },
    props: [],
    data() {
      return {
         sideCategoryList: [],
         isLoading: false,
         title: '포트폴리오 찜한 서비스',
         row: 4,
         col: 4,
      };
    },
    computed: {
       ...mapState('common', [
         'portfolioBookmarksCount',
         'portfolioData',
         'bookMarkSideCategories'
       ]),
      ...mapGetters('common', [
        'getPortfolioList'
      ]),
       getQuery() {
         return this.$route.query;
       },
       hasPaginate() {
        return this.portfolioData && this.portfolioData.last_page > 1;
      },
    },
    watch: {
      $route: 'updatePortfolioList',
      portfolioData: 'closeLoading',
    },
    methods: {
      ...mapActions('common/', [
        'setNavBarCategoryListAction',
        'updatePortfolioListAction',
        'getBookMarkSideListAction',
        'setCurrentServiceTypeAction'
      ]),
      updatePortfolioList() {
        this.isLoading = true;
        this.updatePortfolioListAction(this.getQuery);
      },
      closeLoading() {
        this.isLoading = false;
      },
      goToPage(pageNum) {
        this.$router.push({
          path: '/my_bookmarks/portfolio',
          query: { ...this.getQuery, page: pageNum }
        });
      }
    },
    created() {
         // fix navCategory
        this.setCurrentServiceTypeAction('MARKET');
        this.setNavBarCategoryListAction('category');
        // getCategoryCount
        this.getBookMarkSideListAction();
        this.updatePortfolioList();
    }
  };
</script>
<style lang="scss">
    .MyBookMarksPortfolio {
        .paginate-container {
            display: flex;
            justify-content: center;
        }
        .paginate {
            display: flex;
            a {
                padding: 11px 14px;
                width: 42px;
                height: 42px;
                font-size: 11px;
                color: #373a3c;
                background-color: #fff;
                cursor: default;
                border: 1px solid #ccc;
                display: flex;
                justify-content: center;
                align-items: center;
                text-decoration: none;
            }
            .disabled {
                a {
                    pointer-events: none;
                }
            }
        }

    }
</style>

일단 기능 구현은 한 상태
잘한 점

1. SPA 구조로 왼쪽을 굳이 계속 리렌더링 할 필요 없이 리스트만 바꾸는 구조로 잘 바꾼 것 같다.
   -> 여기서 $route -> 혹은 vuex도 그냥 watch에 넣으면 잘 watch가 되는 구나 component에서는 !!!

궁금한 점들

Q watch가 없는 react에서는 어떻게 할까?

리팩토링 요소들

중첩되는 부분들

1. 컴포넌트 중첩인 부분이 많다. -> 더 상위에서 props으로 빼줄 수 있는 컴포넌트로 추상화해서 같이 쓰기
2. scss pagninate 부분
3. MyBookMarksPortfolio.vue에서만
   왜 this.setCurrentServiceTypeAction('MARKET'); 서비스 market인지 더 해줘야 되는지 ???
4. data 구조
   response값들을 vuex에 담고 portfolioData 혹은 bookMarkData에 담아두고
   -> List는 List를 바라보게 했는데 -> getPortfolioList getter로 굳이 뺄 필요가 있었나 하는 생각도 있음
   -> portfolioData.portfolios | bookMarkData.gigs 로 대응하면 됬는데
   -> paginate와 필요한 정보들 매칭시키고
5. 안 쓰는 property들 지우기
6. paginate 혹은 북마크 카테고리 별로 리스트들 page가 바뀔 때마다 요청은 하고 있지만 만약 이전에 클릭 했어서 불러왔던 데이터라면
   또 불러올 필요가 있나 ? 자료 구조랑 로직 개선 필요 !!!

기타
삽질들 1.
Image default Src 랑 error Handlig 매번 같은 부분 처리하는 부분 때문에 따로 컴포넌트로 뺐는데
Image.vue라는 이름으로 인식을 못 함 ! tag네이밍이랑 뭔가 겹치게 되어 있는 것 같다. 이상하네 React는 되었는데
결국 이 부분 다시 적어줌

 <img class="width-100"
                             :src="portfolio.thumbnail.thumbnail"
                             @error="imgOnErrorDefaultSrc($event.target, '/img/404/portfolio_none_images.png')"
                        />

삽질들 2 .
php router 에서 다시 vue router에 인식하는 구조이므로
bookmarks/

-> router 설계에 대한 부분

param으로 하고 쿼리로 하는 거는 뭐 통일 시키면 된다고 하는데
my_bookmarks/ 각 아이템 마다 query로 달라지고
my_bookmarks/portfolio만
이상하다고 느꼈던 부분
my_bookmarks/categories/all
my_bookmarks/categories/1
my_bookmarks/categories/2
my_bookmarks/portfolio
my_bookmarks 면 카테고리만 나오는 부분? -> 근데 어느정도 보통 일반 아이템들은 카테고리 안에 있는 거니까 명시 안 해줬다고 해도 무방?

php 에서는 my_bookmarks 이렇게 받고