JavaScript Drum Kit

위에 첨부한 사진처럼 해당하는 키보드를 누르면 화면에 효과와 함께 소리가 나는 드럼 킷을 만드는 것

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Drum Kit</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="keys">
    <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
      <span class="sound">openhat</span>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
      <span class="sound">boom</span>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
      <span class="sound">ride</span>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
      <span class="sound">snare</span>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
      <span class="sound">tom</span>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
      <span class="sound">tink</span>
    </div>
  </div>
  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>

<script>

</script>
</body>
</html>

여기서 div 속성중 data-key 는 어떤 키를 눌러서 실행 시킬수 있는지 설정하는 것이며
http://keycode.info/ 에서 각 키의 키코드를 알 수 있다.
<kbd>태그는 처음봤는데 키보드 입력을 지정할 때 쓰는 코드라고 한다.
data-key 속성은 위의 div와 아래 audio를 하나로 묶어주는 속성이라 할 수 있다.

목표

키보드 키 입력시 애니메이션효과와 소리를 출력해 드럼 킷을 만드는 것

과정

  1. 해당 키 입력시 효과음 추가하는 함수 생성
  2. 키 재입력 시간 설정(연속 입력 가능하도록)
  3. 효과 종료시 변화하는 함수 생성
  4. 효과음 출력 및 종료 설정

코드 분석

  1. 해당 키 입력시 효과음 추가하는 함수 생성

    function playSound(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
     if (!audio) return;
    
     key.classList.add('playing');
     audio.play();
    }
    

    audio, key에 각각 누른 키보드의 keyCode와 일치하는 속성을 가진 요소들을 담아주고
    일치하는 audio가 없다면 아래코드를 실행하지 않고, 일치한다면 누른 버튼에 playing클래스를 추가해주고
    해당 소리를 play하는 playSound()함수를 생성

  2. 키 재입력 시간 설정(연속 입력 가능하도록)

    audio.currentTime = 0;
    

    오디오 재생의 현재 위치를 0초로 이동함. 이로써 입력 후 다시입력하면 같은 소리를 재생시킬 수 있어
    소리가 끝나야 입력이 가능했던게 연속으로도 입력이 가능함
    위의 코드를 audio.play() 위에 삽입함

  3. 효과 종료시 변화하는 함수 생성

    function removeTransition(e) {
     if (e.propertyName !== 'transform') return;
     e.target.classList.remove('playing');
    }
    

    누른 키의 속성명중 transform이 이 없으면 다음 코드를 실행하지 않고,
    존재한다면 playing이란 클래스를 지우도록하는 removeTransition()함수를 생성

  4. 효과음 출력 및 종료 설정

    const keys = Array.from(document.querySelectorAll('.key'));
    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
    window.addEventListener('keydown', playSound);
    

    key 클래스를 가진 모든 요소를 keys에 배열로 담고
    반복자 forEach를 사용해 각각의 요소에 변화가 끝나면(transitionend) removeTransition 함수를 실행하고,
    keydown 이라는 이벤트 타입을 실행하면 playSound함수가 작동함

찾아본 내용, 알게된 내용들

const - const는 ES6 문법으로 내용이 변하지 않는 값을 넣을 때 사용함(상수 선언)
keydown - 키를 누를 때 작동하는 것, 참고로 keyup은 키를 누르고 뗄 때 작동

'개발 > JavaScript30' 카테고리의 다른 글

5. Flex Panel Gallery  (0) 2017.04.05
4. Array Cardio Day 1  (0) 2017.04.04
3. CSS Variables  (0) 2017.04.03
2. CSS + JS Clock  (0) 2017.04.03
1. JavaScript Drum Kit  (0) 2017.03.30
0. JavaScript30 Challenge  (0) 2017.03.30


JavaScipt30 챌린지

  • 하루에 1가지 자바스크립트 프로젝트를 하면서 30일간 30개의 프로젝트를 순수 자바스크립트로만 구현해보는 연습 사이트


포스터에서 VANILLA JS가 뭔가해서 구글링을 해봤음

http://vanilla-js.com/ 공식 사이트고 아주 그럴싸하게 사이트를 꾸며놨는데

이것저것 체크해서 다운받아 코드를보면 

//Vanilla JS 가 전부이다 ㅋㅋㅋㅋㅋ

각종 프레임워크나 라이브러리사용을 당연시한 사용들에게 '기본에 충실해라'라는 메세지로

순정 자바스크립트를 강하게 어필한 이벤트? 라고 볼수 있다.

사실 편하고 좋은 프레임워크, 라이브러리는 정말 많지만

그보다 VANILLA JS(ㅋㅋ)를 잘한다면 다른걸 더 빨리 익힐 수 있지 않을까 싶은 생각이 번뜩 들어

공부 해보려함

함께 해보고 싶다면! https://javascript30.com/ 고고

'개발 > JavaScript30' 카테고리의 다른 글

5. Flex Panel Gallery  (0) 2017.04.05
4. Array Cardio Day 1  (0) 2017.04.04
3. CSS Variables  (0) 2017.04.03
2. CSS + JS Clock  (0) 2017.04.03
1. JavaScript Drum Kit  (0) 2017.03.30
0. JavaScript30 Challenge  (0) 2017.03.30

조건부 렌더링

v-if


Vue에서는  v-if 디렉티브를 사용해 조건문을 작성
여느 다른 언어의 조건문과 같이  v-if , v-else-if, v-else 사용

template에 v-if를 갖는 조건부 그룹 만들기

 v-if 는 디렉티브이기 때문에 하나의 엘리먼트에 추가 해야함
여러개의 엘리먼트를 전환할 때는 보이지 않는 래퍼 역할을 하는 엘리먼트에  v-if 를 사용할 수 있고 렌더링 결과는 엘리먼트는 포함되지 않음

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

v-else

 v-else 디렉티브를 사용해  v-if 에 대한 “else 블록”을 나타낼 수 있음

<div v-if="Math.random() > 0.5">
    you can see me
</div>
<div v-else>
    you can't see me
<div>

v-else-if

 v-else-if  v-if 에 대한 “else if 블록” 역할, 여러 개 사용 가능

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else-if="type === 'C'">
    C
</div>
<div v-else>
    Not A/B/C
</div>

순서는 v-if > v-else-if > v-else

key를 이용한 재사용 가능한 엘리먼트 제어

Vue는 효율적으로 엘리먼트를 렌더링하려 시도하며, 종종 처음부터 렌더링을 하지 않고 다시 사용함.
아래 예는 사용자가 여로 로그인 유형을 전환할 수 있도록 허용하는 경우

<template v-if="loginType === 'username'">
    <label>사용자 이름</label>
    <input placeholder="이름을 입력하세요">
</template>
<template v-else>
    <label>이메일</label>
    <input placeholder="이메일 주소를 입력하세요">
</template>

위의 코드에서 로그인타입을 바꿔도 원래 작성한 내용은 유지되는데
이때  placeholder 속성 뒤에 key=”username-input”, key=”email-input” 을 각각 적어주면 로그인 유형 변경시 내용도 초기화가 된다

v-show


엘리먼트를 조건부로 표시하기 위한 또 다른 옵션은  v-show 디렉티브이다

<h1 v-show="ok">안녕</h1>

위와같이 사용하며  v-if 와의 차이점은  v-show 가 있는 엘리먼트는 항상 렌더링 되어 DOM에 남아있고, display CSS 속성을 토글해 나타내고 감춤

v-if vs v-show


 v-if 는 조건부 블럭 안의 내용에 따라 제거되고 만들어지고
 v-show 는 우선 렌더링이 되고 CSS 속성으로 감추고 보여줌
따라서  v-if 는 토글 할 때의 비용이 높고,  v-show 는 초기 렌더링 비용이 높으므로
자주 바뀐다면  v-show , 바뀌지 않는다면  v-if 를 권장함

v-if와 v-for


뒤에 나오겠지만  v-if 보다  v-for 이 높은 우선순위를 가지고 있음

클래스와 스타일 바인딩(Class and Style Bindings)

데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용되며  v-bind  로 처리함


HTML 클래스 바인딩하기(HTML Class Bindings)


객체 구문

클래스를 동적으로 토글하기 위해  v-bind:class 에 객체 전달

<div class="static" v-bind:class="{ active : isActive }"></div>
data: {
    isActive: true
}

위의 코드에서 볼수있다시피 일반  class  속성과  v-bind:class 를 같이 쓸수 있으며
이때 data는 참 속성으로 active에 렌더링되어 아래와 같은 코드가 된다

<div class="static active"></div>

객체를 반환하는 계산된 속성(computed)에도 바인딩 할 수 있으며, 이것이 일반적이며 가장 강력한 방법이다.

//HTML
<div v-bind:class="classObject"></div>

//JavaScript
data: {
    isActive: true,
    error: null
},
    computed: {
    classObject: function() {
        return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal',
            }
        }
    }

위의 예제 코드에서 computed > classObject의 함수 안에서 계산 후 반환값으로  active 와  ‘text-danger’ 값을 정하고 HTML의  v-bind:class 에 전해주면 렌더링되어 원하는 결과를 얻을 수 있다.

배열 구문

v-bind:class=”[ ]” 와같이 배열로 담을 수 잇고 이때는  data 에 참, 거짓 속성이 아닌 원하는 클래스명의 이름을 적어주면 그대로 렌더링 되어 결과로 나타남. 아래의 예제로 이해를 해보자

//HTML
<div v-bind:class="[activeClass, errorClass]"></div>

//JavaScript
data: {
    activeClass: 'active',
    errorClass: 'text-danger'
}
<div class="active text-danger"></div>

또한 조건부 토글도 가능하며 이는 삼항 연산자를 사용함

<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[isActive && activeClass, errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">

이런식으로도 줄여서 작성이 가능하다고 함
위에서  isActive 가 참이면  active 클래스가 적용되고, 거짓이면  error 클래스가 적용됨

컴포넌트(Component)와 함께 사용하는 방법

-컴포넌트란?
기본 HTML 엘리먼트를 확장해 재사용 가능한 코드를 캡슐화 하는데 사용

컴포넌트를 어떤식으로 생성을 하나보면

Vue.component('my-component', {
    template: '<p class="foo var">Hi</p>'
})

이렇게 컴포넌트를 정의를 하면 HTML에서 작성할 수 있음

<my-component class="baz boo"></my-component>

위와 같이 작성을 하면 렌더링 되어 아래 코드로 나타남

<p class="foo bar baz boo">Hi</p>

클래스 바인딩도 동일함

<my-component v-bind:class=" { active: isActive }"></my-component>

여기서  isActive 가 참일 때 렌더링 된 HTML은 아래 코드와 같다

<p class="foo bar active">Hi</p>

인라인 스타일 바인딩


객체 구문

 v-bind:style 객체 구문은 CSS 처럼 보이지만 JavaScript 객체이다
속성 이름에는 camelCasekebab-case를 사용해야함
camelCase는 들어봤는데 kebab-case는 처음 들어봐서 검색을 해봄

-camelCase에서 대문자 대신에 소문자로 고치고 - 를 붙인다
camelCase => ‘camel-case’
이때 kebab-case를 사용하려면 따옴표를 함께 사용해야 함

<div v-bind:style=" { color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
    activeColor: 'red',
    fontSize: 30
}

배열 구문

 v-bind:style 에 대한 배열 구문은 같은 스타일의 엘리먼트에 여러 개의 스타일 객체를 사용 할 수 있음

<div v-bind:style="[baseStyles, overridingStyles]">

자동 접두사

 v-bind:style 에 브라우저 벤더 접두어(ex: -webkit-, -moz- 등등)가 필요한 CSS 속성을 사용하면 Vue는 자동으로 해당 접두어를 감지해 스타일을 적용함

계산된 속성과 감시자

계산된 속성(Computed Properties)



템플릿 내의 표현식은 단순한 연산에만 사용해야함
복잡해지면 유지보수가 어려워짐

예제

//HTML
<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>뒤집히도록 계산된 메시지: "{{ reversedMessage }}"</p>
</div>
//JavaScript
var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      // `this` 는 vm 인스턴스를 가리킵니다.
      return this.message.split('').reverse().join('')
    }
  }
})

결과
원본 메시지: “안녕하세요” => “요세하녕안”
이때 계산된 속성  reversedMessage 를 선언
return 뒤의 제공되는 함수는  vm.reversedMessage 속성에 대한 getter 함수로 사용

이 때 getter 함수란 값을 반환하기 위해 사용되는 함수
setter 함수란 값을 입력하기 위해 사용되는 함수이다.

계산된 캐싱(Computed Caching) vs 메소드(Methods)

계산된 속성 대신 methods로 정의 가능, 두가지의 접근 방식은 서로 동일함
이때 차이점은 계산된 속성은 종속성에 따라 캐시된다
무슨말인지 알아보면
계산된 속성(computed)은 종속성 중 일부가 변경된 경우에만 다시 계산
위의 예에서  message 가 변경되지 않는 한,  reversedMessage 에 대한 다중 접근은 함수를 다시 수행할 필요 없이 이전에 계산된 결과를 즉시 반환함
만약 computed 안에 실시간으로 날짜를 나타내는 함수  Date.now() 를 넣는다면 업데이트 되지 않음!
하지만 methods 호출은 렌더링 할 때마다 항상 호출

-캐싱이 필요한 이유는?
캐싱하지 않으면 시간이 많이 소요되는 A 속성이 getter를 필요한 것보다 더 > 많이 실행하게 되어 불필요한 작업을 실행함.
따라서 캐싱이 필요하지 않을때는 methods를 사용

계산된 속성(Computed) vs 감시된 속성(Watched)

<div id="demo"> {{ fullName }} </div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

위의 코드를 보면  firstName 과  lastName 의 코드가 중복되므로 효율적이지 못함
이때는 computed를 이용한다면 아래와 같이 한줄로 작성 가능해짐

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

계산된 Setter

computed는 기본적으로 getter만 가지고 있지만 필요한 경우 setter를 제공함

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

 vm.fullName = ‘take u’ 를 실행하면 set 의  firstName 과  lastName 이 재설정되며 get에의해 새로 출력됨

감시자(Watchers)



대부분은 computed가 더 적합하지만 일부는  watch 가 필요한 경우가 있음
데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행할 때 사용

<div id="watch-example">
  <p>
    yes/no 질문을 물어보세요:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 이미 Ajax 라이브러리의 풍부한 생태계와 범용 유틸리티 메소드 컬렉션이 있기 떄문에, -->
<!-- Vue 코어는 다시 만들지 않아 작게 유지됩니다. -->
<!-- 이것은 또한 당신이 사용하기 친숙할 것을 선택할 수 있는 자유를 줍니다. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: '질문을 하기 전까지는 대답할 수 없습니다.'
  },
  watch: {
    // 질문이 변경될 때 마다 이 기능이 실행됩니다.
    question: function (newQuestion) {
      this.answer = '입력을 기다리는 중...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce는 lodash가 제공하는 기능으로
    // 특히 시간이 많이 소요되는 작업을 실행할 수 있는 빈도를 제한합니다.
    // 이 경우, 우리는 yesno.wtf/api 에 액세스 하는 빈도를 제한하고,
    // 사용자가 ajax요청을 하기 전에 타이핑을 완전히 마칠 때까지 기다리길 바랍니다.
    // _.debounce 함수(또는 이와 유사한 _.throttle)에 대한
    // 자세한 내용을 보려면 https://lodash.com/docs#debounce 를 방문하세요.
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = '질문에는 일반적으로 물음표가 포함 됩니다. ;-)'
          return
        }
        this.answer = '생각중...'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = '에러! API 요청에 오류가 있습니다. ' + error
          })
      },
      // 사용자가 입력을 기다리는 시간(밀리세컨드) 입니다.
      500
    )
  }
})
</script>

예제 코드인데 결과를 어케띄우는지 모르겠당..
궁금하다면 https://kr.vuejs.org/v2/guide/computed.html#

아무튼 위의 코드에서  watch 의 사용으로
비동기 연산(API)을 수행하고,
우리가 그 연산을 얼마나 자주 수행하는지 제한하고,
최종 응답을 얻을 때까지 중간 상태를 설정

'개발 > Vue.js' 카테고리의 다른 글

6. 조건부 렌더링(v-if, v-else-if, v-else, v-show)  (0) 2017.03.30
5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23

템플릿 문법

Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용

내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일함
반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고
다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있음

#보간법


문자열

바인딩의 가장 기본 형태는 Mustache({{ }})를 사용한 텍스트 보간

<span>메시지: {{ msg }}</span>

원시 HTML

<div v-html="msg"></div>

컨텐츠는 일반 HTML 형식으로 삽입

속성

HTML 내부의 값을 데이터로 하고싶은데
Mustaches는 HTML 속성으로 사용 불가 => v-bind 사용해야함

<img v-bind:src="image.jpg" />
<img :src="image.jpg" /> 
//v-bind생략가능

JavaScript 표현식

Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원함

{{ number + 2 }}
{{ ok ? 'YES' : 'NO }}
<div v-bind:id="'list-+' + id></div>

이때 변수선언이나 조건문을 넣으면 작동하지 않으니 유의할 것

#디렉티브


디렉티브란?

v- 접두사가 있는 특수 속성
디렉티브 속성 즉 v-뒤에 오는 값은 단일 JavaScript 표현식이 됨(v-for예외)

전달인자

일부 디렉티브는 콜론으로 표시되는 “전달인자”를 사용
<a v-bind:href="url"></a>
이때 href는 전달인자로 href속성을 url의 값에 바인드하는 v-bind에게 알려줌

수식어

점으로 표시되는 특수 접미사로 디렉티브를 특별한 방법으로 바인딩할때 사용
나중에 v-on, v-model을 볼때 다시 나오니 그 때 정리할 예정

#필터


일반 텍스트 서식을 적용할 때 사용 가능한 필터를 정의할 수 있음
Mustachesv-bind 두곳에서 사용 가능
파이프( | ) 기호로 표시

{{ message | capitalize }} // message의 내용을 capitalize 하겠다

필터를 통해 데이터 변환을 할 때는 계산된 속성을 사용해야함

여러 필터를 동시에 적용 가능함(체이닝)

{{ message | filterA | filterB }}

필터는 JS함수이므로 전달인자 사용 가능

#약어


v- 접두사는 Vue 특정 속성을 식별하기 위해 사용
가장 많이 쓰이는 v-bindv-on에 대해 특별한 약어 제공

v-bind약어

<a v-bind:href="url"></a>
<a :href="url"></a> // v-bind 생략가능

v-on약어

<a v-on:click="do"></a>
<a @click="do"></a> // v-on: 대신 @사용 가능


'개발 > Vue.js' 카테고리의 다른 글

5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

Vue 인스턴스


모든 Vue vm(ViewModel)은 Vue라는 생성자 함수로 만들게 된다.

var vm = new Vue({
    // 옵션
})

Vue 생성자는 미리 정의 된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장 가능

컴포넌트란?

  • Vue의 가장 강력한 기능중 하나
  • 기본 HTML엘리먼트를 확장해 재사용이 가능한 코드를 캡슐화하는데 사용

나중에 컴포넌트에 대한 부분은 다시 나오니 그 때 자세히 알아보자

그러면 위에서 나온 인스턴스의 정의가 뭔가하고 찾아봤는데
자바(한번도 안해봄)에서 객체, 인스턴스 개념이 있다고 해서 읽어보니
Vue에서 사용되는 용어와 비슷하다 생각이 되어 적어봄

인스턴스(instance)란?
- 먼저 인스턴스를 설명하기 위해서는 객체가 무엇인지 먼저 알아야만 가능하다.
- 인스턴스는 객체를 생성하기 위해 만들어진 또 다른 객체를 바로 인스턴스(instance)라고 부른다
-인스턴스를 만들기 위해서는 객체지향에서 말하는 클래스(Class)가 필요하다.

  • 클래스는 객체지향언어에서 가장 중요한 부분 중 하나라 다른 객체를 만드는 틀이라고 생각하면된다.
  • 자바스크립트는 객체지향언어이지만 클래스가 아닌 프로토타입 방식의 객체지향언어이다.
  • 인스턴스를 만드는 방법은 다르지만 인스턴스를 만든다는 것은 동일하다.

    이렇게 만들어진 인스턴스는 어떤 특징을 가지고 있을까?

  • 가장 기본적으로 원래의 객체가 가지고 있는 프로퍼티(property)와 메소드(method)를 상속받는다.

상속(inheritence)
- 객체지향에서 가장 중요한 부분이 상속이다. 상속을 통해 객체가 가지고 있는 프로퍼티와 메소드를 인스턴스에서도 동일하게 사용이 가능
- 인스턴스는 기존 객체에서 확장돼 다른 개별 속성들을 가질 수도 있을 것이다.

// 객체를 만들기 위한 생성자함수(Class)를 생성함
Shirt = function(color) {
   this.color = color;
}


var Shirt1 = new Shirt('Yellow');
// 위 과정을 통해 Shirt1이란 인스턴스가 생성됨

var Shirt2 = new Shirt('white');
var Shirt3 = new Shirt('blue');
...
// 수 많은 인스턴스를 생성할 수 있음

위의 예제로 개념을 이해하는데 큰 도움이 된 것 같다!

그럼 Vue에서 위의 개념을 적용시켜 컴포넌트 생성자와 인스턴스를 설명한 코드를 보면 다음과 같다.

var MyComponent = Vue.extend({
  // 옵션 확장
})

// `MyComponent`의 모든 인스턴스는
// 미리 정의된 확장 옵션과 함께 생성됩니다.
var myComponentInstance = new MyComponent()

속성과 메소드

각 Vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리한다.

여기서 프록시란?
내가 이해한 바로는 속성을 받아와서 그대로 쓸수있게 해준다는 의미같다.

아래 코드로 이해해보자

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 속성 설정은 원본 데이터에도 영향을 미칩니다.
vm.a = 2
data.a // -> 2

// ... 당연하게도
data.a = 3
vm.a // -> 3

이러한 프록시 속성은 반응형인데 나중에 다시 나온다고한다.

이때 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성, 메소드 를 제공하는데 이는 접두사 $ 를 붙여 사용한다고 한다

아래 코드로 이해해보자

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch 는 인스턴스 메소드로 data에 따로 정의되지 않은 메소드
vm.$watch('a', function (newVal, oldVal) {
  // `vm.a`가 변경되면 호출
})

인스턴스 속성이나 콜백에서 화살표 함수(Arrow function) 사용하면 안됨
잘못된 예 - vm.$watch(‘a’, newVal => this.myMethod())
화살표 함수는 부모 컨텍스트에 바인딩 되어 있으므로 this는 Vue 인스턴스가 아니며
this. myMethod 는 정의되지 않는다.

인스턴스 라이프사이클 훅

  • Vue 인스턴스가 하는일
    1. 데이터 관찰 설정
    2. 템플릿 컴파일
    3. 인스턴스를 DOM에 마운트
    4. 데이터가 변경될 때, DOM을 업데이트해야 할 때 초기화 단계를 거침

이때 라이프사이클 훅이 호출!

 var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 는 vm 인스턴스를 가리킵니다.
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

위의 코드로 이해해 보자
위에서 created 훅은 인스턴스 생성 후 호출

아래는 Vue.js의 라이프사이클이다

인스턴스에 대한 정의 끝!

사실 막 와닿진 않지만 뒤로 넘어가면서 쭉 보면 알듯 싶음

'개발 > Vue.js' 카테고리의 다른 글

5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

먼저 Vue.js에 대해 전반적으로 살펴보자

우선 Vue.js를 사용하기 위해서는 아래 코드를 html문서에 삽입해주면 끝!

<script src="https://unpkg.com/vue"></script>

Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링 하는것!

//HTML
<div id="app">
  {{ message }}
</div>
//JavaScript
var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

코드를 하나씩 살펴보면서 이해를 도와보자
{{ }} 는 데이터의 내용이 렌더링 되어 HTML 문서에 표현되기 위해 작성해주며
el은 element의 약자로 HTML 엘리먼트를 선택해주고
data 안에는 HTML문서의 {{ }}안에 작성된 변수(message)를 정의해 이를 HTML에 렌더링 시켜주며
이는 콘솔창에서 app.message = “”로 변경이 가능

이것이 가장 기초적인 Vue.js의 문법이며 앞으로 엄청 많은것들을 익힐 예정임!


자료 참고는 Vue.js 2.0 공식사이트 [https://kr.vuejs.org] 이며
공식 사이트 문서를 토대로 정리를 할 것이고,
혹시 이 글을 보시면서 정보가 부족하다 느끼시는 분들은 공식 사이트에서 해답을 얻으시면 좋을 것 같습니다.

'개발 > Vue.js' 카테고리의 다른 글

5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

jQuery 효과


작성방법 $("선택자").click(function(){ $("선택자").메소드;});

콜백함수는 앞의 함수가 끝나면 실행


jQuery 효과(effects)


숨기기 hide(speed, callback)

보여주기 show(speed, callback)

토글 toggle()


페이드인 fadeIn(speed,callback)

페이드아웃 fadeOut(speed,callback)

페이드토글 fadeToggle(speed,callback)

페이드투 fadeTo("slow", 0.7) 0.7은 투명도를 나타냄

속도는 "slow","1000" 등으로 표현


슬라이드다운 slideDown(speed,callback)

슬라이드업 slideUp(speed,callback)

슬라이드토글 slideToggle(speed,callback)


애니메이션 animate{( left: '250px', opacity:'0.5' height:'150px' width: '150px'}) 절대값

height: '+=150px' width: '+=150px'  상대값

height: 'toggle' 지정된 값 사용

애니메이션을 연속적으로 처리하는 큐기능


정지 stop(stopAll, goToEnd) 삭제여부지정

stopAll,goToEnd 둘다 기본값은 false


메소드 체인

연속으로 메소드를 쓰는

줄바꿈 가능


jQuery HTML


DOM = Document Object Model

HTML 및 XML 문서에 엑세스하기위한 표준 정의

text() html() val() 로 표현가능

attr(속성값, 변경)  속성값 가져올 때 사용


Element추가

append() html 끝부분에 내용 삽입

prepend() html  앞부분에 내용 삽입

after() 요소 뒤에 내용 삽입

before() 요소 전에 내용 삽입


remove() 선택된 요소 전체 삭제

empty() 선택된 요소의 자식요소 삭제


jQuery CSS

addClass() 다른 요소에 클래스 속성 추가 ex).addClass("important blue")

removeClass() 다른 요소에 클래스 속성 제거 ex).removeClass("blue important")

toggleClass() 클래스 속성 추가/제거 전환


css("background-color") 배경 색 반환

css("propertyname", "value") css속성 설정

css({"propertyname": "value", "propertyname": "value"}) 여러개의 css속성 설정

width() 폭 반환 / height() 높이 반환, 변경은 ()안에 변경값 입력

innerWidth() 패딩 포함 폭 반환 / innerHeight() 패딩 포함 높이 반환

outerWidth() 패딩,테두리 포함 폭 반환 / outerHeight() 패딩,테두리 포함 높이 반환(true)입력해야함


jQuery Traversing


parent() 선택 요소의 직접적인 부모 요소 반환 ex)$("span").parent

parents() 루트 요소까지 선택된 요소의 모든 상위 요소 반환 ex)$("span").parents("ul") span의 부모요소중 ul 반환

parentsUntil() 주어진 두 인자 사이의 모든 상위 요소 반환 ex)$("span").parentsUntil("div")


children() 선택 요소의 자식 요소 반환

find() find안의 요소 반환 ( "*" 입력시 모든 자식 요소 반환)


siblings() 형제 요소 반환 ex)$("h2").siblings("p") h2의 형제 요소중 <p>반환

next() 선택 요소 다음 형제 요소 반환 (<=>prev())

nextAll() 선택 요소 다음 형제 모두 반환 (<=>prevAll())

nextUntil() 선택요소 사이의 요소 모두 반환 (<=>prevUntil())


first() 첫 번째 요소 선택

last() 마지막 요소 선택

eq(1) 인덱스 번호 선택

not(".intro") intro 제외하고 선택


jQuery AJAX 

load() 

syntax: $(selector).load(URL,data,callback);


다른 프레임워크와 혼용시 $대신 jQuery작성

$.noConflict() 작성 뒤 사용

변수에 담을 수 있음 ex)var jq= $.noConflict()





JavaScript의 위치

<script>태그 사이에 위치 <head>, <body> 둘다 위치 가능


JavaScript Output

Window.alert() 경고창

documnet.write() HTML출력 (테스트용) HTML로드 후 작성시 기존 문서 삭제

innerHTML HTML출력 요소로 작성 document.getElementById(ID)를 사용해 HTML에 접근

console.log() 브라우저 콘솔에 작성


JavaScript 문법(Syntax)

세미콜론(;)으로 구문 구별/ 텍스트는 " 또는 ' 안에 작성

변수는 var로 선언 ex) var x = 2;

주석은 //(한줄) /* */(여러줄) 로 작성

대소문자 구별하여 사용

첫 번째 문자는 문자, _, $ 세가지만 가능/ 예약어 사용 불가

camelCase 사용


JavaScript 키워드(keyword)

continue 루프 시작

debugger 디버깅 실행

do ...while 조건문이 참일때 실행,반복

for 조건문이 참인 조건 설정

function 함수 선언

if ...else 조건문 선언

return 함수 반환

switch 조건이 맞지 않을때 case 변환 break 스위치,루프 종료

try ... catch try에서 맞는 조건을 catch해서 실행


JavaScript 변수 (variable)

var 변수 선언 ( =는 할당연산자 == 동등연산자)

한번에 여러개 변수 설정 가능

ex) var a =1, b=2, c=3;

왼쪽에서 오른쪽으로 명령 수행

ex)

var x = "A" + 16 +4 => A164

var x = 16+ 4 +"A" => 20A 

배열로 변수 선언 가능

ex) var A = ["a", "b", "c"]


JavaScript 함수 (function)

function(변수1, 변수2) { return : code }

함수 호출 방법

event( ex)버튼 클릭) / call / 자동

변수 선언 > 함수 실행 > return 에의해 반환


JavaScript 객체 (object)

속성(properties) 선언 중괄호 사용

ex) var person = { a:"babo", b="jjindda", c="pig"};

빈 값은 null 사용

objectName.methodName() 로 액세스


JavaScript Scope

함수 안에 var 선언시 function에서만 사용 가능 (local변수)

함수 밖에 선언시 전체에서 사용 가능 (global 변수)

함수 안에 var없이 선언해도 전체에서 사용 가능 (권장x)


JavaScript 이벤트 (event)

onchange 변경되었을 때

onclick 클릭했을 때

onmouseover 마우스를 올렸을 때

onmouseout 마우스를 다른곳으로 옮겼을 때

onkeydown 키보드키를 눌렀을 때

onload 페이지로드완료


JavaScript 문자열 (strings)

"" 내에 "작성시 \"로 작성

.length 문자열 길이 반환

.indexOf("a") a의 첫번째 시작 지점 반환

.lastIndexOf("a") a의 마지막 시작 지점 반환

 문자열 추출 방법 

slice(start, end) 시작,종료 위치에서 추출

substring(start, end)  두 사이의 내용 나머지 삭제

substr(start, length) 뒤에서부터 카운트, 삭제


.replace( a, b) a를 b로 교체

.toUpperCase() 대문자로 변환

.toLowerCase() 소문자로 변환

.concat(a, b) 두가지 이상 문자열을 결합

.charAt(0) 0번째 문자열 반환

.charCodeAt(0) 0번째 유니코드 반환

str[0] 0번째를 문자열에 액세스 (권장x)

.split(" ") " "안의 것으로 변환


JavaScript 숫자 (numbers)

숫자는 64비트 값(0~51) 멱지수 (52~62) 기호 (63)

지수표기x시 15자리까지 정확한 것으로 간주

0x로 시작하는경우 16진수로 해석 ex) 0xFF = 255


.toString() 문자열로 숫자를 반환

.toExponential(숫자) 반올림 지수 표기법을 사용하여 작성된 숫자로, 문자열을 반환

.toFixed(숫자)  소숫점을 숫자만큼 문자열로 반환

toPrecision(숫자) 지정된 숫자의 길이만큼 문자열 반환

valueOf() 숫자로 순자를 반환


변수를 숫자로 반환하는법

Number()

parseInt() 문자열을 분석해 정수를 반환, 공백 허용/ 첫 번째 숫자 반환

parseFloat() 문자열을 분석해 수를 반환, 공백 허용/ 첫 번째 숫자 반환


속성

.MAX_VALUE 표현가능한 최댓값 반환

.MIN_VALUE 표현가능한 최솟값 반환

.NEGATIVE_INFINITY 음의무한대 반환

.NAN Not-a-Number 반환

.POSITIVE_INFINITY 무한대 반환


JavaScript 수학 개체(Math Object)

Math.round(a) 가까운 정수로 반올림 반환

Math.pow(a,b) a^b 반환

Math.sqrt(a) 루트a 반환

Math.abs(a) 양수값 반환

Math.ceil(a) 올림

Math.floor(a) 내림

Math.sin() sin값 반환

Math.cos() cos값 반환

Math.min(a, b, c, d) 최솟값 반환

Math.max(a, b, c, d) 최댓값 반환

Math.random() 임의의 수 반환 0에서1사이(0포함)


JavaScript 날짜(date)

.toString() 문자열로 날짜 반환

.toUTCString() UTC문자열로 날짜 반환

.toDataString() 읽기쉬운 형식으로 날짜 변환

시간지정x시 브라우저시간 


JavaScript 배열(array)

배열 만드는 법 var x = [a, b, c] / var x = new Array(a, b, c)  여기서 x[0] = a

x.length 배열의 길이

x.push 배열에 삽입

xtypeof 사용으로 배열 확인

x.toString로 배열을 문자열로 반환

x.join(" * ") 구분기호를 포함해 배열 반환

x.pop 배열의 마지막 요소 제거

x.shift 배열의 첫번째 요소 제거

x.unshift 배열의 첫번째에 요소 추가

x[x.length] ="d"; 배열x에 d 요소 추가

delete x[0] 첫번째 요소 삭제

x.splice(2, 0, "a", "b") 시작점,삭제할 배열 수, 추가할 배열

a.concat(b) a와b배열을 연결

x.slice(1) 두번째 배열부터 표시

.sort(function(a, b){return b-a}); 내림차순

.sort(function(a, b){return a-b}); 오름차순


JavaScript 조건문(if ...else)

if문 if (condition) { if condition is true/code }

else문 if문이 거짓일 때 실행

if a{ } elseif { } else{ };


switch문 case중 일치하면 선택 불일치시 break, 다음case 체크

ex) switch(x) { case a:~ break, case b:~ break, default:~ }


JavaScript 디버깅 (debugging)

디버거 창에서 자바스크립트 표시 console.log() 사용

debugger; 사용시 다음코드 실행 중지




+ Recent posts