[Vue] Vue로 만드는 직방 웹앱 : 6. 상품목록 만들기

안녕하세요

 

이번 시간에는 진짜 데이터로 상품목록을 만드는 시간을 가져보겠습니다.

 

해당 프로젝트의 전체 소스는

https://github.com/zziaho/vuedongsan

GitHub - zziaho/vuedongsan: Vue로 만드는 직방웹앱

에 올려두고 있으니 필요하시면 참고하시면 좋을거같습니다!

---

1. 실제 데이터로 상품목록 제작

다만 지금은 서버가 없기 때문에 서버에서 가져왔다 치고 해보도록 하겠습니다.

해당 강의 하단부에서 사용할 상품목록 데이터를 가져와 파일로 만들어 저장해주도록 합시다.

[{
  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
}];

저는 list.js 라는 파일로 만들어서 저장했습니다.

 

해당 데이터들을 App.vue의 data에 복붙으로 저장해놓고 사용해도 되지만, 너무 길어서 가독성도 떨어지고 혹여나 복붙을 잘못하게 되는 경우 데이터의 정확도가 떨어질 수도 있겠죠.

그래서 다른 파일에 데이터를 저장 해 놓고 가져다 쓰는 방식을 사용하는데요, 이때 사용하는게

 

2. import / export

입니다.

 

1) 사용법

간략하게 설명하면 export 로 먼저 내보내고 싶은 데이터에 설정을 해주고 필요한 파일에서 import 해 와서 사용한다.

해당 예제의 경우에서는 list.js 를 export로 설정 해 주고 App.vue에서 import 해 와서 사용하면 되겠죠

// 하나만 넘길 때
export default 변수명

// 여러개 넘길 때
export { 변수1, 변수2 }

import 변수명(작명) from '경로'

 

그럼 이제 원룸 리스트를 export 해보겠습니다.

export default [{
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000
    },
    ..... 생략

변수를 선언 하고 데이터를 넣고 export 해도 되지만 이렇게 데이터에 바로 export를 해도 사용 할 수 있습니다.

 

그럼 App.vue에서 import를 해와야겠죠

import oneRoomList from './data/list.js';

이렇게 해옵니다.

 

그리고 data에 새로운 변수를 선언해서 해당 데이터를 넣어주도록 합시다.

  data() {
    return {
      oneRooms: oneRoomList,
    }
  },

 

---

2. 데이터 바인딩

이후 부분부터는 기존 시간에 공부했던 내용과 동일합니다.

데이터를 가져와서 꽂아주기만 하면 되는거죠.

 

좀 더 깔끔하게 보이기 위해 신고버튼이나 클릭시 모달창이 열리는 부분은 제거하고 간단게 만들겠습니다.

  <div v-for="(oneRoom, index) in oneRooms" :key="index">
    <img :src="oneRoom.image" class="room-img">
    <h4>{{ oneRoom.title }}</h4>
    <p>{{ oneRoom.price }}</p>
  </div>

 

import로 가져온 데이터가 잘 나오는것을 볼 수 있습니다.

---

출처

https://youtube.com/@codingapple?si=paP3eaNI_efdAhCU

코딩애플

 

https://www.youtube.com/watch?v=38PWm8TgaV0