[Vue3 Opt] 부동산 홈페이지 생성 5 - 상품 목록(import/export)

• import/export
• object에서 원하는 데이터 불러오기

 

 

(코딩애플님 vue강의 6강)

 

실제 데이터를 가져다 쓰기 전이니 데이터를 때려박는다.

근데 데이터 저장소에 다~ 쓰기엔 코드가 너무 길기 때문에 import, export 를 이용해보자.

 

 

src 안에 .js 파일 생성한 뒤 아래 내용 복사 붙여넣기

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

 

이제 이 파일을 가져다 써야 한다.

 

A파일에서 B파일로 데이터를 가져다쓸 경우

A 파일
var apple = 10;

export default apple


B 파일
import apple from './assets/A.js'

 

만약

var apple = 10;

var apple2 = 100;

 

두 가지 다 import 하고싶은 경우

 

export {apple, apple2} 하면 되고 변수 뿐만아니라 함수 등도 가능하다.

import {apple, apple2} 도 마찬가지

 

 

 

다시, data.js 를 export 하는 방법 두 가지

 

1.

 

데이터를 변수에 저장한 뒤 "export 변수" 

 

2.

 

바로 "export defalut 데이터"

 

 

import 작명 from 경로

 

import data from './assets/data.js';

 

그리고 데이터 저장소에 불러온다.

 

{{products}}로 불러왔던 내용 대신 이 data를 넣어보자

 

<h3>{{ onerooms[0] }}</h3>

 

첫 번째 내용이 출력된다.

{}안에 들어있기 때문에 얘네는 object라고 부른다고 한다.

 

여기서 object(객체)란 속성(이름:값)을 가지고 있는 것을 말한다.

 

이 object 안에 있는 원하는 data를 뽑고 싶으면  . 쩜 찍고 속성 이름을 써주면 된다.   = JS 문법 (vue문법 아님)

 

<h3>{{ onerooms[0].title }}</h3>

 

이런 식으로 .image 또는 .price 등을 이용해 내용을 출력할 수 있다.

 

다만!! 이미지를 넣을 때에는~ 속성이기 때문에 

 

:src="onerooms[0].image"

 

이렇게 속성 앞에 : 콜론을 붙여줘야 한다.

 

 

끝~ ^^

 

오늘의 과제. 모든 상품을 반복문으로. 솔직히 과제 듣고 띠용~했다.. 모르겠어서 ..? 그렇지만 그냥 하다보니 갑자기 됨

 

물론 다음 강의부터 유료라 정답인지 문제가 있는지는 모르지만 어쨌든 출력은 잘 되니까~

    <div v-for="(a,i) in onerooms" :key="a">
        <img :src="onerooms[i].image" class="room-img">
        <h3>{{ onerooms[i].title }}</h3>
        <p>{{ onerooms[i].price }}</p>
    </div>

 

끝!