Vue.js 가이드 문서 - 2018년 7월 23일 기준

Vue.js

공부하기...

• Vue.js 를 공부 해 보려고 책을 구매 했는데.. 아직 도착 안했다.
• 그럴줄 알고, 온라인에 한글로 되어 있는 Vue.js 가이드 문서를 출력했다.
• 링크 : https://kr.vuejs.org/v2/guide/installation.html

읽기

설치방법

• https://kr.vuejs.org/v2/guide/installation.html
• 이 챕터에서는 다운로드 받는법이라던지, 패키징을 할 때 어떻게 할 수 있냐? 를 다루고 있다. 그러므로, 단순히 공부만 하려고 하면 이 부분은 그냥 대충 읽어도 될 듯 하다.
• 추후 서버에 올리거나, 제품으로 내 보낼거라면, 이 부분을 나중에 참고하도록 하자.
• Vue.js는 단일 페이지 응용 프로그램을 빠르게 스캐폴딩하기 위한 공식 CLI를 제공합니다.에서 스캐폴딩이라고 나오는데 그게 뭘까?
• 스캐폴딩(Scaffolding)
  • 비계 : 비계(飛階)는 건설, 건축 등 산업현장에서 쓰이는 가설 발판이나 시설물 유지 관리를 위해 사람이나 장비, 자재 등을 올려 작업할 수 있도록 임시로 설치한 가시설물 등을 뜻한다. - 쉽게 말하면 '공사장에서 공사 편하게 지을려고 임시적으로 만든 가설물' https://ko.wikipedia.org/wiki/%EB%B9%84%EA%B3%84_(%EA%B1%B4%EC%84%A4))
  • 데이터베이스의 각 테이블에 대한 웹 페이지를 자동으로 생성하는 Dynamic Data 요소를 말합니다..aspx)
  • 컴퓨터 용어에서 스캐폴딩은 데이터베이스의 각 테이블에 대한 웹 페이지를 자동으로 생성하는 Dynamic Data 요소를 말합니다.
  • 내가 이해하기로는, "응용 프로그램을 쉽게 개발할 수 있도록 무언가를 제공한다" 정도로 이해하면 되지 않을까 한다.

시작하기

시작하기

• <script src="https://cdn.jsdelivr.net/npm/vue"></script>를 보면, 주소의 끝이 vue로만 끝나고 'js' 확장자가 붙지 않는데, 실제로 다운로드 받아 보면 javascript 파일이 다운로드 된다.
  • 심지어 response header에서도 javascript가 전달 된다고 정보가 온다.
  • 

• 영어 문서를 보면, 아래의 내용이 더 있다. 한국어 문서에는 빠져 있는 내용이다. 개발할때는 아래 코드를 쓰는것이 도움이 될 거란다.

  <!-- development version, includes helpful console warnings -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  

선언적 렌더링

• 텍스트 보간 이외에도 다음과 같은 엘리먼트 속성을 바인딩 할 수 있습니다.를 보면 보간이라는게 나온다.

  • 여기서 나오는 보간은 영어로는 interpolation이다. 텍스트 끼워넣어 교체하기 이외에도 다음과 같은 엘리먼트 속성을 바인딩 할 수 있습니다. 정도로 읽으면 될 거다.

컴포넌트를 사용한 작성방법

• v-bind:key="item.id" 부분이 있다.

  • 그 직전의 코드는 v-bind:todo="item"인데, 이 코드의 뜻은 item의 값(속성)을 Component안에서 todo라는 이름으로 사용할 것이라는거다.
  • 그렇다면 v-bind:key="item.id"라는 코드는 item.id를 Component안에서 key라는 이름으로 사용할 것이라고 예상이 된다. 하지만 실제로 key를 출력해 보면 제대로 출력 되지 않는다.
  • v-bind:key는 특별한 의미를 가지고 있기 때문에 원하는대로 처리 되지 않는 듯 하다.
  • 자세한건 뒤에 내용을 보면서 추후 업데이트 하겠다.

Vue 인스턴스

속성과 메소드

• 유념할 점은, data에 있는 속성들은 인스턴스가 생성될때 존재한 것들만 반응형이라는것입니다. 라는 부분
  • 말그대로 Vue 객체를 생성하는 시점에 mapping 된 sturcture에 존재하는 속성들만 연동된다는 말이다.
  • 추후에 data에 속성을 추가해도, 그 값은 연동되지 않는다.
  • 근데, 그 다음 내용을 보면 $data라는 특별한 속성에 대해서 이야기가 나온다.
  • 생각해 보면 Vue 컴포넌트 내부에서 $data의 값을 이용해 연동 시킨다고 생각할 수도 있다. 하지만 주의해야 한다.
  • Vue 객체를 생성할때 mapping된 structure가 $data로 매핑되는것이다. 그렇기 때문에 vm.$data.b = 3와 같이 값을 넣는다고 해도, 추후에 컴포넌트는 만든 이후에 설정된 속성이므로 "연동"되지 않는다.
  • 그러므로 책에서 설명하듯이, 나중에 사용하려고 하는 속성들은 미리 data 의 속성으로 추가해 두어야 한다.
  • 만약 뒤늦게 반응형 속성을 추가하고 싶다면 '객체 변경 감지에 관한 주의사항' 부분을 읽어 보면 Vue.set(...)를 사용할 수 있다는것을 알려 준다.

인스턴스 라이프사이클 훅

• options 속성이나 콜백에 ... 와 같은 화살표 함수 사용을 지양하기 바랍니다. 부분
  • 화살표를 이용한 함수사용시 this 에 대해서 다르게 동작할 수 있다.
  • 일반적인 function() 정의 안에서 this를 사용하면, 해당 function이 호출되는 Context(부모객체?)의 this를 따라가게 된다.
  • 하지만 () => { } 형태 안에서 this를 사용하게 되면, 해당 function을 정의한 Context(부모객체?)의 this를 따라가게 된다.
  • 위 말이 뭔 말인지 잘 모르겠으면 화살표 함수의 링크를 방문하여 읽어보면 된다. 자바스크립트에 대해서 잘 모른다면, 꼭 읽어 보는것이 좋다.

템플릿 문법

보간법(Interpolation)

• 위에서 이야기 했듯이, "끼워 넣어 바꾸기" 정도로 해석하면 된다.
• v-once 디렉티브를 사용하여 데이터 변경시 업데이트 되지 않는 일회성 보간을 수행할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 합니다. 부분
  • 말 그대로, "v-once"로 설정된 tag 하위들은, {{msg}} 의 부분도 업데이트 되지 않는다는 말이다.
  • 한번 출력(?)되고 나면 app.msg="ccc"와 같이 값을 바꾼다고 해도, 업데이트 되지 않는다.
• 실제로 Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원합니다. 부분
  • 쉽게 말하면 {{ msg }} 부분이나 v-bind:disabled="isButtonDisabled" 부분이나, v-bind:id="'list-'+id" 부분이나, v-if='seen', v-bind:href='url' 등 부분에서 값을 넣어 주는 '' 부분의 코드가 실행 되거나, 그 값이 할당 된다고 보면 된다.
    • 예 1 : v-if='seen'라는 코드가 있을때, seen이라는 변수의 값이 false 면, 해당 tag가 실제로 렌더링 되지 않는다.
    • 예 2 : <a v-bind:href='url'>라는 코드가 있을때, url이라는 변수의 값이 href에 할당 되는것으로 생각하면 된다. 예를 들면 <a href="http://naver.com"> 과 같이 변경 될 것이다.

계산된 속성과 감시자

계산된 속성

• 하지만 차이점은 계산된 속성은 종속성에 따라 캐시된다는 것 입니다. 부분
  • 캐시되는 정보는 return value 이다.
  • 즉 해당 함수에서 console.log(..)를 출력한 뒤, return 'aa'라고 정의를 하면, 최초 값을 사용할 때는 console.log(..)가 출력 되지만, 그 이후 다시 해당 값을 사용하면 log가 출력되지 않는다.
  • 
  • 하지만 return value를 만들때, 변수를 사용한다면, 현재의 변수 값을 이용해서 반환된다. 변수 값이 바뀌면, return value 역시 바뀐다는것을 주의해야 한다.
  • 

폼 입력 바인딩

기본 사용법

• 체크박스 설명중에 <label for="checkbox" ...> 부분에 대한 설명

  • 해당 label이 어느 tag와 연관이 있는지 연결해 주는 것이라고 생각하면 된다.
  • 지금은 for="checkbox" 라고 했으므로, 지금 HTML에서 id가 checkbox인 아이와 연관 되는 label이라는 뜻이다. type이 아니라 id가 checkbox인것과 연동된다는거다.

  • 이렇게 해 두면, <input> 위치가 아니라, <label>위치를 클릭해도, <input>을 누른것 처럼 동작하게 연결 할 수 있다.

    수식어

• .lazy 설명 중에 .lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다. 라는 말.

  • v-model은 input text의 값이 변경되면 실시간으로 model 의 값도 같이 변경되도록 되어 있다.
  • change 이벤트는 input text에 값을 입력하는 도중이 아닌, 입력후 다른 곳으로 focus를 옮긴 이후나, 엔터를 입력하는 등의 상황에 발생한다.
  • 그러므로 말 그대로 실시간으로 적용하고 싶지 않은 경우에만 사용하면 된다.

이후 내용들...

• 가이드 문서만 읽기에는 너무 어렵다. 
• 소스들이 등장하기는 하는데, 전체의 소스가 아니라 소스 일부만을 설명이 나오는경우가 있어, 명확하게 파악하기 어려운 경우가 있다. 이후 중요하거나 이해를 꼭 해야 하는 부분만 정리 하도록 한다.
• 나머지는 Do It! Vue.js 입문 책을 구매 했으니, 그 책에서 다시 정리 하던지 하자.