꾸준2

- 디렉티브(Directives)
  - HTML 태그에 추가적인 동작을 부여할 수 있는 기능
  - 디렉티브는 v- 접두어로 시작하는 특수 속성(attribute) 


v-bind:class 디렉티브
  - HTML 요소의 클래스를 동적으로 바인딩할 때 사용된다
  
예제1) 두개 이상의 클래스 동적으로 바인딩하는법

<div
:class="['name' + idx, data.active === 'Y' ? 'active' : '']"

>

</div>

절대 경로
@ : src(루트)부터 시작

상대 경로

../ : 상위 폴더로 올라갈 때

./ : 현재 같은 폴더에 있을때

!!! import 단축키 !!!
html 안에 컴포넌트 파일 이름을 적다보면 아래 굵은 글씨와 같이
<template>
  <hello-worl + Ctrl+ Spacebar 엔터를 누르면
</template>

자동으로 스크립트 안에 import 와 component 등록이 가능하다 
- import helloWorld from '경로' 
- components : { HelloWorld }

import해야할 파일이 현재 파일에서 가깝다면 : 상대 경로
import해야할 파일이 현재 파일에서 멀고 루트에서 가깝다면 : 절대 경로

ex) 

현재 컴포넌트(test.vue)에서 assets폴더에 있는 logo.png 파일 import 하기

<template>
  <div>
    <img :src='pic'>  
  </div>
</template>

<script>
// ex) 
// 현재 컴포넌트(test.vue)에서 assets폴더에 있는 logo.png 파일 import 하기

// 경로
// 현재 컴포넌트 경로 : src/components/test/test1/test.vue
// logo.png 경로 : src/assets/logo.png

// 절대 경로 
import pic from '@/assets/logo.png'

// 상대 경로
// import pic from '../../../assets/logo.png' 

export default {
  data() {
    return {
        pic : pic,
    }
  }    

}
</script>

<style>

</style>

라우터
인강 듣기 https://www.youtube.com/watch?v=XPlBOl2SxGA&list=PLZzSdj89sCN0IRcwT4lJWg_qgfBFmcF6A&index=2

- main.js에 axios를 추가하면 Vue 인스턴스마다 axios를 import하지 않아도 사용할 수 있다.

- axios를 사용하면서 then()을 처리할 때는 화살표 함수를 사용하는것이 좋다.   

- 파일 구조

   - view 폴더, components 폴더를 구분해서 화면을 담당하는 컴포넌트와 기능을 담당하는 컴포넌트로 파일 구조를 만드는게 좋다

- 바인딩, 선언, 정의 개념 정리하기 

- 화살표 함수 this (https://lovemewithoutall.github.io/it/this-in-arrow-function/)

참고)
https://ddoni-code.tistory.com/3

궁금한점)
--save 와 --save-dev의 차이점

vue --version // 현재 버전 확인

npm r -g vue-cli  // 2.x 버전 지우기
npm r -g @vue/cli // 3.x 버전 지우기

npm i -g @vue/cli // 3.x 버전 설치
npm i -g vue-cli  // 2.x 버전 설치

vue create 프로젝트명

- cli버전이 3.x버전 이상이어야 가능하다 만약 2.x 버전이라면 삭제 후 버전 업그레이드

(사용법)
<태그 v-bind: [id, class, style] = 'data이름'></태그>

(예시)
<div v-bind:class="green"></div>

스타일 바인딩

1. v-bind:style을 이용해 size변수와 연결하고

2. 데이터 size변수에 css값 넣어주기 

// html

<weather-chart v-bind:style="size" />

// script

export default {
  data() {
    return {
      size: {
        paddingTop: '30px',
        height: '100px',
        width: '600px',
        backgroundColor: 'yellow'
      }
     }
    }

클래스 바인딩

1. v-bind:class을 이용해 size변수와 연결하고

2. size 변수에 사용할 class이름을 선언하고

3. css에 해당 class 꾸며주기  

// html
<button v-on:click="changeClass">클래스 변경</button>
<weather-chart v-bind:class="size" />


// script
export default {
  data() {
    return {
      size: 'firstClass' // 클래스 이름
    }
  },
  methods: {
  	changeClass(){
      this.size = 'secondClass' // 버튼을 이용해 클래스 변경
    }
  }
}

// css
  .firstClass{
    padding-top: 30px;
    height: 200px;
    width: 700px;
    background-color: orange;
  }
  .secondClass{
    padding-top: 30px;
    height: 200px;
    width: 700px;
    background-color: red;
  }

(변경 버튼 클릭전) 

size = 'firstClass'

(변경 버튼 클릭후)

size = 'secondClass'

참고 : Vue.js 입문책을 읽고 학습한 내용을 블로그에 정리한 글이므로 내용상 오류가 있을 수 있습니다. 
        오류가 있다면 댓글 남겨주시면 감사하겠습니다.

HTTP(HyperText Transfer Protocol) 통신

• HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜(규칙)
• 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식으로 동작
• Vue에서 HTTP통신의 대표적인 사례는 액시오스(axios)

액시오스(axios)

• Vue에서 가장 많이 사용되는 HTTP통신 라이브러리
• axios는 promise기반의 API형식이 다양하게 제공되어 별도의 로직이 필요없어서 쉽게 구현 가능

      // HTTP GET 요청
      // then() 데이터를 정상적으로 받아올 때 실행되는 로직
      // catch() 데이터를 받아올 때 오류가 발생하면 실행되는 로직

      axios.get('URL 주소').then().catch()

      // HTTP post 요청
      
      axios.post('URL 주소').then().catch()

      // 자세한 옵션을 직접 정해서 HTTP 요청
      
      axios({
        method:'HTTP요청 방식',
        url:'URL 주소',

        ...(옵션 속성)
        
      })

예제) 강아지 종류

    <div id="test">
      <button v-on:click="getData">강아지 종류</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Vue - CDN -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- Vue Axios - CDN -->

    <script>

    new Vue({
      el:'#test',
      methods: {
        getData: function(){
          axios.get('https://dog.ceo/api/breeds/list/all')
          .then(function(response){
            console.log(response);
          });
        }
      }
    });

    </script>

1. div태그 안에 있는 버튼(강아지 종류) 클릭

2. URL주소에 HTTP get방식으로 데이터 요청

3. 데이터 응답 성공하면 .then(response) 함수에 있는 console 내용 실행

출력

(버튼 클릭 전)

(버튼 클릭 후)

(주의)

axios를 사용하여 데이터에 접근할때는 화살표함수 사용

(일반 함수)

  data(){
    return {
      result: []
    }
  },
  methods: {
    getData: function(){
      axios.get('https://dog.ceo/api/breeds/list/all')
      .then(function(response) {
        console.log(response)
        this.result = response
      })
    }
  }

(화살표 함수)

  data(){
    return {
      result: []
    }
  },
  methods: {
    getData: function(){
      axios.get('https://dog.ceo/api/breeds/list/all')
      .then(response => {
        console.log(response)
        this.result = response
      })
    }
  }

참고 : Vue.js 입문책을 읽고 학습한 내용을 블로그에 정리한 글이므로 내용상 오류가 있을 수 있습니다. 
        오류가 있다면 댓글 남겨주시면 감사하겠습니다.

라우팅(Routing)

• 웹 페이지 간의 이동 방법
• 싱글 페이지 애플리케이션(SPA)에서 주로 사용
• 화면이 깜빡이지 않고 매끄럽게 전환할 수 있고 더 빠르게 화면을 조작 가능
• Vue, Angular, react 모두 라우팅을 이용하여 화면을 전환

1. Vue 라우터

뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리

    <!-- html -->
    
    페이지 이동 태그 : 링크를 클릭하면 지정한 URL값으로 이동
    <router-link to="/URL 값"></router-link>

    페이지 표시 태그 : 변경된 URL에 따라 해당 컴포넌트를 화면에 출력해주는 영역
    <router-view></router-view>

      // javascript
      
      1. routes 변수에 각 URL 값에 맞게 컴포넌트 지정하기
      var routes = [
        { path:'/URL 값1', component:컴포넌트1},
        { path:'/URL 값2', component:컴포넌트2}
      ];

      2. router 변수에 routes변수 삽입해 정의하기
      var router = new VueRouter({
        routes
      });

      3. 뷰 인스턴스에 router 변수를 삽입해 생성하고 $mount를 사용해 화면(html)에 부착하기
      var app = new Vue({
        router
      }).$mount('#app')

(예제)

1. 컴포넌트 생성

2. (routes 변수) : 각 URL에 맞는 컴포넌트 지정

3. (router 변수) : 뷰 라우터 생성(routes내용 포함)

4. (Vue 인스턴스) : Vue 인스턴스 생성(router내용 포함)하고 $mount를 이용해 (html)에 인스턴스 부착

5. (router-link 태그) : 링크 태그에 (2번)에서 만든 URL값 지정

6. (router-view) : URL값에 맞는 컴포넌트 화면에 표시

(출력)

1. 버튼 클릭 전

2. 안녕 클릭 후

3. 잘가 클릭 후

2. 네스티드 라우터(Nested Router)

• 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 출력 가능
• 상위 컴포넌트에 하위 컴포넌트를 포함하는 구조

    <!-- html -->
    
    <div id="app">
      <router-view></router-view> <!--상위 컴포넌트 출력 영역 -->
    </div>

      // 상위 컴포넌트
      
      var 상위 컴포넌트 = {
        template:`
        <div>
          상위 컴포넌트 내용
          <router-view></router-view> // 하위 컴포넌트 출력 영역
        </div>
        `
      }

      // 하위 컴포넌트
      
      var 하위 컴포넌트1 = { template:'하위 컴포넌트1 내용'}
      var 하위 컴포넌트2 = { template:'하위 컴포넌트2 내용'}

      // 네스티드 라우팅
      
      var routes = [
        {
          path:'/상위 컴포넌트 URL값',
          component:상위 컴포넌트,
          children :[
            {
              path:'/하위 컴포넌트1 URL값',
              component:하위 컴포넌트1
            },
            {
              path:'/하위 컴포넌트2 URL값',
              component:하위 컴포넌트2
            }
          ]
        }
      ]

예제

    <!-- (HTML) -->
    
    (6)
    <div id="test">
      <router-link to="/user">안녕하세요</router-link>
      <router-view></router-view>
    </div>

    // (javascript)
      
      (1)
      var user = {
        template:`
        <div>
          user 아이디 비밀번호 찾기
          <p>
            <router-link to="/user/ID">ID 찾기</router-link>
            <router-link to="/user/Pass">Password 찾기</router-link>
          </p>
          <router-view></router-view>
        </div>
        `
      }
      
      (2)
      var ID = { template:'<p>Vue</p>'}
      var Pass = { template:'<p>123</p>'}
	  
      (3)
      var routes = [
        {
          path:'/user',
          component:user,
          children:[
            {
              path:'ID',
              component:ID
            },
            {
              path:'Pass',
              component:Pass
            }
          ]
        }
      ]
	  
      (4)
      var router = new VueRouter({
        routes
      })
	  
      (5)
      var test = new Vue({
        router
      }).$mount('#test')

1. 상위 컴포넌트를 생성할 때 하위 컴포넌트 출력 영역을 라우터로 지정합니다.

2. 하위 컴포넌트를 생성합니다.

3. 네스티드 라우팅에 상위 컴포넌트 URL값과 컴포넌트, 하위 컴포넌트 URL값과 컴포넌트를 지정합니다.

4. 뷰 라우터를 생성합니다

5. 인스턴스에 라우터 정보를 포함해서 생성합니다.

6. HTML에 상위 컴포넌트 출력 영역을 라우터로 지정합니다.

출력 

1. 상위 컴포넌트 내용 출력 화면 

2. ID 찾기 버튼을 눌렀을때 하위 컴포넌트 내용 출력 화면(상위 컴포넌트 포함)

3. Password찾기 버튼을 눌렀을때 하위 컴포넌트 내용 출력 화면(상위 컴포넌트 포함)

3. 네임드 뷰(Named View)

• 특정 페이지로 이동할 때 여러 개의 컴포넌트를 동시에 보여주는 라우팅 방식
• 네스티드 라우터와 다르게 같은 레벨에서 여러 개의 컴포넌트를 한 번에 화면에 보여줌

    <!-- HTML -->
    
    <!-- name속성을 지정하지 않으면 default 컴포넌트에 접근합니다. -->
    
    <div id="app">
      <router-view></router-view>               <!-- 컴포넌트1 내용 출력 -->
      <router-view name="name2"></router-view>  <!-- 컴포넌트2 내용 출력 -->
      <router-view name="name3"></router-view>  <!-- 컴포넌트3 내용 출력 -->
    </div>

      // (javascript) - 같은 레벨의 컴포넌트

      var 컴포넌트1 = { template : '컴포넌트1 내용'}
      var 컴포넌트2 = { template : '컴포넌트2 내용'}
      var 컴포넌트3 = { template : '컴포넌트3 내용'}

      // (javascript) - 네임드 뷰

      // html의 네임드 속성과 Vue의 컴포넌트를 연결 
      
      var router = new VueRouter({
        routes:[
          path:'/',
          component:{
            default:컴포넌트1,
            name2:컴포넌트2,
            name3:컴포넌트3
          }
        ]
      });

참고 : Vue.js 입문책을 읽고 학습한 내용을 블로그에 정리한 글이므로 내용상 오류가 있을 수 있습니다. 
        오류가 있다면 댓글 남겨주시면 감사하겠습니다.

컴포넌트란???

• 레고 블럭과 같이 재사용이 가능한 최소 단위

• 화면 전체를 각각 역할에 맞게 영역별로 잘개 쪼개어서 사용됩니다

1. 컴포넌트 등록

지역(Local)컴포넌트 등록

new Vue({
  components : {
    '컴포넌트 이름' : 컴포넌트 내용
  }
});

• 특정 인스턴스에서 유효한 범위에서만 사용 가능
• 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의합니다

전역(Global)컴포넌트 등록

Vue.component('컴포넌트 이름', {
  // 컴포넌트 내용
})

• 모든 범위의 여러 인스턴스에서 사용 가능
• Vue 생성자에서 .component()를 호출하여 등록할 컴포넌트 이름과 내용을 정의합니다.

지역 컴포넌트와 전역 컴포넌트 유효범위

    <div id="test1">
      <h4>test1 인스턴스 영역</h4>
      <global-component></global-component>
      <local-component></local-component>
    </div>

    <hr>

    <div id="test2">
      <h4>test2 인스턴스 영역</h4>
      <global-component></global-component>
      <local-component></local-component>
    </div>

    <script>
      Vue.component('global-component', {
        template : '<div>전역 컴포넌트</div>'
      });

      new Vue({
        el : '#test1',
        components : {
          'local-component' : {
            template : '<div>지역 컴포넌트</div>'
          }
        }
      })

      new Vue({
        el : '#test2'
      });
    </script>

HTML에서 첫 번째와 두 번째div태그에 모두 전역 컴포넌트와 지역 컴포넌트를 등록했지만

Script에서 첫 번째 인스턴스 영역에만 지역 컴포넌트를 등록했기 때문에

화면에서 첫 번째 영역에는 전역 컴포넌트, 지역 컴포넌트 내용이 출력 되지만

두 번째 영역에서는 전역 컴포넌트만 출력됩니다.

• 전역 컴포넌트는 한 번 등록하면 어느 인스턴스 영역에서든 사용할 수 있습니다.
• 지역 컴포넌트는 등록한 인스턴스 영역에서만 사용할 수 있습니다.

2. 컴포넌트 통신

Vue에서 컴포넌트들 끼리는 각각 고유한 유효범위를 가지고 있기 때문에  아무렇게나 다른 컴포넌트의 값을 참조할 수가 없습니다. 그렇기 때문에 컴포넌트들 끼리 통신하기 위해서는 뷰 프레임워크에서 정의한 컴포넌트 데이터 전달 방법을 사용해야 합니다.

2-1 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달

• props : 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달할 때 사용하는 속성

(html)

    <div id = "test">
      <하위 컴포넌트 v-bind : props속성 이름 = "상위 컴포넌트 data속성"></하위 컴포넌트>
    </div>

(하위 컴포넌트)

      Vue.component('하위 컴포넌트', {
        props : ['props속성 이름'],
        template : '<b>{{props속성 이름}}</b>'
      });

(상위 컴포넌트)

      new Vue({
        el : '#test',
        data : {
          상위 컴포넌트 data속성 : data 내용
        }
      })

1. 하위 컴포넌트에 props속성을 정의합니다.

2. 상위 컴포넌트에 data속성과 data내용을 정의합니다

3. html에 하위 컴포넌트 태그를 추가합니다 

4. 하위 컴포넌트 태그에서 v-bind속성을 이용해 상위 컴포넌트의 data 내용을 하위 컴포넌트 props속성에 전달합니다.

5. 상위 컴포넌트에서 전달받은 data 내용을 하위 컴포넌트의 template을 통해 화면에 출력합니다.

예제

  <body>
    <div id = "test">
      <child-component v-bind:propsdata = "text"></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      Vue.component('child-component', {
        props : ['propsdata'],
        template : '<b>{{propsdata}}</b>'
      });

      new Vue({
        el:'#test',
        data:{
          text:'parent-component -> child-component'
        }
      })
    </script>
  </body>

출력

2-2 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전달

• $emit() : 이벤트 발생
• v-on: 이벤트 수신

(html)

    <div id = "test">
      <child-component v-on:child-hi = "parent"></child-component>
    </div>

(하위 컴포넌트)

      Vue.component('child-component', {
        template:'<button v-on:click = "child">check</button>',
        methods:{
          child: function() {
            this.$emit('child-hi');
          }
        }
      });

(상위 컴포넌트)

      new Vue({
        el:'#test',
        methods: {
          parent:function() {
            console.log("child-hi -> parent")
          }
        }
      })

1. (하위 컴포넌트) check[버튼 클릭]

2. (하위 컴포넌트) v-on:click[이벤트 수신] = "child"[메서드 실행]

3. ("child"메소드 안) this.$emit('child-hi)[이벤트 발생]

4. (html) v-on:child-hi[이벤트 수신] = "parent"[메서드 실행]

5. (상위 컴포넌트) console.log("child-hi -> parent")[화면에 출력]

예제

출력