알고리즘을 좋아하는 나

바인딩

클래스와 메소드의 연관관계

클래스와 관련된 메소드는 클레스에 메소드를 바인딩 할 수 있다.

데이터 바인딩

뷰 컴포넌트와 모델 사이에서의 데이터를 자동으로 동기화 하는 것이다.

UI와 로직을 연결 (잘 정의돼어 있을 시 데이터 값이 변경되면 자동으로 바인딩된 요소에 값이 반영됨)

데이터 바인딩은 엘리먼트의 class 목록과 인라인 스타일을 변경하기 위해 일반적으로 사용한다

HTML 클래스 바인딩하기

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

클래스를 동적으로 변경하기 위해 v-bind를 사용합니다.

위의 구문은 active 클래스가 isActive의 값에 따라 적용될지 안될지를 판단합니다.

v-bind:class 디렉티브는 일반 클래스class 속성과 사용이 가능합니다.

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

다음과 같이 사용한다.

data: {
  isActive: true,
  hasError: false
}

그러면 div의 클래스는 "static active"가 되는거죠.

바인딩된 객체가 인라인일 필요는 없다.

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

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

계산된 속성도 사용이 가능하다.

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

배열 구문

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

이렇게도 사용이 가능하다.

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

표현식이라 삼향연산자도 사용이 가능하다.

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

배열 구문 내에서 객체도 사용이 가능하다.

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

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

컴포넌트에 class를 추가할경우 root엘리먼트에 클래스가 추가된다.

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

렌더링된 결과

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

클래스 바인딩도 동일하다.

인라인 스타일 바인딩

v-bind:style의 속성은 매우 직관적이다.

css처럼 보일 수 있지만 js 객체다.

camelCase와 kebab-case를 사용해야 됩니다.

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

data: {
  activeColor: 'red',
  fontSize: 30
}

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

스타일 객체에 직접 바인딩해서 사용하는것이 더 편하다.

배열 구문

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

배열 구문이 사용 가능하다.

자동 접두사

벤더 접두어가 필요하면 자동으로 Vue에서 붙여줍니다.

다중 값 제공

2.3.0+

2.3버전 부터 스타일 속성에 접두사가 있는 여러 값을 배열로 전달할 수 있습니다. 예제입니다.

<div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">

코드 보기

작업한 파일 순서는 process.js -> main.js -> querystring.js -> crpyto.js -> fs.js 다

process.js 실행은 node process --exit 시간(밀리세컨드)

이렇게 시작하면 setTimeout이 작동돼 시간만큼 지나면 꺼진다.

그다음은 node main

main.js는 module을 제작하고 불러오는 코드다.

module.js에 exports를 사용해 메소드를 선언한다.

main.js에서 require로 module.js를 추출하고 사용한다.

그다음은 node querystring

웹에서 get으로 전송하면 ?asd6=asd6&asd1=asdt

이런식으로 url의 querystring이 있다 ?와 #사이

이걸 객체로 만들어주는 코드가 작성돼있다.

그다음은 node crpyto

sha256을 사용해서 문자열을 암호화한다.

digest로 해쉬값의 반환 형태를 결정한다.

그다음은 node fs

파일을 비동기로 읽고, 비동기로 쓰고, 동기로 쓴다.