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


로마의 뛰어난 웅변가이자 정치가인 키케로는 인간이 하기 쉬운 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 객체이다
속성 이름에는 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

+ Recent posts