데이터를 받아와서 상품 목록 만들기

데이터를 받아와서 상품 목록 만들기

1. 데이터를 받아와서 상품 목록 만들기

• 이번엔 데이터를 직접 받아와서 상품 목록을 만들어 봅시다!
• #1. assets 폴더 안에 oneRoom.js 파일을 생성한 후, post.js 파일 안에 다음과 같이 입력하여 데이터를 추가해 줍니다.

export default [
  {
    id: 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000,
  },
  {
    id: 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000,
  },
  {
    id: 2,
    title: "Geumsan Apartment Flat",
    image: "https://codingapple1.github.io/vue/room2.jpg",
    content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
    price: 780000,
  },
  {
    id: 3,
    title: "Double styled beds Studio Apt",
    image: "https://codingapple1.github.io/vue/room3.jpg",
    content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
    price: 550000,
  },
  {
    id: 4,
    title: "MyeongIl Apartment flat",
    image: "https://codingapple1.github.io/vue/room4.jpg",
    content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
    price: 680000,
  },
  {
    id: 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000,
  },
];

 

• #2. App.vue에 다음과 같이 입력하여, import 해서 데이터를 넣어 줍니다.

// <template>...</template>

<script>
import oneRoom from './assets/oneRoom';

export default {
  // ...
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)(state라고도 불림)
      oneRoomData: oneRoom,
      // ...
    };
  },
  // ...
};
</script>

// <style>...</style>

 

• #3. 그 다음 template 태그 안에 다음과 같이 입력하여, 데이터를 사용해 줍니다.

<template>
  ...
  <div>
    <img :src="oneRoomData[0].image" class="room-img" />
    <h4 @click="modalState = true">{{ oneRoomData[0].title }}</h4>
    <p>{{ oneRoomData[0].price}}</p>
  </div>
  <div>
    <img :src="oneRoomData[1].image" class="room-img" />
    <h4 @click="modalState = true">{{ oneRoomData[1].title }}</h4>
    <p>{{ oneRoomData[1].price}}</p>
  </div>
  <div>
    <img :src="oneRoomData[2].image" class="room-img" />
    <h4 @click="modalState = true">{{ oneRoomData[2].title }}</h4>
    <p>{{ oneRoomData[2].price}}</p>
  </div>
</template>

// <script>...</script>
// <style>...</style>

 

    → 브라우저를 확인해 보면, 데이터가 정상적으로 들어간 것을 확인할 수 있습니다.

 

• #4. 그러면 다음과 같이 데이터를 넣어서 사용하면 됩니다.

<template>
  ...
  <div class="menu">
    <a v-for="(menu, i) in menuData" :key="i">{{ menu }}</a>
  </div>
  <div>
    <img :src="oneRoomData[0].image" class="room-img" />
    <h4 @click="modalState = true">{{ oneRoomData[0].title }}</h4>
    <p>{{ oneRoomData[0].price}}</p>
  </div>
  <div>
    <img :src="oneRoomData[1].image" class="room-img" />
    <h4 @click="modalState = true">{{ oneRoomData[1].title }}</h4>
    <p>{{ oneRoomData[1].price}}</p>
  </div>
  <div>
    <img :src="oneRoomData[2].image" class="room-img" />
    <h4 @click="modalState = true">{{ oneRoomData[2].title }}</h4>
    <p>{{ oneRoomData[2].price}}</p>
  </div>
  <div>
    <img :src="oneRoomData[3].image" class="room-img" />
    <h4 @click="modalState = true">{{ oneRoomData[3].title }}</h4>
    <p>{{ oneRoomData[3].price}}</p>
  </div>
  <div>
    <img :src="oneRoomData[4].image" class="room-img" />
    <h4 @click="modalState = true">{{ oneRoomData[4].title }}</h4>
    <p>{{ oneRoomData[4].price}}</p>
  </div>
  <div>
    <img :src="oneRoomData[5].image" class="room-img" />
    <h4 @click="modalState = true">{{ oneRoomData[5].title }}</h4>
    <p>{{ oneRoomData[5].price}}</p>
  </div>
</template>

// <script>...</script>
// <style>...</style>

 

2. 정리하며

• 지금까지 데이터를 넣는 방법에 대해 알아보았습니다.

※ 코딩애플님의 강의를 참고하였습니다.

 

※ Git 주소

데이터 넣기 · NewBean0312/vue-study-2024-03@671932c