[Baeg-won Clothing Gallery] 1. 메인 페이지 구현

📝 Outline

• 프로젝트를 진행한지 이틀정도 지났을까
• 드디어 메인 페이지 구현이 어느정도 마무리 되었다.
• Vue도 처음 사용해보고, 조금은 낮선 명령어들도 써보면서 지난 이틀동안 구글의 힘을 참 많이 이용했다.

• 어찌됐든 그렇게 메인 페이지를 완성했고, 데이터베이스에 저장되어 있는 데이터를 불러와 화면에 렌더링하는 작업까지 진행했다.
• 내가 구현한 쇼핑몰의 메인 페이지는 다음과 같다.

• 전체적인 디자인은 여기를 참조하였다.
• 간단하게 Header와 Footer 그리고 Contents 영역으로 나뉜다.
• Header와 Footer는 앞으로 대부분의 페이지에 포함될 것이므로 따로 컴포넌트화 하여 작성해주었다.
• 아직 특별한 기능은 포함되어 있지 않으며, 추후에 다른 페이지들까지 완성되고 나면 추가할 예정이다.

---

📝 Review

💬 axios로 데이터 가져오기

• 데이터 렌더링을 위한 코드는 아래와 같이 작성하였다.

export default {
    data() {
        return {
            new_arrivals: [],
            most_popular: [],
        }
    },

    created() {
        this.getData(this.new_arrivals, 'new');
        this.getData(this.most_popular, 'most');
    },

    methods: {
        // 신규 및 인기 상품 데이터 불러오기
        getData(need_data, type) {
            this.$axios.get(`/test/${type}`).then(res => {
                res.data.forEach(element => {
                    need_data.push({
                        name: element.name,
                        price: element.price.toLocaleString('ko-KR'),
                        url: element.url
                    });
                });
            })
        },
    },
};

• axios를 이용한 것인데, 기존에 사용했던 ajax와 문법이 크게 다르지 않아서 예제 코드만 보고도 쉽게 이해할 수 있었다.
• 간단히 설명하자면, 페이지 로드 시 자동으로 서버에 get 요청을 보내고, 그렇게 해서 받은 데이터를 각각 저장한 뒤, 렌더링하여 출력하는 것이다.

 

💬 코드 컴포넌트화

• 작성했던 코드 중에 중복되는 코드가 보여서 해당 부분을 Header, Footer와 마찬가지로 컴포넌트화 해보았다.

<v-sheet
    class="mx-auto"
>
    <v-slide-group
        class="pa-4"
        selected-class="bg-success"
    >
        <v-slide-group-item
            v-for="n in 16"
            :key="n"
        >
            <v-card
                color="grey-lighten-1"
                :class="['ma-4']"
                height="350"
                width="298"
                elevation="0"
            >
                <v-img :src="require(`@/assets/${clothing[n - 1].url}.jpg`)" />
                <div class="v-slide-product-content">
                    <div class="v-slide-product-name">{{clothing[n - 1].name}}</div>
                    <div class="v-slide-product-price">{{clothing[n - 1].price}}₩</div>
                </div>
            </v-card>
        </v-slide-group-item>
    </v-slide-group>
</v-sheet>

• 바로 위 코드인데, 이는 슬라이드를 위해 작성한 코드이다. 위에서 보면 알겠지만 메인 페이지에 슬라이드가 꽤 들어가 있다.
• 이를 컴포넌트화 하여 코드 수를 줄이고 가독성을 높여보자.

• 우선 위 코드를 포함하는 Slider.vue 파일을 생성해주었다.

<template>
    <v-sheet
        class="mx-auto"
    >
        <v-slide-group
            class="pa-4"
            selected-class="bg-success"
        >
            <v-slide-group-item
                v-for="n in 16"
                :key="n"
            >
                <v-card
                    color="grey-lighten-1"
                    :class="['ma-4']"
                    height="350"
                    width="298"
                    elevation="0"
                >
                    <v-img :src="require(`@/assets/${clothing[n - 1].url}.jpg`)" />
                    <div class="v-slide-product-content">
                        <div class="v-slide-product-name">{{clothing[n - 1].name}}</div>
                        <div class="v-slide-product-price">{{clothing[n - 1].price}}₩</div>
                    </div>
                </v-card>
            </v-slide-group-item>
        </v-slide-group>
    </v-sheet>
</template>

<script>
    export default {
        name: "slider",

        props: ["clothing"],
    };
</script>

• export default는 말 그대로 해당 컴포넌트를 외부에서 참조할 수 있도록 그 설정을 정의하는 구간이다.
• props는 부모 컴포넌트에서 데이터를 받아와, 해당 컴포넌트에서 사용하기 위해 정의하는 변수 이름이다.
• 부모 컴포넌트 구조를 요약하면 다음과 같다.

<template>
    <Slider :clothing="new_arrivals" />
</template>

<script>
import Slider from '../components/layout/Slider.vue'

    export default {
        components: {
            Slider,
        },

        data() {
            return {
                new_arrivals: [],
                most_popular: [],
            }
        }
    };
</script>

• 즉, 외부 컴포넌트를 import하여 컴포넌트로 등록한 뒤, 사용할 수 있는 것이다.
• 이때, 자식 컴포넌트에 데이터를 전달하기 위해서는 위와 같이 태그 속성 부분에 :[변수명]="[보낼 데이터]"의 형식으로 데이터를 지정해주어야 한다.
• 이렇게 하여 엄청나게 방대했던 코드가 단 한줄로 줄어들었다.

<Slider :clothing="new_arrivals" />

• 이것이 말로만 듣던 리팩토링인가?

• Vue.js를 처음 사용해보다 보니 이외에도 여러 이슈들이 있었고 다양한 방법으로 해결해왔지만 그걸 일일이 다 기록하는 것도 힘들정도여서 일단 기억나는 것만 정리해보았다.
• 시간이 된다면 Vue.js에 대해 제대로 공부하면서, 이를 정리한 글을 작성해보고 싶다.

---

GitHub - Baeg-won/Baeg-won-Mall