코린이[코딩 어린이]

[ 오늘의 배움 ]

• 부자인 것도 가난한 것도 스스로 선택한 결과다.
• 가난하게 사는 건 그 상태가 편하다고 느끼기 때문이다.
• 부자가 될 거라면 돈 없는 자신과 결별을 선언하자.

[ 오늘의 배움 ]

• 부자의 세계와 가난한 세계의 상식은 완전히 다르다.
• 부자의 세계로 가는 지름길은 지금까지의 상식을 버리는 것이다. 전부 의심해보고 가난의 상식을 끊어내야 한다.
• 몇 가지 규칙만 기억하면 누구든 부자가 될 수 있다.

vue youtube 바로가기

npm install

$ npm install vue-youtube

js [ vue-youtube.js 생성 ]

import Vue from 'vue'
import VueYoutube from 'vue-youtube/dist/vue-youtube'

Vue.use(VueYoutube)

.vue

<youtube :video-id="videoId" :player-vars="playerVars" @playing="playing"></youtube>

script

data() {
    return {
      videoId: 'lG0Ys-2d4MA',
      playerVars: {
      	autoplay: 1
      }
    }
},
methods: {
    playing() {
      console.log('\o/ we are watching!!!')
    }
},

if조건문 형태

// 불 표현식 | 내용
if(불 표현식) {
    내용
}

if 조건문

if(300 < 100) {
    alert('300 < 100 => true');
}

alert('종료');

300은 100보다 크기 때문에 내부 alert()은 작동하지 않는다.

시간을 사용한 조건 예

var date = new Date();
var hour = date.getHours();

if(hour < 12) {
    alert('오전입니다.');
}

if(hour >= 12) {
    alert('오후입니다.');
}

date.getHours()메서드로 현재 시각을 가져와서 오전인지 오후인지 알아보는 조건문

if else 조건문

if(불 표현식) {
    내용
} else {
    내용
}

시간을 사용한 조건 예 ( if else 조건식으로 구현했을 때 )

var date = new Date();
var hour = date.getHours();

if(hour < 12) {
    alert('오전입니다.');
} else {
    alert('오후입니다.');
}

if else 조건문으로 구현하면 눈으로 볼때도 하나의 내용으로 보이고, 조건 하나를 처리하는 횟수가 줄어들기 때문에 성능향상에도 미약하지만 도움이 된다.

중첩 조건문

if(불 표현식) {
    if(불 표현식) {
        내용
    } else {
        내용
    }
} else {
    if(불 표현식) {
        내용
    } else {
        내용
    }
}

조건문 안에 조건문을 중첩해 사용하면 중첩 조건문이라고 한다.

중첩 조건문 예

var date = new Date();
var hour = date.getHours();

if(hour < 12) {
    alert('아침시간');
} else {
    if(hour < 18) {
        alert('점심시간');
    } else {
        alert('저녁시간');
    }
}

if else if 조건문

if(불 표현식) {
    내용
} else if(불 표현식) {
    내용
} else {
    내용
}

if else if 조건문 예

var date = new Date();
var hour = date.getHours();

if(hour < 12) {
    alert('아침시간');
} else if(hour < 18) {
    alert('점심시간');
} else {
    alert('저녁시간');
}

if else 조건식을 사용했을 때보다 간결해 진것을 알 수 있다.

모듈 패턴의 기본 패턴

(function(window) {
    var myLibrary = {
        helloWorld: function() {
            alert("Hello World");
        },
        hello: {
            World: function() {
                alert("Hello Module");
            }
        }
    };

    window.myLibrary = myLibrary;
}(window));

myLibrary.helloWorld(); // Hello World
myLibrary.hello.World(); // Hello Module

최초의 function은 즉시 호출 함수가 되어 내부적으로 바로 실행되며, 이 함수의 인자로 window를 넘겨준다. 이렇게 window를 넘기면 앞으로 이 모듈 안에서 window라는 변수값은 글로벌 변수로서 계속 사용할 수 있다.

글로벌 변수에 모듈 패턴에 할당하는 형태

var myLibrary = (function(window) {
    var myLibrary = {
        helloWorld: function() {
            alert("Hello World");
        },
        hello: {
            World: function() {
                alert("Hello Module");
            }
        }
    };
    return myLibrary;
}(window));

myLibrary.helloWorld(); // Hello World
myLibrary.hello.World(); // Hello Module

글로벌 변수에 객체 표현식으로 모듈 패턴을 할당하는 형태

var myLibrary = (function(window) {
    return {
        helloWorld: function() {
            alert("Hello World");
        },
        hello: {
            World: function() {
                alert("Hello Module");
            }
        }
    };
}(window));

myLibrary.helloWorld(); // Hello World
myLibrary.hello.World(); // Hello Module

이렇게 다양하게 모듈을 생성하고 응용할 수 있다.

Props란 ?

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되는 단방향 데이터 전달 방식이다.

App.vue ( 부모 컴포넌트 )

html

<template>
  <input type="text" v-model="callProps" />
  <Header :msg="callProps" />
</template>

script

import Header from '@components/Main/Header.vue'
import { ref } from 'vue'

export default {
  data() {
    const callProps = ref('Hello')

    return {
      callProps
    }
  }
}

Header.vue ( 자식 컴포넌트 )

html

<template>
    <h1>자식 컴포넌트 확인하기</h1>
    <div>{{msg}}</div>
</template>

script

export default {
    props: {
        msg: String
    }
}

부모 컴포넌트(App.vue)에 input창에 텍스트를 입력하면 :msg="callProps"를 통해서 자식 컴포넌트로 보내지고 자식 컴포넌트(Header.vue)에 props를 통해 텍스트가 전달된다.

v-bind 디렉티브 : 단방향 결합을 지원

v-model 디렉티브 : 양방향 결합을 지원

단방향 결합 => 변수의 값이 템플릿으로만 결합되어 템플릿의 HTML태그가 변경한 값이 변수에 돌아오지 않는다.

양방향 결합 => 변수의 변경이 템플릿의 DOM에 영향을 미치는 것은 물론이고, 템플릿에서의 변경이 변수의 값을 변경시키기도 한다.

<template>
    <div>
        <input type="text" :value="abbr" />
        <input type="text" v-model="normal" />

        <hr />

        <abbr :title="normal">{{abbr}}</abbr>
        <br />
        <abbr :title="abbr">{{normal}}</abbr>
    </div>
</template>

import { ref } from 'vue'

export default {
    setup() {
        const abbr = ref('Project1')
        const normal = ref('Project2')
        return {
            abbr,
            normal
        }
    }
}

vue에서 먼저 ref 컴포지션 API함수를 불러왔다. setup함수는 Options API와는 다르게 반응형 변수를 선언하기 위해서는 ref함수로 값을 한번 감싸줘야 한다.

v-text디렉티브나 수염표기법(Mustache syntax)으로 나타내는 값은 모두 일반 텍스트로 출력이 된다.

이는 HTML엘리먼트의 textContent를 업데이트하기 때문이다. 이는 결국 HTML을 작성한 문자열을 변수의 값으로 대입하더라도 HTML태그를 가지고 있는 문자열 그대로 렌더링이 된다.

반면 v-html디렉티브는 HTML엘리먼트의 innerHTML값에 변수값을 전달하기 때문에 문자열이 HTML마크업 언어로 표현되도록 한다. innerHTML에 바로 값을 집어 넣기 때문에 변수는 반드시 HTML평문이어야 하며, Vue의 문법을 사용해도 컴파일이 되지 않는다.

수염표기법 / v-text디렉티브

<div v-text="msg"></div> <!-- 안녕하세요 -->
<div v-pre>{{msg}}</div> <!-- 안녕하세요 -->

setup() {
    const msg = "안녕하세요"
    return {
        msg
    }
},

v-pre디렉티브를 이용한 컴파일 무시

<div v-pre>{{msg}}</div> <!-- {{msg}} -->

변수는 선언하고 값을 넣으면 자동으로 DOM에 업데이트가 된다. Options API를 사용하기 위해서는 단순히 data옵션에 변수를 선언하면 되며, 컴포지션 API와 함께 이용하기 위해서는 setup함수를 생성하고 그 안에 일반적인 자바스크립트 변수를 선언하듯이 선언하면 된다. 선언된 변수는 템플릿의 변수와 결합될 수 있도록 반드시 객체 형식으로 반환돼야 한다.

template

<template>
    <div>
        <div id="date">
            {{date}}
        </div>
        <div id="date2">
            {{date2}}
        </div>
    </div>
</template>

script

export default {
    setup() {
        const date = Date().toString()
        return {
            date
        }
    },
    data() {
        return {
            date2: Date().toString()
        }
    }
}

setup함수 내에서 변수를 선언하고 반환하는 방법과 기존과 동일한 방식의 Options API를 이용해 변수를 선언하고 반환하는 방법을 보여준다.

setup함수에서는 date라는 함수를 선언하고 자바스크립트의 Date클래스의 toString메서드를 이용해 현재 날짜와 시간을 얻어온다.

같은 값을 얻어오지만 Options API는 data라는 별도의 옵션 함수를 이용해 date2에 날짜와 시간을 대입하는 것을 알 수 있다.

Vue2까지는 Option API만 제공을 했으며, 컴포넌트를 생성할 때 옵션 속성이라 불리는 data, methods, computed등과 같은 것들을 정의해야 했다. 이는 코드가 길어지면 가독성을 낮추는 문제점이 있었기에 다른 컴포지션 프레임워크들과 같이 컴포지션 API를 지원하고자 setup함수를 제공하게 됐다.

setup함수의 구조

setup() {
    const data = 1
    return { data }
}

이전 Options API에서 사용하던 computed, watch옵션은 모두 setup함수에서도 구현이 가능하다.

기존 methods옵션으로 제공하던 함수의 경우 다음과 같이 변수로 할당하여 반환하면 된다.

const foo = () => { data = 2 }
return { foo }