기록장

https://youtu.be/38PWm8TgaV0?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 

Vue 6강: 상품목록 만들기 진짜 데이터로 ( import / export )

실제 상품데이터를 가져와서 HTML에 꽂아서 보여주자

데이터가 너무 길면 따로 뺄 수 있다. (다른 파일에 넣은 후 import하는 식으로)

 import / export 문법 쓰는 법

> 내보낼 파일

var apple = 10;

export default apple //어떤 변수를 내보내겠습니다 라는 것임

export default 변수명

export {변수1, 변수2, ...}

> import 할 곳

import 변수 from 경로

import {변수1, 변수2, ...}

아무데나 oneroom.js라는 파일 생성하고, 데이터를 복사-붙여넣기

var a = [ { }, { }, { }, ... ,{ } ]로 작성해도 되지만, 귀찮으면 export default = [ { }, { }, { }, ... , { } ]로 해도 됨.

script 부분에서 import data from '경로'; 로 가져오기

data 부분에 원룸들 : data, 로 데이터를 넣어줬음.

* 현재 data: object형으로 저장된 배열임.

template 부분에서 이런 식으로 데이터를 가져오면 된다.

{{ 원룸들[0].title }}

* HTML 태그 안의 속성 데이터바인딩은 :어쩌구

* HTML 태그 안의 내용 데이터바인딩은 [{어쩌구}]

<img :src="원룸들[0].image">

오늘의 숙제

> 6개 상품 전부 진열하기(v-for 사용)

  <div v-for="(item,index) in 원룸들" :key="index">
    <img :src="원룸들[index].image" class="room-img">
    <h4>{{ 원룸들[index].title }}</h4>
    <p>{{ 원룸들[index].price }}원</p>
  </div>

https://youtu.be/UyESqYSb0gY?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 

<img> 넣는 법

> 절대경로는 그냥 넣기

> 상대경로는 이미지를 준비해야 함. | src/assets 폴더 안에 이미지 넣기 - src에 있는 거 가져올 때 경로는 ./부터

  <img src="./assets/room0.jpg">

* 절대경로: 처음부터 시작해서 목적지까지의 절대적인 경로/변하지 않는 주소

* 상대경로: 특정 경로를 기준으로 다른 경로를 표시하는 방식.

> 이미지가 너무 크게 나와요! - class값을 줘서 style 변경

template

<img src="./assets/room0.jpg" class="room-img">

style

.room-img{
  width:100%;
  margin-top:40px;
}

modal 창 만들기

* vue-router 설치하면 다른 페이지도 만드는 것도 가능함 *

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: 8px;
  padding:20px;
}
.room-img{
  width:100%;
  margin-top:40px;
}

그럼 이렇게 나오는데, 항상 모달창이 떠있는 건 아니니까 기능 구현을 해봅시다!

동적인 UI 만드는 법

0. HTML CSS로 디자인해두기(기본)

1. UI의 현재 상태를 데이터로 저장해둠

2. 데이터에 따라 UI가 어떻게 보일지 작성

ex)

1. data부분에 처음 보여줄 모달창의 값을 정해줌.

모달창열렸니 : false

2. 모달창열렸니 data가 true라면 이걸 보여줄거임.

  <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg"> 
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
     </div>
  </div>

* v-if="조건식"

이런 것도 할 수 있겠죠!

> 역삼동원룸 글씨를 눌렀을 때 모달창이 열리게!

<h4 @click="모달창열렸니 = true">{{ products[0] }}</h4>

* data 부분을 리액트에서는 state라고 부른다더라 ㅇ_ㅇ 데이터를 담는 공간이기도 한데 UI의 상태를 저장하는 공간이기도 하기 때문에 상태(state)라고 함.

오늘의 숙제

> 모달창 닫기 버튼과 기능 만들어오기

  <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg"> 
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p> 
      <button @click="모달창열렸니 = false">닫기</button>
     </div>
  </div>

https://youtu.be/Agm-F366ZwY?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 

이벤트 핸들러

: HTML 클릭 시 코드 실행하는 법

허위매물신고 버튼을 누르면 신고수가 1 증가되게 해보자.

    <button>허위매물신고</button> <span>신고수 : 0</span>

자스로 할 때: <button onClick=""></button>

Vue로 할 때: <button v-on:click=""></button> 또는 @click=""

자스: 버튼 누르면 숫자 찾아서 +1 하고 +1된 걸 HTML에 반영

뷰: 버튼 누르면 관련된 데이터만 +1 (Vue는 데이터 변하면 HTML에 바로 반영됨)

    <button @click="신고수++">허위매물신고</button> <span>신고수 : {{신고수}}</span>

데이터 부분

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      신고수 : 0,
      메뉴들: ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};

Vue 특징

> 데이터가 변하면 관련된 HTML은 자동으로 바뀐다.

신고수+=1

와 신고수++1 은 같다.

<button @mouseover="신고수 +=1">허위매물신고</button>

마우스 오버했을 때 신고수++하는 코드

(참고) @이벤트이름 으로 여러가지 이벤트 사용가능

Q. 입력할 코드가 좀 길면..

함수를 사용한다!

함수

함수 만드는 공간은 정해져 있다.

데이터 부분 뒤 methods : { 함수( ){ } } 안에 함수를 만들면 된다.

* Vue에서 함수 만들 때 주의사항

: 함수 안에서 데이터 쓸 땐 this.데이터명 

<button @click="increase">허위매물신고</button> <span>신고수 : {{신고수}}</span>

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      신고수 : 0,
      메뉴들: ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  methods :{
    increase(){
      this.신고수+=1;
    }

  },
  components: {},
};

오늘의 숙제

> 모든 상품에 신고버튼기능 만들어오기

힌트

> 상품마다 신고수를 기록하는 곳이 있어야 함

template

 
  <div>
    <h4>{{ products[0] }}</h4>
    <p>50 만원</p>
    <button @click="신고수[0]++">허위매물신고</button> <span>신고수 : {{신고수[0]}}</span>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>가격은 아무거나</p>
    <button @click="신고수[1]++">허위매물신고</button> <span>신고수 : {{신고수[1]}}</span>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>가격은 아무거나</p>
    <button @click="신고수[2]++">허위매물신고</button> <span>신고수 : {{신고수[2]}}</span>
  </div>

script 

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      신고수 : [0,0,0],
      메뉴들: ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  methods :{
    increase(){
      this.신고수+=1;
    }

  },
  components: {},
};

for문으로 한 번에 할 수는 없을까? 🤔

싶어서 template 부분을 바꿨다. 😀

  <div v-for="(a,i) in 신고수" :key="i">
    <h4>{{ products[i] }}</h4>
    <p>50 만원</p>
    <button @click="신고수[i]++">허위매물신고</button> <span>신고수 : {{신고수[i]}}</span>
  </div>

https://youtu.be/T4N9wjx7_E4

깃에 올릴라했는데 안대서 친구가 같은 오류를 경험해봤다고 알려줬다.

https://komodor.com/learn/how-to-fix-fatal-refusing-to-merge-unrelated-histories-error/

git pull origin master --allow-unrelated-histories

이러고 push하니까 됐다!!!

상단 Nav 메뉴 만들기

App.vue

> template 부분에 Nav 추가

  <div class="menu">
    <a>Home</a>
    <a>Products</a>
    <a>About</a>
  </div>

>style 부분에 추가

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}

그리고

npm run serve

반복적인 요소 짧게 출력

> 반복문

<태그 v-for="작명 in 몇회" :key="작명">
(:key="작명"도 필요)->안 쓰면 에러남

-> Vue 문법을 쓰면 비슷한 HTML들 만들 때 코드 한 줄로 끝낼 수 있다!

-> 몇회 자리에 데이터도 집어넣기가 가능하다.

메뉴 생성에 필요한 정보들을 data() 란에 저장

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      메뉴들: ['Home', 'Shop', 'About'],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};

Vue 반복문 특)

> array/object 집어넣기 가능 => 자료 안의 데이터 갯수만큼 반복됨

> 작명한 변수는 데이터 안의 자료가 됨

>> 변수 작명은 2개까지 가능하다. v-for="(a,i) in 메뉴들" 

=> 괄호 안의 왼쪽 변수는 array 내의 데이터, 오른쪽 변수는 1씩 증가하는 정수

    <a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a>

1. 자료 안의 데이터 갯수만큼 반복됨

2. 작명한 변수는 데이터 안의 자료가 됨

:key="" 의 용도

> 반복문 쓸 때 꼭 써야 함

> 반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀

ex) :key="a" => a는 반복문 돌면서 변하는 숫자/문자

숙제

> 상품목록도 반복문으로 축약하기

  <div v-for="(a,i) in products" :key="i">
    <h4>{{ a }}</h4>
    <p>50 만원</p>
  </div>

https://youtu.be/0BbF7UxKKvg

App.vue

Hello World를 다 지우고 시작합시다!

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
#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;
}
</style>

{{ 데이터바인딩 }}

> 자바스크립트 데이터를 html에 넣는 문법.

<script>
//document.getElementById().innerHTML = ??  기존의 자바스크립트 문법

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      price1: 60,
    };
  },
  components: {},
};
</script>

이렇게 data( ){ } 안에 데이터를 넣어준다.

그리고 위의 <template>에서 데이터를 가져오고 싶다면, {{ }} 로 가져온다.

{{ price1 }}

짜잔~~

이 문법을 왜, 언제 사용하는지?

{{데이터바인딩}하는 EU

> 1. HTML에 하드코딩해놓으면 나중에 변경이 어려움.

> 2. Vue의 실시간 자동 렌더링 기능을 이용할 수 있음. (Vue는 data를 변경하면 data와 관련된 HTML에도 실시간으로 반영됨.)

자주 변할 것 같은 데이터들은 데이터로 보관하고 HTML로 {{꽂아넣는다}}.

Q. 쇼핑몰 이름도 데이터바인딩할까?

->애초에 바뀔 일이 없으면 안해도 될 듯 (굳이?)

HTML 속성도 데이터바인딩 가능

:속성="데이터이름"

<h4 class="red" :style="스타일">XX원룸</h4>

숙제: 이 사진처럼 만들어오기

데이터 값에 아래 코드 추가함.

products: ["역삼동원룸", "천호동원룸", "마포구원룸"],

> 숙제 끝!

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h4>{{ products[0] }}</h4>
    <p>50 만원</p>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>가격은 아무거나</p>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>가격은 아무거나</p>
  </div>
</template>

<script>
//document.getElementById().innerHTML = ??  기존의 자바스크립트 문법

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      price1: 60,
      price2: 70,
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};
</script>

<style>
#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;
}
</style>

https://youtu.be/NONWar0jGLM

Vue 강의를 찾아보던 중,,, 되게 쏙쏙 들어오게 설명해주시는 것 같은 분을 발견해서 듣기 시작했습니다.

코딩애플님의 Vue로 만드는 직방/인스타그램 웹앱 강의 따라하기... 시작해봅니다!

설치, 세팅

node js 설치. -> npm을 사용하기 위해서.(npm은 각종 웹개바 라이브러리 설치 도우미)

npm install -g @vue/cli

* vue/cli->vue프로젝트 빠르게 생성해주는 라이브러리

확장 기능 Vetur, HTML CSS Support, Vue 3 Snippets 설치

프로젝트 생성

vue create vuedongsan

* vue create 프로젝트명

App.vue가 메인 파일이라고 생각하면 된다.

<template>안에는 HTML,

<script> 안에는 JavaScript, 

<style> 안에는 CSS를 짠다.

미리보기

npm run serve

App.vue를 HTML로 컴파일하기 때문에 웹 사이트처럼 동작을 하고 있는 것이다!

index.html에 App.vue에 짠 코드들을 박아넣고 있는것임! 박아넣는 작업은 main.js가 하고 있음.

파일, 폴더 설명

node_modules: 프로젝트에 쓰는 라이브러리들

src: 소스코드 다 담는 곳

public: html 파일, 기타파일 보관

package.json: 라이브러리 버전, 프로젝트 설명 기록