알고리즘을 좋아하는 나

이산은 연속성이 전혀 없는 분리된 상태를 말한다.

실수와 같이 연속적인 성질을 가진 값에 대해 공부하는 학문이 아니라 

정수와 같이 분리된 값에 대해 공부하는 학문이다.

컴퓨터는 0과 1의 분리된 값으로 모든 데이터를 표현하고 연산 및 처리한다.

이산수학의 필요성

컴퓨터의 설계부터 입력 처리, 결과 출력까지 모든 과정을 이해하는데 기본이 된다.

변수 선언조차 수학적 개념이 포함됐다.

응답과 요청으로 웹 페이지를 관리가 가능하다.

request 객체에는

• method 클라이언트의 요청 방식
• url 클라이언트가 요청한 url
• headers 요청 메시지 헤더
• trailers요청 메시지 트레일러
• httpVersion HTTP 프로토콜 버전
  
  

express 모듈을 사용하지 않아도 어떤식으로 웹이 돌아가는지 알 수 있었다.

logxy=z

x를 y로만들려면 z번 제곱해야된다.

O(1): 상수형-빅오: 데이터 수에 상관없이 연산횟수가 고정

O(logn): 로그형 빅-오: 데이터 수의 증가율에 비해서 연산횟수가 가장 적음.

O(n): 선형-빅오: 데이터 수와 연산 횟수가 비례함

O(nlogn): 선형로그형 빅-오: n * logn

O(n제곱): 데이터 수의 제곱에 해당하는 연산횟수를 요구하는 알고리즘

O(n3제곱): 데이터 수의 세 제곱 연산

O(2n제곱): 지수형 빅-오: 사용하기에 매우 무리가 있다.

재귀함수: 자기 자신을 호출하는 함수

재귀함수

함수 내에서 자기 자신을 다시 호출하는 함수

프로그램이란?

프로그램은 데이터를 표현하고 처리하는 것이다.

자료구조란?

데이터의 표현 및 저장방법

자료구조는 기본적으로 다움과 같이 분류할 수 있다.

선형구조

리스트    

스택

큐

비선형구조

트리

그래프

파일구조

순차파일

색인파일

직접파일

단순구조

정수

실수

문자열

문자

파일도 데이터를 저장하는 도구이기 때문에 자료구조에 포함된다.

선형구조

데이터가 선처럼 쭉 이어져 있다.

비선형구조

데이터가 나란히 있지 않다.

자료구조에 따라 알고리즘은 바뀐다.

알고리즘은 자료구조에 의존적이다.

알고리즘의 성능

시간복잡도

실행 시간

공간복잡도

메모리 사용

best case

운이 좋을때

worst case //거의 이거로 분석한다

운이 안좋을때

계산방법 T(n)=n  

T는 함수, (n)는 자료개수

average case

평균적으로

바이너리

두 조각

Big-Oh Notation 표기법

최고차항

코드 보기

이제 노드를 vs code를 사용해서 개발한다.

확장 프로그램으로VS Code for Node.js - Development Pack , vscode-author-generator

를 깔았다.

node 디벨롭먼트 팩은 개발하기 위해 사용하는 것 같고, author 제너레이터는 제작자랑 그런걸 주석으로 생성하기 위해 깔았다.

npm install eslint -g npm 명령어로 eslint도 깔았다.

이론적 지식이 없이 개발했었는데, 프레임워크 없이 네이티브로 서버 오픈과 이벤트 바인딩등등 여러가지를 했다.

v-if

{{#if ok}}
  <h1>Yes</h1>
{{/if}}

조건문을 다음과 같이 사용이 가능하다.

Vue에서는 

<h1 v-if="ok">Yes</h1>

v-if디렉티브를 사용한다.

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

v-else도 사용이 가능하다.

<template>에 v-if을 갖는 조건부 그룹 만들기

엘리먼트를 묶어서 v-if디렉티브가 사용이 가능합니다.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

최종 렌더링 결과에는 템플릿 엘리먼트는 없습니다.

v-else

<div v-if="Math.random() > 0.5">
  이제 나를 볼 수 있어요
</div>
<div v-else>
  이제는 안보입니다
</div>

v-else-if

2.1에서 추가됐다.

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

key를 이용한 재사용 가능한 엘리먼트 제어

<template v-if="loginType === 'username'">
  <label>사용자 이름</label>
  <input placeholder="사용자 이름을 입력하세요">
</template>
<template v-else>
  <label>이메일</label>
  <input placeholder="이메일 주소를 입력하세요">
</template>

위 코드는 logintype이 바뀌어도 렌더링 결과가 바뀌지 않습니다.

<template v-if="loginType === 'username'">
  <label>사용자 이름</label>
  <input placeholder="사용자 이름을 입력하세요" key="username-input">
</template>
<template v-else>
  <label>이메일</label>
  <input placeholder="이메일 주소를 입력하세요" key="email-input">
</template>

이 코드는 값이 바뀌면 렌더링이 다시 됩니다.

v-show

조건으로 렌더링 하는게 v-show

<h1 v-show="ok">안녕하세요!</h1>

항상 DOM에 남아있고 display를 변경해준다.

v-if vs v-show

v-if는 조건부 블럭 안의 이벤트 리스너와 자식 컴포넌트가 토글하는 동안 적절하게 제거되고 다시 만들어지기 때문에 “진짜” 조건부 렌더링 입니다

v-if는 또한 게으릅니다 초기 렌더링에서 조건이 거짓인 경우 아무것도 하지 않습니다. 조건 블록이 처음으로 참이 될 때 까지 렌더링 되지 않습니다.

비교해보면, v-show는 훨씬 단순합니다. CSS 기반 토글만으로 초기 조건에 관계 없이 엘리먼트가 항상 렌더링 됩니다.

일반적으로 v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 더 높습니다. 매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장합니다.

v-if 와 v-for

v-if와 함께 사용하는 경우, v-for는 v-if보다 높은 우선순위를 갖습니다. 자세한 내용은 리스트 렌더링 가이드를 확인하십시오.

개체

정보의 단위

파일시스템이나 데이터베이스에서 레코드가 개체

클래스의 인스턴스

속성

{

a:a는 속성

b:b도 속성

}

바인딩

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

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

데이터 바인딩

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

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"] }">