알고리즘을 좋아하는 나

깃허브에 공부한 내용을 업로드했다.

평소에 사용은 할줄 알아도 왜 사용하는지 몰랐던 기능들을 알게 됐다.

req.header('User-Agent);를 이용해서 robot을 접속 막을 수 있음

• Apache Licence를 사용해 github에 오픈소스로 올릴것이다.
• webpack을 사용해야돼서 집에서 작업해야 된다.
• 시간이 별로 없어서 제작기간이 오래걸릴것이다.

기본 사용법

v-model 디렉티브를 사용해서 폼 input과 textarea의 데이터를 바인딩할 수 있습니다.

v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.

IME (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 input 이벤트를 대신 사용하십시오.

<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>

v-model을 사용해 데이터를 바인딩하고 머스터쉬를 사용해서 데이터를 렌더링한다.

텍스트 영역의 보간 (<textarea>{{ text }}</textarea>)은 작동하지 않습니다. 대신 v-model를 사용하십시오.

체크박스

하나의 체크박스는 단일 boolean값을 가진다.

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

여러개의 체크박스는 같은 배열에 바인딩할 수 있다.

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>체크한 이름: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

라디오

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>선택: {{ picked }}</span>

셀렉트

하나의 셀렉트

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>선택함: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

v-model 표현식의 초기 값이 어떤 옵션에도 없으면, <select> 엘리먼트는 “선택없음” 상태로 렌더링됩니다. iOS에서는 이 경우 변경 이벤트가 발생하지 않아 사용자가 첫 번째 항목을 선택할 수 없게됩니다. 따라서 위 예제처럼 사용하지 않는 옵션에 빈 값을 넣는 것이 좋습니다.

ios에서는 select 초기값이 비어있다.

모든 기기에서 똑같이 보이게 빈값을 넣는게 좋은거같다.

다중 셀렉트

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

배열에 바인딩한다.

v-for을 이용한 동적 렌더링

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

값 바인딩하기

라디오, 체크박스, 셀렉트 옵션의 경우 v-model 바인딩 값은 보통 정적 문자열이나 bool값이다.

때로는 동적 값을 사용해야 될 때가 있을것이다.

그럴땐 v-bind를 사용한다.

<!-- `picked` 는 선택시 문자열 "a" 입니다 -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 는 true 또는 false 입니다 -->
<input type="checkbox" v-model="toggle">
<!-- `selected`는 "ABC" 선택시 "abc" 입니다 -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

체크박스

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

// 체크 하면:
vm.toggle === vm.a
// 체크하지 않으면:
vm.toggle === vm.b

라디오

<input type="radio" v-model="pick" v-bind:value="a">

// 체크 하면:
vm.pick === vm.a

셀렉트 옵션

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 선택 하면:
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

수식어

.lazy

v-model은 입력과 함께 동기화 됩니다.

.lazy수식어를 추가해 체인지와 함께 동기화 되게 가능합니다.

<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg" >

.number

<input v-model.number="age" type="number">

숫자로 자동 형변환이 되게하려면 .number 수식어를 사용하면 됩니다.

.trim

자동으로 트림되는 수식어

<input v-model.trim="msg">

v-model 과 컴포넌트

Vue의 컴포넌트에 익숙하지 않으면 지금은 보지 않아도 괜찮습니다.

HTML의 기본 제공 input 유형이 항상 사용자의 요구를 만족시킬 수는 없습니다. 다행히 Vue 컴포넌트를 사용하면 완전히 사용자 정의 된 동작으로 재사용 가능한 input을 만들 수 있습니다. 이 input은 v-model에도 작동합니다! 자세한 컴포넌트 가이드의 사용자 정의 입력을 참조하십시오.

오늘 챕터 03,04의 공부 자료를 깃허브에 업로드했다.

알고리즘 스터디 자료를 준비중에 ADT라는 용어를 접했다.

ADT는 Abstract-Data-Type이다.

말 그대로 추상 자료형.

Wallet이라는 자료형을 선언했다.

그 Wallet을 기반으로 연산의 종류가 있을것이다.

그것도 자료형 정의의 일부다.

자료의 ADT는

기능들이다.

기능들 말고도 구조체의 정의도 넣을 수 있다.

근데 ADT에는 필요한 정보들만 넣는것이 좋다.

리스트

• 순차 리스트
• 연결 리스트

둘의 ADT가 같을 수 있다.

ADT에 표준은 없다.

생각은 모두 자유롭게 할 수있고, 그것을 코드로 옮길 수 있다.

위 둘의 리스트의 공통점은

선형구조다.

이벤트 청취

v-on 디렉티브를 사용해 DOM 이벤트를 듣고 트리거 될 때, JS를 실행한다.

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

메소드 이벤트 핸들러

많은 핸들러의 로직은 복잡하다.

v-on 속성값에 코딩하는것은 비효율 적이다.

v-on으로 메소드를 호출하는게 효율적이다,

<div id="example-2">
  <!-- `greet`는 메소드 이름으로 아래에 정의되어 있습니다 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 메소드는 `methods` 객체 안에 정의합니다
  methods: {
    greet: function (event) {
      // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다
      alert('Hello ' + this.name + '!')
      // `event` 는 네이티브 DOM 이벤트입니다
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

인라인 메소드 핸들러

메소드 이름을 직접 바인딩 하는 대신 인라인 JS구문에 메소드를 사용이 가능하다.

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

때론 인라인 명령문에서 DOM의 이벤트를 접근해야 할 때가 있을 수 있다.

그러면 $event를 사용하면 된다.

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 이제 네이티브 이벤트에 액세스 할 수 있습니다
    if (event) event.preventDefault()
    alert(message)
  }
}

이벤트 수식어

이벤트 내부에서 event.preventDefault() 또는 event.stopPropagation()을 호출하는것은 보편적인 일이다.

메소드 내에서 이 작업을 처리할 수 있지만, v-on이벤트 수식어를 제공한다.

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>
<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>
<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!--  즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>
<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시말해 @click.prevent.self를 사용하면 모든 클릭을 막을 수 있으며 @click.self.prevent는 엘리먼트 자체에 대한 클릭만 방지합니다.

2.1.4에 새로 추가됨

<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다. -->
<a v-on:click.once="doThis"></a>

키 수식어

키보드이벤트를 청취할 때, 종종 키 코드를 확인해서 작업해야될 때가 있다.

v-on수식어를 추가해 쉽게 작업이 가능하다.

<!-- keyCode가 13일 때만 vm.submit()을 호출합니다 -->
<input v-on:keyup.13="submit">

모든 keycode를 제공하지 않고, 일반적으로 많이 사용하는 키를 제공한다.

<!-- 위와 같습니다 -->
<input v-on:keyup.enter="submit">
<!-- 약어 사용도 가능합니다 -->
<input @keyup.enter="submit">

키 수식어 별칭의 전체 목록입니다.

• .enter
• .tab
• .delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
• .esc
• .space
• .up
• .down
• .left
• .right

또한 전역 config.keyCodes 객체를 통해 사용자 지정 키 수식어 별칭을 지정할 수 있습니다.

// v-on:keyup.f1 이 가능합니다
Vue.config.keyCodes.f1 = 112

수식어 키 목록

2.1.0에 새로 추가되었습니다.

다음 수식어를 사용해 해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있습니다.

• .ctrl
• .alt
• .shift
• .meta

참고 : 매킨토시 키보드에서 meta는 command 키 입니다 (⌘). Windows 키보드에서 meta는 windows 키 (⊞) 입니다. Sun Microsystems 키보드에서 meta는 단색의 다이아몬드 (◆)로 표시됩니다. 특정 키보드의 경우, 특히 MIT 및 Lisp 시스템 키보드와 Knight 키보드, space-cadet 키보드와 같은 제품에는 “META” 레이블이 지정됩니다. Symbolics 키보드에서 메타는 “META” 또는 “Meta”로 표시됩니다.

예제:

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

수식어 키는 일반 키와 다르며 keyup 이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 합니다. 즉,keyup.ctrl는 ctrl을 누른 상태에서 키를 놓으면 트리거됩니다. ctrl 키만 놓으면 트리거되지 않습니다.

마우스 버튼 수식어

2.2.0 버전에서 추가됨

• .left
• .right
• .middle

위 수정자는 특정 마우스 버튼에 의해 트리거 된 이벤트로 핸들러를 제한합니다.

왜 HTML로 된 리스너를 사용합니까

이 모든 이벤트 청취 접근 방법이 우려 사항 분리(“separation of concerns”)에 대한 오래된 규칙을 어긴다고 생각할 수 있습니다. 모든 뷰 핸들러 함수와 표현식은 현재 뷰 처리 하는 ViewModel에 엄격히 바인딩 되기 때문에 유지보수가 어렵지 않습니다. 실제로 v-on을 사용하면 몇가지 이점이 있습니다.

1. HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉽습니다.

2. JavaScript에서 이벤트 리스너를 수동으로 연결할 필요가 없으므로 ViewModel 코드는 순수 로직과 DOM이 필요하지 않습니다. 이렇게 하면 테스트가 쉬워집니다.

3. ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거 됩니다. 이벤트 제거에 대한 걱정이 필요 없어집니다.

Node는 npm을 기반으로 모듈을 공유한다.

ejs 설치

npm install ejs --save

jade 설치

npm install jade --save

나는 글로벌 설치를 해서 -g옵션을 사용했다.

const ejs = require('ejs');

const jade = require('jade'); //2016년 상반기에 jade는 pug로 이름이 바꼈다.

ejs

• Control flow with <% %>
• Escaped output with <%= %> (escape function configurable)
• Unescaped raw output with <%- %>
• Newline-trim mode ('newline slurping') with -%> ending tag
• Whitespace-trim mode (slurp all whitespace) for control flow with <%_ _%>
• Custom delimiters (e.g., use <? ?> instead of <% %>)
• Includes
• Client-side support
• Static caching of intermediate JavaScript
• Static caching of templates
• Complies with the Express view system

ejs를 사용하면 html 문법을 사용해서 쉽게 구현이 가능하다.

Jade(Pug)

Pug는 들여쓰기가 중요하다.

html

head

title 타이틀

body

이렇게 안하고

html

head

title 타이틀

body

이렇게 하면 body에 head값들이 들어간다.

깃허브 주소

v-for

v-for 디렉티브를 사용해서 배열을 기반으로 리스트를 렌더링 할 수 있다.

기본 사용방법

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-for 디렉티브는 item in items 의 형태의 문법을 사용합니다.

items는 원본 데이터 배열이고, item은 배열 엘리먼트의 별칭입니다.

결과:

• Foo
• Bar

v-for 블록 안에는 부모속성에 대한 모든 권한이 있다.

v-for은 현재 항목에 대한 인덱스를 2번째 전달인자로 받는다.

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

결과:

• Parent - 0 - Foo
• Parent - 1 - Bar

in 대신 of를 사용도 가능하다.

v-for 템플릿

v-if 처럼 <template>을 사용이 가능하다.

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

객체의 속성도 반복이 가능합니다.

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

결과:

• John
• Doe
• 30

키를 두번째 전달인자로 사용이 가능하다.

<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>

인덱스도 제공이 가능하다.

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

객체를 반복할 때 순서는 Object.keys()의 키 나열 순서에 따라 결정됩니다. 이 순서는 JavaScript 엔진 구현간에 일관적이지는 않습니다.

Range v-for

단순한 for문도 사용이 가능하다.

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

컴포넌트와 v-for

<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0버전 이후로, v-for를 사용할 때 key가 반드시 있어야 합니다.

간단한 할일을 하는 목록을 만드는 예제다.

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

Vue.component('todo-item', {
  template: `
    <li>
      {{ title }}
      <button v-on:click="$emit('remove')">X</button>
    </li>
  `,
  props: ['title']
})
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})

리스트 add하는 작동 순서

input v-model을 사용해 newTodoText값을 바인딩한다.

엔터를 하면 addNewTodo 메소드를 실행한다.

그러면 data속성 todos배열에 push로 값이 추가된다.

그러면 DOM이 업데이트 되면서 li가 출력된다.

v-for와 v-if

같은 노드에서 사용될 때, v-for이 더 높은 우선순위로 실행된다.

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

key

Vue가 각 노드를 재정렬하고, 추적하기 위해 사용한다.

고유값이다.

동적 바인딩을 해야한다. v-bind사용

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

배열 변경 감지

변이 메소드

Vue는 감시중인 배열의 변이 메소드를 래핑해 뷰 갱신을 트리거한다.

래핑된 메소드 리스트

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

example1.items.push({ message: 'Baz' })

이런식으로 사용이 가능하다.

배열 대체

변이된 메소드는 호출된 원본 배열을 변형시킨다.

변형을 하지 않고 새로 생성하는 방법도 있다.

filter(), concat() 와 slice()

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

DOM을 다시 렌더링 하지않고 변경부분만 처리하는거 같다.

주의 사항

JavaScript의 제한으로 인해 Vue는 배열에 대해 다음과 같은 변경 사항을 감지할 수 없습니다.

1. 인덱스로 배열에 있는 항목을 직접 설정하는 경우, 예: vm.items[indexOfItem] = newValue
2. 배열 길이를 수정하는 경우, 예: vm.items.length = newLength

항목을 직접 설정하려면 다음과 같이 사용해야한다.

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

배열 길이를 수정하려면

example1.items.splice(newLength)

필터링 / 정렬 된 결과 표시하기

원본 데이터를 수정하지 않고, 필터링된 결과를 리턴해야 할 경우가 있다.

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

계산된 속성을 사용할 수 없을 경우에는 다음과 같이 사용한다.

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

하한항은 분모와 분자 사이에 1 이외에 공약수가 존재하지 않는 유리수

약분하면 하한항이 된다.

기수는 10진수, 2진수 등과 같이 사용하고 있는 수의 표현 방식