피곤할때, 졸릴때 잠깨는법! 어렵지 않아요.

치열하고 바쁜 라이프 스타일을 가진 한국인이라면 누구나 만성피로를 어깨에 달고 다니기 마련입니다. 아침에 학교나 직장에서도 잠이 안깨서 고생하는 분들도 많죠? 밤 늦게 시험공부나 일을 하려고 하면 어김없이 눈꺼풀이 무거워지는 분들도 많을 겁니다.

졸릴때 잠깨는 방법으로 커피나 에너지 드링크를 다량 흡수하는 경우가 많죠? 물론 이 때는 "간 때문이야~ 간 때문이야!" 라며 노래를 불러야 제 맛입니다.^^ 요즘은 봉봉 드링크라고 해서 각종 에너지 음료를 섞어서 직접 제조하는 학생들이 많은데요.(인터넷에 각종 봉봉 드링크 제조법이라고 올라오는데 다소 위험해 보입니다.) 카페인 & 타우린 성분의 음료 보다는 간단한 조치와 지압으로 잠깨는 법을 소개 합니다.

인터넷 서핑을 하다보니 WonderHowTo에 유미 사쿠가와 씨가 만화로 잠깨는법 16가지를 소개했는데요. 누구나 쉽게 따라할 수 있는 내용들입니다. 책상 앞에 써붙여서 놓거나 만화를 출력해 놓은 뒤, 잠이 올 때 이것저것 따라해보면 좋겠습니다.^^

졸릴때 잠깨는 방법 16가지

- 일반적인 방법

• 30분에서 60분 마다 간단한 운동하기.
• 밝은 빛에 많이 노출될 것. (가능한 햇빛이 좋음)
• 물을 많이 마실것! 탈수는 피로를 야기하기 때문 (화장실을 자주가는 것도 잠을 깨우는 행동중 하나^^)
• 빠른 리듬의 음악을 들을 것.

- 음식 섭취

• 2~3시간 마다 고단백 음식(계란, 아몬드), 과일, 야채를 간단히 섭취할 것.
• 꼭 필요하다면 커피를 마실 것.(너무 많이는 마시지 말것)
• 고칼로리 음식을 많이 먹지 말 것.
• 아침을 거르지 말것.
• 에너지 음료를 많이 마시지 말 것 (모든 탄수화물 종류는 그다지 좋지 않음)

출처: http://www.kuccblog.net/797 [컥군의 날로먹는 지식]

“어리석은 자의 특징은 잘못을 반복하고 후회는 짧다는 점이다.”
– 키케로

로마의 뛰어난 웅변가이자 정치가인 키케로는 인간이 하기 쉬운 6가지 실수를 꼽으며 훌륭한 사람의 성품과 자세를 역설했다. 이 6가지 안에는 자신에 대한 수양, 타인과의 관계, 삶의 방향성을 모두 아우르는 좋은 지침이 있으니 늘 곁에 두고 조심할 가치가 있다.

1. 남을 밟고 일어서야 한다는 착각
우리는 대체로 경쟁에서 살아남은 사람만 한정된 자원을 얻을 수 있다는 편견이 있다. 실제로 일자리를 비롯해 수많은 재화는 이겨야 취득하는 형태를 띤다. 하지만 그게 꼭 남을 공격해야 한다는 의미는 아니다. 경쟁에 앞서 협력을 통해 파이를 키우려는 시도, 서로 윈-윈 할 수 있다는 관점이 있어야 한다. 인생은 꼭 남을 이겨야 하는 게임이 아니다.

2. 바꿀 수 없는 것에 대한 걱정
노먼 빈센트 필 박사는 한 연구 기관의 조사를 인용하며 인생의 96%는 쓸데없는 걱정이라 했다. 근심의 40%는 절대 일어나지 않을 일에 대한 걱정이고 30%는 이미 지나간 일에 대한 걱정이며 22%는 일어나 봐야 별 의미 없는 사소한 것, 4%는 천재지변 등 어쩔 도리 없는 것이며 우리가 실제로 바꿀 수 있는 의미 있는 건 겨우 4%에 불과하다고 한다.

3. 이룰 수 없다고 미리 포기하는 태도
안 해서 못 하는 것이지 못 해서 안 하는 게 아니다. 태어날 때부터 잘하는 사람 없다. 누군가 했다면 나도 할 수 있다. 아무도 못 했어도 내가 해 보겠다는 자세가 중요하다. 이건 도전 정신에 관한 얘기가 아니다. 인생을 진지하게 사는 이라면 누구나 갖춰야 할 마음가짐에 관한 얘기다. 뭐든 무기력하게 시도조차 안 하는 사람이 성취할 수 있는 건 없다.

4. 자신의 방식을 남에게 강요하는 고집
분란을 일으키는 성품이다. 100명이 있으면 100가지 생각과 삶이 있다. 내가 옳다고 남에게 맞는 건 아니다. 설령 맞는 말이라 할지라도 남이 원하지 않으면 강요할 필요 없다. 공리에 가까운 어떤 진리나 보편타당한 상식이 아니라면 고집부릴 일이 아니다. 답답하더라도 타인의 생각을 존중하는 태도를 훈련해라. 그게 대인관계의 기본이자 시작이다.

5. 끝없이 욕망하는 탐욕
심리학자 카너먼과 동료들은 미국에서 4만 명을 대상으로 대규모 조사를 한 결과 연 4~5만 달러 소득 수준을 기점으로 ‘돈이 행복감’에 미치는 영향은 서서히 줄다가 7만 달러쯤에서 멈춘다는 걸 알아냈다. 돈이 끝없이 있어야 행복하다면 그건 밑 빠진 독에 물 붓기다. 일정 수준 이상의 소득부터는 돈에서 행복을 찾을 게 아니라 자기 안에서 행복을 찾아야 한다.

6. 자기계발을 게을리하는 습관
자기계발이 무의미하다고 하는 이들이 삶을 어떤 태도로 사는지 지켜봐라. 그들이 세상에 어떤 가치 있는 일을 하는지도. 자기 수양에 게으른 이들은 대체로 무기력하고 부정적이다. 이들에게 생산적인 걸 기대하기 어렵다. 세상은 긍정적인 태도로 가치 있는 일에 도전하는 사람들이 바꾸는 것이지 방만하게 사는 사람들이 바꾸는 게 아니다. 항상 정진하는 습관은 매우 중요하다.

출처: http://moneyman.kr/archives/2826

클래스와 스타일 바인딩(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 객체이다
속성 이름에는 camelCase와 kebab-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는 렌더링 된 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을 볼때 다시 나오니 그 때 정리할 예정

#필터

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

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

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

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

{{ message | filterA | filterB }}

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

#약어

v- 접두사는 Vue 특정 속성을 식별하기 위해 사용
가장 많이 쓰이는 v-bind와 v-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 인스턴스

모든 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에 대해 전반적으로 살펴보자

우선 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에 대해서 포스팅하면서 공부해 보려고 한다

Angular2, React, Vue 세가지 중 가장 끌렸던게 Vue.js였기 때문에

그냥 읽는 것만으로는 이해에 한계가 있어 직접 남기면서 익혀보려 함.

공식 홈페이지 문서는 다음과 같다  https://kr.vuejs.org/ 

영어를 잘하시는분들이 번역을 전부 해놔서 영어를 못하는 나도 한글로 읽을수 있다!

사실 그냥 재밌어보여서 시작하는 것..

말을 잘 못해서 길게 쓸 말이 떠오르진 않고 Vue.js 중간에 안놓고 끝까지 할 수 있도록 해야겠다 !

보기쉽게 쓰기보다 공부한 내용을 혼자 정리하는 느낌이라 혹시라도 보시는 분들은 불편하실수도 있을 것 같지만

최대한 깔끔하게 정리해보려 함!