• server.js 작성
• 클라이언트에서 socket.io 설치 및 임포트
• angular service
• angular component

server.js 작성

express 에서 socket.io를 실행하기 위해

express.io를 설치한다.

노드 http 서버와 결합시킬 socket.io에 http를 전달하여 initialize한다.

connection 이벤트가 발생하면 특정 동작을 한다.

io.emit을 통해 데이터를 전달한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var io = require('socket.io').listen(server);

io.on('connection', (socket) => {

    console.log('user connected');

    socket.on('disconnect', function() {
        console.log('user disconnected');
    });

    socket.on('add-message', (message) => {
        io.emit('message', { type: 'new-message', text: message });
        // Function above that stores the message in the database
        databaseStore(message)
    });
});

클라이언트에서 socket.io 설치 및 임포트

소켓 io를 라우터에 전달한다.

1
2
3
4
5
6

npm i socket.io-client --save
npm install socket.io --save

const server = http.createServer(app);
var io = require('socket.io').listen(server);
const all = require('./server/routes/all')(mysql, conn, express, io);

angular service

io()는 socket을 반환한다.

socket.emit을 통해 이벤트를 발생시킨다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';

@Injectable()
export class ChatService {
  private url = 'http://localhost:5000';
  private socket;

  sendMessage(message){
    this.socket.emit('add-message', message);    
  }

  getMessages() {
    let observable = new Observable(observer => {
      this.socket = io(this.url);
      this.socket.on('message', (data) => {
        observer.next(data);    
      });
      return () => {
        this.socket.disconnect();
      };  
    })     
    return observable;
  }
}

angular component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

messages = [];
connection;
message;

sendMessage(){
  this.chatService.sendMessage(this.message);
  this.message = '';
}

ngOnInit() {
  this.connection = this.chatService.getMessages().subscribe(message => {
    this.messages.push(message);
  })
}

ngOnDestroy() {
  this.connection.unsubscribe();
}

참조
use with router

• Perceptron 이란?
• photo perceptron의 예
• Perception Convergence Theorem
• problems in perceptron (single layer) - XOR 문제
• 하이퍼 플레인과 hidden node
• multi layer perceptron을 이용한 XOR 문제의 해결
• weight vector는 왜 hyper plane과 수직을 이루는가?
• ADALINE(ADAptive LInear NEuron)이란 무엇이며 perceptron 과의 차이점은 무엇인가?
• ADALINE
• Least Mean Squares(LMS)
• RLMS(Relative Least Mean Squares)
• Neural network 설계 프로세스

Perceptron 이란?

frank rosenblatt 박사가 1950년 발표한 내용으로 McCulloch-pitts 모델의 확장 개념이다.
통계적으로 구분된 이론이다.(확률적, 거시적)

photo perceptron의 예

Perception Convergence Theorem

두개의 패턴을 학습하는 과정에서, 유한번의 사이클 내에 두 개의 패턴을 구분할 수 있다.

여기서 N과 P는 각각 Negative, Positive를 의미한다.
P와 N에서 랜덤하게 벡터를 뽑아서 Weight와 곱해준 값이
P의 경우 Positive 해 질때 까지 계속 덧셈을 하고
N의 경우 Negative 해 질때까지 계속 뺄셈을 하여 Positive 하고 Negative 함을 맞추어 준다.

problems in perceptron (single layer) - XOR 문제

single layer perceptron에서는 XOR 함수를 만족하는 weight를 찾을 수 없는 문제가 발생한다.

하이퍼 플레인과 hidden node

하이퍼 플레인이란 n차 공간에서 TLU(Threshold Logic Unit)역할을 하는 n-1차 공간이다.

hidden node란 xor 문제를 해결하는 mid-layer들을 의미한다.

multi layer perceptron을 이용한 XOR 문제의 해결

멀티레이어 퍼셉트론을 이용하여 XOR 문제를 해결할 수 있다.

weight vector는 왜 hyper plane과 수직을 이루는가?

weight vector는 hyper plane과 수직을 이룬다.

ADALINE(ADAptive LInear NEuron)이란 무엇이며 perceptron 과의 차이점은 무엇인가?

ADALINE이란 adaptive signal processing을 수행한다.

다음과 같은 면에서 perceptron과 차이점을 가진다.

1. dc 바이어스와 그에 대한 weight가 포함되어 있다.
2. perceptron은 0, +1의 출력을 가지는데 반해 -1 +1의 bipolar 출력을 가진다.
3. TLU가 단지 선형함수이다.

ADALINE

ALC: Adaptive Linear Combiner

Least Mean Squares(LMS)

L개의 입력값을 통한 출력값과 L개의 desired output을 비교하여 mean of square error가 가장 작은 weights를 구한다.

solution

RLMS(Relative Least Mean Squares)

학습되어야 할 데이터의 숫자가 증가하거나 벡터의 사이즈가 증가하는 경우에 문제가 생긴다.
모호한 방정식을 풀어야 하거나, 방정식의 개수가 weight보다 많은 경우 문제가 생긴다.
또한 inverse matrix를 구해야 하는 경우도 문제가 되는데, 데이터의 숫자가 많아짐에 따라 Determination이 0이 되는 값이 있을 수 있다.
이 경우 LMS를 줄여주는 방향으로 weight를 스스로 변화시키는 방법으로 weight를 조절해 갈 수 있는데 이를 RLMS라고 한다.

Neural network 설계 프로세스

perceptron의 경우 TLU가 non-linear하기 때문에 계산하기 어려우므로 ADALINE을 이용한다.

1. 학습되어야 할 데이터쌍이 몇개인가?
문제의 복잡도에 따라 다르다. 학습되어야 할 데이터가 많을 수록 더 많은 learning cycle을 필요로 한다.
neural net의 저장용량에 따라 cross-talk 없이 효과적인 학습과 재현이 가능해야 한다.
최종적으로, incremental learning이 필요하다.

2. 각 학습 입력쌍의 기대되는 출력값은 무엇인가?
GMP(Genralized Modus Ponens)와 밀접한 관련이 있다.
학습 쌍이 학습 알고리즘 상의 weight에 저장되어 있다면, 같은 입력 패턴이 들어갔을ㄷ대 반드시 같은 결과 패턴이 나와야 한다.

3. weight vector의 차원은 무엇이며 초기 추측값은 무엇인가?
센서의 개수와 잘 정의된 입력값에 관계가 있다.
초기 추측값은 랜덤하게 선택하거나 대충 선택한다.

4. bias weight이 필요한가? 필요하다면 언제 필요한가?
어떤 필터에서는 필요가 없다.
hyper plane이 원점과 거리가 매우 멀다면 필요하다.

5. pattern의 통계적 성질이 시간에 따라 변하면 어떠한가?
일반적으로 시간에 따른 변수들의 통계적 특성이 불변한다고 가정한다.
만약에 변한다면 학습 주기는 처음부터 다시 시작되어야 한다.

incremental learning을 한다면 하나의 패턴쌍을 제거할 수 있는가? 어떤것이 변하는가?

6. learning coefficient 적합한 값은 얼마인가?
학습계수는 최저값과 최고값이 있어야 한다. 학습에서 이 크기는 매우매우 중요하다.
작은 학습계수는 학습의 수렴이 천천히 일어나게 하고, 큰 학습 계수는 가끔 매우 긴 수렴 주기로 가게 하거나 혹은 발산하게 할 수 있다.

7. learning cycle의 종료 규칙을 어떻게 정하는가?
출력 조건과 관련이 있다. 만약 기대값과 실제 출력값이 허용치 안에서 계속 머문다면 학습 주기를 종료한다.

• neural network의 역사
• 왜 인공신경망이 각광을 받게 되었는가?
• 인공신경망이란?
• 생체 신경망과 컴퓨터 신경망의 연산속도
• 문자의 인식
• 기초적인 생체 신경망
• Neural Network Computation
• McCulloch-Pitts Theory(old)
• Hebbian Learning
• General Processing Element

neural network의 역사

1940년 후반, 디지털 컴퓨터의 출현

1950년 후반, perceptron과 ADALINE의 출현

1969년 ~ 1980년 초반, single layer perceptron에서 xor 문제 발생

1986년, 전환점을 맞이하게 된다.
multi layer perceptron이 xor 문제를 해결하다.

1990년, optical neural network, 디지털 하드웨어

왜 인공신경망이 각광을 받게 되었는가?

1. 경험, 데이터, 실험을 통해 강력한 학습이 가능하다.
2. 물체의 분류와 식별이 가능해진다.
3. 빠른 병렬연산으로 이상적으로 빛의 속도로 연산이 가능하다.
4. 잠재 지능이 존재한다.
5. 수많은 범용 어플리케이션이 나오고 있다.

인공신경망이란?

인공 신경망이란 processing elements 로 구성된 여러개의 장치들이 connection strength or weight이 다른 여러 개의 연결망을 통해 연결된 복합체이다.
많은 패턴들과 수치 데이터들이 학습되고 저장될 수 있다.
여기서 weights란 인공 신경만이 학습하고 저장하기 위한 수치값들로 메모리에 저장되는 값이다.

adaption이란 예제와 실험들로 학습하는 것을 말한다.

생체 신경망과 컴퓨터 신경망의 연산속도

컴퓨터의 속도가 생체 신경망에 비해 10,000,000배나 더 빠른 속도를 보인다.
하지만 컴퓨터는 병렬적 처리를 하지 못하는데 반해 생체신경망은 막대한 병렬연산이 가능하고 복잡하게 연결되어 있기 때문에 컴퓨터가 100msec가 걸려야 풀 수 있는 한번의 인식을 단지 0.1msec 만에 해결한다.

문자의 인식

손으로 작성되었는가 혹은 컴퓨터로 타이핑 되었는가, 기울기 확대율, 회전율 등에 따라 다른 인식율을 보인다.

기본적인 패턴인식은 패턴을 픽셀단위로 분해아여 벡터화 시킨다.
인공 신경망의 node와 connection strength를 조절하여 분석한다.

기초적인 생체 신경망

뉴런

1. 부분적인 투과성을 가진다.
2. potential 차이가 존재하며 이온들이 이동한다.

이온들이 potential차가 평행을 이루는 지점까지 운동한다.

시냅스

시냅스는 Neuro-transmitter이다.
시냅스가 Ca(+)의 투과성을 높여주면 action potential이 증가한다.

투과성이 critical point를 넘기게 되면 action potential이 이동하여 다른 뉴런에 연결된다.

Neural Network Computation

뇌는 수많은 연결을 통해 어떻게 엄청난 능력을 가지게 되었는가?

McCulloch-Pitts Theory(old)

1. 뉴런의 활동은 일어나거나 일어나지 않거나 두가지 상태를 가진다. 중간은 없다.
2. 신경이 흥분되려면 두 개 이상의 시냅스가 흥분되어야 한다.
3. delay는 오직 스냅스에서만 발생한다.
4. 억제 시냅스는 뉴런 활동성을 저해한다.
5. 연결망의 구조는 시간에 따라 변하지 않는다.

뉴런은 단순한 장치이지만, 적절하게 연결되어 신경 시스템을 구성하면 막대한 계산이 가능하다.

Hebbian Learning

생체신경망은 최초에 직렬적으로 작동할 능력과 지식을 갖추지 못했다.

Pavlov’s Conditioned Response

뉴런 A 의 축색돌기가 뉴런 B를 자극하기에 충분하고 지속적으로 계속적으로 자극이 발생한다면 하나 혹은 여러개의 뉴런에서 성장 혹은 신진대사가 이루어 지고 뉴런 C의 효율이 높아진다.
그리고 마침내 뉴런 C를 자극하는 다른 뉴런인 뉴런 B가 증가하게 된다.

Hebb’s assumption says, “The excitation of neuron A has enough stimulus for neuron B, but that of neuron C doesn’t have. Now, with neuron A, the connection strength of neuron C increases, and eventually, without neuron A, neuron B can be excited by neuron C only.”

General Processing Element

인공 신경세포를 노드 혹은 유닛으로 나타내는 단위이다.

수학에서 뉴럴 네트워크의 설계는 시간에 따라 변하는 역동적인 시스템이다.

학습 법칙
connection strength는 학습이 진행됨에 따라 업데이트되며, data of weights가 무엇을 배우지에 관한 정보를 기록하게 된다.

vector notations

• array.forEach 함수의 활용
• 받아온 rows를 forEach 함수를 사용하여 정체

array.forEach 함수의 활용

forEach()는 오름차순으로 배열에 있는 각 요소에 대해 한 번씩 callback을 실행한다.
삭제 또는 비초기화된 인덱스 속성에 대해서는 호출되지 않는다.

callback은 다음 세 인수와 함께 호줄된다.
요소 값, 요소 인덱스, 순회될 배열

받아온 rows를 forEach 함수를 사용하여 정체

정제하는 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function(err,rows){
  var result = [];
  var indexObject = {};
  if(err){
    console.log(err)
  }else{
    rows.forEach(function(row){

        <!-- 해당 행의 id가 indexObject의 키값에 없을때 실행 -->
        if(!(row.id in index)){
          index[row.id]={
            id: row.id,
            name: row.name
          };

          <!-- 반환값에 추가 -->
          result.push(index[row.id]);
        }
        해당 행이 인덱스에 있건 없건 간에 해당 인덱스의 내역을 체워줌
        index[row.id].histories.push({
            historyId:row.historyId,
            historyName:row.historyName
        });
    })
    console.log(result);
  }
}

개요

흔히 bracket 안에 다양한 model을 바인딩 하는 경우 null 혹은 undefined에 대해 많은 에러가 일어나게 된다.

예를 들어 다음과 같은 경우

1
2
3

{% raw %}
{{user.name}}
{% endraw %}

user 안에 값이 없다면 null안에서 name property를 가져올 수 없으므로 전체 어플리케이션에 치명적인 오류가 일어나게 된다.

safe navigation operator의 활용

다음과 같이 Object?.property를 사용하는 경우
Object의 값이 null이어도 시스템 에러를 발생시키지 않아
보다 안전한 프로그램이 될 수 있다.

1
2
3

{% raw %}
{{user?.name}}
{% endraw %}

• pipe 란?
• 여러개의 pipe를 사용하기
• Date Pipe
• Currency Pipe

pipe 란?

angular pipe란 입력받은 데이터를 사용자가 원하는 형태로 변형시켜 출력할 수 있게 해 준다.

여러개의 pipe를 사용하기

계속해서 pipe를 나열하여 chaning 하여 사용할 수 있다.

example
undefined

Date Pipe

example
undefined
참조

Currency Pipe

참조

• 선택자

선택자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// 아이디 선택자
#id_of_the_element{
  //contents
}

//클래스 선택자
.class_of_the_element{
  //contents
}

// 속성 선택자
input[type=text]{
  // contents
}

// 자손 선택자
header>h1{
  
}

// 반응, 상태, 구조 선택자
div:first-child{
  
}

선택자:active{
  
}

• 배경 설정하기
• 배경 그라디언트
• 커서 모양 만들기

배경 설정하기

배경을 전체로 설정하고 가운데를 보이게 할 수 있다.
가장 일반적인 배경 설정이다.

1
2
3

background-position: center;
background-repeat: no-repeat;
background-size: cover;

배경 그라디언트

1
2
3
4
5
6
7

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
}

커서 모양 만들기

1

li { cursor: pointer; cursor: hand; }