Vue.js 로 홈페이지 데이터 동적 표시 방법

소개

이 프로젝트에서는 Vue.js 를 사용하여 홈페이지 데이터를 동적으로 표시하는 방법을 배우게 됩니다. 이 프로젝트는 JSON 파일에서 데이터를 가져와 Vue.js 컴포넌트에서 렌더링하는 과정을 이해하는 데 도움이 되도록 설계되었습니다.

👀 미리보기

Vuejs homepage preview

🎯 과제

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

Axios 를 통해 홈페이지 게시물 목록 데이터를 요청하고 이를 List.vue 컴포넌트에 바인딩하는 방법.
제공된 디자인에 맞춰 홈페이지의 레이아웃 스타일과 효과를 구현하는 방법.

🏆 성과

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

Axios 를 사용하여 JSON 파일에서 데이터를 가져올 수 있습니다.
가져온 데이터를 Vue.js 컴포넌트에 바인딩하고 템플릿에서 렌더링할 수 있습니다.
특정 디자인에 맞게 컴포넌트의 스타일을 지정할 수 있습니다.
다양한 Vue.js 컴포넌트를 통합하여 완전한 홈페이지를 만들 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

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

├── public
│   ├── static
│     ├── data
│        ├── list.json
│     ├── images
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── assets
│   ├── components
│     ├── Header.vue
│     ├── List.vue
│     ├── Recommend.vue
│   ├── router
│   ├── views
│     ├── Home.vue
│   ├── App.vue
│   ├── main.js
└── package-lock.json
└── package.json
└── README.md

그 중:

components/List.vue는 이 챌린지를 위해 추가될 게시물 목록 컴포넌트입니다.
public/static/data/list.json은 게시물 목록을 가져오기 위한 데이터 파일입니다.
public/static/images는 게시물 목록에 사용되는 이미지 파일입니다.

다음으로, 터미널에서 npm install 명령을 사용하여 종속성을 다운로드하고, 종속성 다운로드가 완료될 때까지 기다린 다음 npm run serve 명령을 사용하여 프로젝트를 시작합니다.

프로젝트가 성공적으로 시작되면 "Web 8080"을 클릭하여 브라우저에서 미리보기를 확인합니다. 페이지의 실행 효과는 다음 이미지와 같습니다.

Image Description

목록 표시 기능 완료

이 단계에서는 axios 를 통해 홈페이지 게시물 목록 데이터를 요청하고 이를 List.vue 컴포넌트에 바인딩하는 방법을 배우게 됩니다.

src/components 폴더에 있는 List.vue 파일을 엽니다.
<script> 아래에 axios 라이브러리를 가져옵니다:

// TODO
import axios from "axios";

data() 함수에서 목록 데이터를 저장할 dataList 속성을 정의합니다:

data() {
  return {
    dataList: []
  };
}

created() 라이프사이클 훅에서 getList() 메서드를 호출하여 목록 데이터를 가져옵니다:

created() {
  this.getList();
}

public/static/data/list.json 파일에서 데이터를 가져오도록 getList() 메서드를 구현합니다:

methods: {
  getList() {
    axios.get("./static/data/list.json").then((res) => {
      this.dataList = res.data.data.listInfo;
    });
  }
}

<script> 내의 전체 코드는 다음과 같습니다:

<script>
// TODO
import axios from "axios";
export default {
  data() {
    return {
      dataList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios.get("./static/data/list.json").then((res) => {
        this.dataList = res.data.data.listInfo;
      });
    }
  }
};
</script>

템플릿에서 v-for 디렉티브를 사용하여 목록 항목을 렌더링합니다:

<template>
  <div class="list">
    <!-- TODO -->
    <div class="list-item" v-for="item in dataList" :key="item.id">
      <img class="list-pic" :src="item.imgUrl" />
      <div class="list-info">
        <p class="title">{{ item.title }}</p>
        <p class="desc">{{ item.desc }}</p>
      </div>
    </div>
  </div>
</template>

이 단계는 홈페이지 게시물 목록 데이터가 public/static/data/list.json 파일에서 가져와 List.vue 컴포넌트에 바인딩되도록 합니다.

이 단계를 따르면 public/static/data/list.json 파일에서 데이터를 가져와 원하는 레이아웃으로 목록 항목을 렌더링하는 것을 포함하여 홈페이지 데이터의 동적화를 완료했습니다.

완료된 효과는 다음과 같습니다:

Completed Effect

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.