반응형 상품 목록 레이아웃 | Vue.js 튜토리얼

소개

이 프로젝트에서는 반응형 제품 목록 레이아웃을 만들고 전환 기능을 구현하는 방법을 배우게 됩니다. 이 기능을 통해 사용자는 제품 항목을 그리드 뷰와 리스트 뷰 사이에서 쉽게 전환할 수 있습니다.

👀 미리보기

responsive layout switching demo

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

프로젝트 구조를 설정하고 각 파일 및 폴더의 목적을 이해하는 방법
JSON 파일에서 데이터를 가져와 제품 목록을 채우는 방법
Vue.js 를 사용하여 레이아웃 전환 기능을 구현하는 방법
선택한 뷰에 따라 그리드 및 리스트 레이아웃을 조건부로 렌더링하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

Vue.js 프로젝트를 효과적으로 구성할 수 있습니다.
Axios 를 사용하여 JSON 파일에서 데이터를 가져올 수 있습니다.
v-if 및 v-else와 같은 Vue.js 디렉티브를 사용하여 콘텐츠를 조건부로 렌더링할 수 있습니다.
사용자 상호 작용을 처리하고 UI 를 적절하게 업데이트할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 레이아웃 전환 프로젝트의 프로젝트 구조를 설정하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

이 프로젝트의 프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
├── images
├── js
│    ├── axios.min.js
│    └── vue.js
├── goodsList.json
└── index.html

각 폴더 및 파일의 목적을 숙지합니다:
- css: 이 폴더는 스타일 파일을 위한 것입니다.
- images: 이 폴더는 이미지를 위한 것입니다.
- js/vue.js: 이것은 Vue 2.x 파일입니다.
- js/axios.min.js: 이것은 Axios 파일입니다.
- goodsList.json: 이것은 요청에 필요한 데이터입니다.
- index.html: 이것은 페이지 레이아웃과 로직을 포함합니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

데이터 가져오기 구현

이 단계에서는 프로젝트에 필요한 데이터를 가져오는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

index.html 파일에서 파일 하단의 <script> 태그를 찾습니다.
<script> 태그 내에서 new Vue()를 사용하여 새로운 Vue 인스턴스를 생성합니다.
Vue 인스턴스의 data 옵션에서 goodsList 속성을 추가하고 빈 배열로 초기화합니다.
Vue 인스턴스의 mounted 훅에서 Axios 를 사용하여 goodsList.json 파일에서 데이터를 가져옵니다.
가져온 데이터로 goodsList 데이터 속성을 업데이트합니다.

코드는 다음과 유사해야 합니다:

var vm = new Vue({
  el: "#app",
  data: {
    goodsList: []
  },
  mounted() {
    axios.get("./goodsList.json").then((res) => (this.goodsList = res.data));
  }
});

레이아웃 전환 구현

이 단계에서는 제품 목록 레이아웃 전환 기능을 구현하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

index.html 파일에서 <div class="bar"> 요소를 찾습니다.
이 요소 내부에 grid-icon 및 list-icon 클래스 이름을 가진 두 개의 <a> 요소를 각각 추가합니다.

<div class="bar">
  <a class="grid-icon"></a>
  <a class="list-icon"></a>
</div>

현재 레이아웃을 추적하기 위해 Vue 인스턴스에 changeBar 데이터 속성을 생성하고 기본값을 0 으로 설정합니다. 즉, 기본적으로 그리드 레이아웃입니다.

var vm = new Vue({
  el: "#app",
  data: {
    changeBar: 0
    // ...
  }
});

@click 이벤트를 각 <a> 요소에 바인딩합니다. grid-icon을 클릭하면 changeBar를 0으로 설정하고 grid-icon에 active 클래스를 추가합니다. list-icon에서 active 클래스를 제거합니다.

<div class="bar">
  <a
    class="grid-icon"
    :class="changeBar == 0 ? 'active' : ''"
    @click="changeBar = 0"
  ></a>
  <!-- ... -->
</div>

@click 이벤트를 각 <a> 요소에 바인딩합니다. list-icon을 클릭하면 changeBar를 1로 설정하고 list-icon에 active 클래스를 추가합니다. grid-icon에서 active 클래스를 제거합니다.

<div class="bar">
  <!-- ... -->
  <a
    class="list-icon"
    :class="changeBar == 1 ? 'active' : ''"
    @click="changeBar = 1"
  ></a>
</div>

v-if 및 v-else 디렉티브를 사용하여 changeBar의 값에 따라 그리드 및 목록 레이아웃을 조건부로 렌더링합니다.

<ul class="grid" v-if="changeBar == 0">
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.large" />
    </a>
  </li>
</ul>
<ul class="list" v-else>
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.small" />
    </a>
    <p>{{item.title}}</p>
  </li>
</ul>

프로젝트 최종 마무리

이 마지막 단계에서는 완성된 프로젝트를 검토하고 요구 사항을 충족하는지 확인합니다.

데이터가 goodsList.json 파일에서 올바르게 가져와지는지 확인합니다.
레이아웃 전환 기능이 예상대로 작동하는지 확인합니다:
- 그리드 아이콘을 클릭하면 레이아웃이 그리드 보기로 변경되고 active 클래스가 그리드 아이콘에 추가됩니다.
- 목록 아이콘을 클릭하면 레이아웃이 목록 보기로 변경되고 active 클래스가 목록 아이콘에 추가됩니다.
아이콘을 클릭하여 프로젝트를 테스트하고 레이아웃이 예상대로 변경되는지 확인합니다.

축하합니다! 레이아웃 전환 프로젝트를 완료했습니다. 다음을 배우셨습니다: