VUE 공부 4일차

export 와 import

커다란 데이터 set을 가져다 쓰거나 너무 긴 자바스크립트를 가져다 써야할 때 한 페이지에서 선언하는 것 보다 선언되어있는 파일을 가져다 쓰는 것이 효율적임

언제 사용하는가 ? : export 내보낼 때, import 파일을 읽어올 때

왜 사용하는가? : 코드를 효율적으로 작성 및 사용하기 위해

어떻게 사용하는가? : 내보낼 파일에서 export로 내보내고 읽어올 파일은 import를 통해 읽어들임

 

위 처럼 변수 2개 중 한 가지를 내보내는 방법

내보낸 파일을 import를 통해 읽어들임

 

 

---

---

그렇다면 여러 변수를 내보내는 방법은?

 

이 처럼 두 가지 변수를 묶어서 내보낼 수 있음

개발자 도구에서 Object 형태로 받아들여지는 것을 확인할 수 있음

 

그럼 데이터 뭉치를 실제로 가져다 사용한다면?

// export로 내보냄
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,
  },
];

위처럼 데이터 파일을 내보내고

<template>
  <div class="black-bg" v-if="onOff == true">
    <!-- v-if는 참일 때만 보여줌-->
    <div class="white-bg">
      <h4>상세 페이지임</h4>
      <p>상세 페이지 내용임</p>
      <br />
      <button @click="onOff = false">닫기</button>
    </div>
  </div>

  <div>
    <div class="menu">
      <a v-for="Page in menus" :key="Page">{{ Page }}</a>
    </div>
    <div>
      <img :src="oneRooms[0].image" class="room-img" />
      <h4>{{ oneRooms[0].title }}</h4>
      <p>{{ oneRooms[0].price }}원</p>
      <br />
      <hr />
    </div>
    <div>
      <img :src="oneRooms[1].image" class="room-img" />
      <h4>{{ oneRooms[1].title }}</h4>
      <p>{{ oneRooms[1].price }}원</p>
      <br />
      <hr />
    </div>
    <div>
      <img :src="oneRooms[2].image" class="room-img" />
      <h4>{{ oneRooms[2].title }}</h4>
      <p>{{ oneRooms[2].price }}원</p>
      <br />
      <hr />
    </div>
    <div>
      <img :src="oneRooms[3].image" class="room-img" />
      <h4>{{ oneRooms[3].title }}</h4>
      <p>{{ oneRooms[3].price }}원</p>
      <br />
      <hr />
    </div>
    <div>
      <img :src="oneRooms[4].image" class="room-img" />
      <h4>{{ oneRooms[4].title }}</h4>
      <p>{{ oneRooms[4].price }}원</p>
      <br />
      <hr />
    </div>
  </div>
</template>

<script>
import data from "./components/oneroom.js";

export default {
  name: "App",
  data() {
    return {
      oneRooms: data,
      onOff: false,
      menus: ["Home", "Shop", "About"], // 메뉴 항목
      report: [0, 0, 0],
      product: ["1번 원룸", "2번 원룸", "3번 원룸"],
      price: ["60", "70", "80"],
      styleArray: ["color : red", "color : blue", "color : green"],
    };
  },
  methods: {
    increaseMethod() {
      this.report[1]++;
    },
  }, // 함수 선언 및 이용
  components: {},
};
</script>

<style>
body {
  margin: 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  padding: 20px;
}
.white-bg {
  width: 100%;
  background: white;
  border-radius: 8%;
  padding: 20px;
}
.room-img {
  width: 100%;
  margin-top: 40px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
</style>

이렇게 읽어올 수 있는데 우리는 저번에 반복문을 통해 코드를 획기적으로 줄이는 방법을 확인하였으므로,

 

<template>
  <div class="black-bg" v-if="onOff == true">
    <!-- v-if는 참일 때만 보여줌 -->
    <div class="white-bg">
      <h4>상세 페이지임</h4>
      <p>상세 페이지 내용임</p>
      <br />
      <button @click="onOff = false">닫기</button>
    </div>
  </div>

  <div>
    <div class="menu">
      <a v-for="Page in menus" :key="Page">{{ Page }}</a>
    </div>

    <!-- oneRooms를 반복문으로 처리 -->
    <div v-for="room in oneRooms" :key="room.id">
      <img :src="room.image" class="room-img" />
      <h4>{{ room.title }}</h4>
      <p>{{ room.price }}원</p>
      <p>{{ room.content }}</p>
      <!-- 추가 내용 표시 -->
      <br />
      <hr />
    </div>
  </div>
</template>

<script>
import data from "./components/oneroom.js";

export default {
  name: "App",
  data() {
    return {
      oneRooms: data, // 데이터를 가져옴
      onOff: false,
      menus: ["Home", "Shop", "About"], // 메뉴 항목
    };
  },
};
</script>

<style>
body {
  margin: 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  padding: 20px;
}
.white-bg {
  width: 100%;
  background: white;
  border-radius: 8%;
  padding: 20px;
}
.room-img {
  width: 100%;
  margin-top: 40px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
</style>

거의 30줄 가량 그리고 추후 데이터가 추가되더라도 반복적으로 생산할 수 있는 코드를 작성할 수 있음\

해당 코드를 뷰를 실행 시킨 후 화면으로 본다면

제대로 나타나는 것을 확인할 수 있음.