가전제품 이것저것 이야기

< CSS Framework >

CSS Framework 종류 for React

1. Material UI -> 사용하기 어렵다.

2. React Bootstrap

3. Semantic UI

4. Ant Design 

5. Materialize

Ant Design을 사용할 것이다.

장점)

디자인이 깔끔하다.

Enterprise 환경에서도 잘 어울리는 디자인

쓰기가 용이하다.

단점)

용량이 매우 크다.

Ant Design 홈페이지에 가서 getting-started 따라한다.

ant.design/docs/react/introduce

비주얼 스튜디오 코드 Terminal에서

cd client
npm install antd --save

client/src/index.js에

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

하면 설정 끝.

< Redux 이론 >

Redux란? 상태 관리 라이브러리

Prop vs State

1) Prop

: Properties의 약자

: 컴포넌트 간에 데이터를 주고받을 때 사용

: 부모 컴포넌트에서 자식 컴포넌트로만 보낼 수 있다.

: 부모 컴포넌트에게 받은 데이터를 자식 컴포넌트가 변경할 수 없다. 바꾸려면 다시 부모 컴포넌트에게 다른 값을 받아야한다.

2) State

: 부모, 자식 간의 그런 관계가 아니고, 컴포넌트 간의 데이터를 전달하는 방법이다.

: 따라서 받은 데이터를 변경할 수 있다.

: State에서 값을 변경하면 re-rendering 되는 효과가 있다.

: 예를 들어, 검색창에 글을 입력할 때 글이 변하는 것은 state를 이용한 것이다.

이러한 State를 관리하는 것이 Redux 이다.

모든 컴포넌트는 Comment를 가지고 관리하고 있다.

그리고 부모 컴포넌트는 자식 컴포넌트의 Comment도 관리하고 있다.

이 때, Redux가 자식 컴포넌트 Comment의 변화를 부모 컴포넌트에게 한번에 전달하는 역할을 한다.

아래 그립과 같이, Redux Store에 넣어놓고

< Redux 실전 >

1. 다운받아야 하는 dependencies

1) redux

2) redux - thunk

3) redux - promise

4) react - redux

3)과 4) 리덕스를 더 잘 사용할 수 있도록 도와주는 미들웨어이다.

npm install redux react-redux redux-promise redux-thunk --save

2. import

import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise'
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers';

3. middleware

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

4. store

- 크롬 익스텐션 Redux DevTools 설치 후

ReactDOM.render(
    <Provider
        store={createStoreWithMiddleware(Reducer,
            window.__REDUX_DEVTOOLS_EXTENSION__ && 
            window.__REDUX_DEVTOOLS_EXTENSION__()
        )}
    >
        <App />
    </Provider>
, document.getElementById('root'));

5. _reducers 파일 밑에 index.js 파일 생성

import { combineReducers } from 'redux';
// import user from './user_reducer';

const rootReducer = combineReducers({
    // user,
})

export default rootReducer;

Q. BFS 모든 경로의 거리를 구하시오

#include <stdio.h>
#include <iostream>
#include <queue>
#include <vector>
#define MAX_SIZE 101
using namespace std;

int ch[MAX_SIZE], dis[MAX_SIZE];

int main(void) {
    int n, m, a, b, x;
    
    vector<int> map[MAX_SIZE];
    queue<int> Q;
    scanf("%d%d", &n, &m);  
    
    for(int i=1; i<=m; i++){
        scanf("%d%d", &a, &b);
        map[a].push_back(b);
        map[b].push_back(a);
    }
    
    Q.push(1);
    ch[1] = 1;
    
    while(!Q.empty()){
        x=Q.front();
        Q.pop();
        for(int i=0; i<map[x].size(); i++){
            if(ch[map[x][i]] == 0){
                ch[map[x][i]] = 1;
                Q.push(map[x][i]);
                dis[map[x][i]] = dis[x] + 1;
            }
        }
    }
    for(int i=2;i<=n;i++){
        printf("%d : %d\n", i, dis[i]);
    }
    
    return 0;
}

- BFS는 큐를 사용하여 구현한다.

< 원리 >

1. 첫 번째 정점과 연결되어 있는 모든 정점을 확인

2. 해당 정점을 이전에 방문하지 않았을 경우 큐에 넣는다.

3. 1, 2번을 모두 완료한 후, 큐에서 그 다음 정점을 꺼내어 똑같은 과정을 반복한다.

응용문제1) 백준 1260 중 BFS

www.acmicpc.net/problem/1260

#include <stdio.h>
#include <iostream>
#include <queue>
#include <vector>
#include <algorithm>
using namespace std;

int ch[30], dis[30];        // ch는 방문했는지 안했는지

int main(void) {
    int n, m, a, b, x, start;
    
    vector<int> map[30];
    queue<int> Q;
    scanf("%d%d%d", &n, &m, &start);
    
    for(int i=1; i<=m; i++){
        scanf("%d%d", &a, &b);
        map[a].push_back(b);
        map[b].push_back(a);
    }
    
    // 작은 수부터 조건이 있으니까 정렬해주기
    for(int i=1; i<=n; i++){
        sort(map[i].begin(), map[i].end());
    }
    
    Q.push(start);
    ch[start] = 1;
    
    while(!Q.empty()){
        printf("%d ", Q.front());
        x = Q.front();
        Q.pop();
        
        for(int i=0; i<map[x].size(); i++){
            
            if(ch[map[x][i]] == 0){
                ch[map[x][i]] = 1;
                Q.push(map[x][i]);
            }
        }
    }
    return 0;
}

- 작은 수부터 먼저 탐색하라는 문제의 조건이 있으므로 정렬을 해준다.

- 1 대신 start 값을 받아서 시작 정점을 정해준다.

- BFS를 수행한다.

응용문제2) 백준 2606 바이러스

www.acmicpc.net/problem/2606

#include <stdio.h>
#include <iostream>
#include <queue>
#include <vector>
using namespace std;

int ch[101];

int main(void) {
    int n, m, a, b, x, cnt = 0;
    
    vector<int> map[101];
    queue<int> Q;
    scanf("%d%d", &n, &m);      // 두 줄에 나눠서 입력해도 가능한가? 가능!
    
    for(int i=1; i<=m; i++){
        scanf("%d%d", &a, &b);
        map[a].push_back(b);
        map[b].push_back(a);
    }
    
    Q.push(1);
    ch[1] = 1;
    
    while(!Q.empty()){
        x=Q.front();
        Q.pop();
        for(int i=0; i<map[x].size(); i++){
            if(ch[map[x][i]] == 0){
                ch[map[x][i]] = 1;
                Q.push(map[x][i]);
                cnt++;
            }
        }
    }
    printf("%d\n", cnt);
    
    return 0;
}

- 거리 대신 방문횟수를 구해야 하므로 cnt 변수를 넣어주고, 방문할 때마다 하나씩 증가하도록 했다.

- 배열 ch와 벡터배열 map 의 크기를 문제에 맞추어 101로 증가시켰다.

응용문제3) 백준 2644 촌수계산

www.acmicpc.net/problem/2644

#include <stdio.h>
#include <iostream>
#include <queue>
#include <vector>
using namespace std;

int ch[101], dis[101];
int s, f;

int main(void) {
    int n, m, a, b, x;
    
    vector<int> map[101];
    queue<int> Q;
    scanf("%d", &n);
    scanf("%d%d", &s, &f);
    scanf("%d", &m);
    
    
    for(int i=1; i<=m; i++){
        scanf("%d%d", &a, &b);
        map[a].push_back(b);
        map[b].push_back(a);
    }
    
    Q.push(s);
    ch[s] = 1;
    
    while(!Q.empty()){
        x=Q.front();
        if(x == f)
            break;
        Q.pop();
        for(int i=0; i<map[x].size(); i++){
            if(ch[map[x][i]] == 0){
                ch[map[x][i]] = 1;
                Q.push(map[x][i]);
                dis[map[x][i]] = dis[x] + 1;
            }
        }
    }
    
    if(dis[f] == 0)
        dis[f] = -1;
    printf("%d\n", dis[f]);
    
    return 0;
}

- 배열 ch, dis와 벡터배열 map 의 크기를 문제에 맞추어 101로 증가시켰다.

- 시작노드와 마지막노드를 받아서 시작 노드부터 출발을 하였고, 마지막노드가 나왔을 때 break; 해 주었다.

- 관계가 아예 없다면(dis[f] == 0) -1을 출력하도록 하였다.

Q. DFS 로 갈 수 있는 모든 경로의 수는?

#include <stdio.h>
#include <iostream>
using namespace std;

int map[30][30], ch[30], cnt = 0;
int n, m;

void DFS(int v){            // v -> 정점 번호
    if(v == n) {
        cnt++;
    }
    else {
        for(int i=1; i<=n; i++){
            if(map[v][i] == 1 && ch[i] == 0){
                ch[i] = 1;                          // 한 번 길 갈 때, 똑같은 곳을 또 방문하지 않기 위해
                DFS(i);
                ch[i] = 0;
            }
        }
    }
}

int main(void) {
    int a, b;
    
    scanf("%d%d", &n, &m);
    
    for(int i=0; i<m; i++){
        scanf("%d%d",&a,&b);
        map[a][b] = 1;
    }
    ch[1] = 1;
    DFS(1);
    printf("%d\n", cnt);
    
    return 0;
}
​

n = 정점의 개수, m = 간선의 개수

응용 문제) 백준 1260

www.acmicpc.net/problem/1260

#include <stdio.h>
#include <iostream>
using namespace std;

int map[30][30], ch[30], cnt = 0;
int n, m, start;

void DFS(int v){            // v -> 정점 번호
    printf("%d ", v);
    
    if(cnt == n) {
        return;
    }
    else {
        for(int i=1; i<=n; i++){
            if(map[v][i] == 1 && ch[i] == 0){
                cnt++;
                ch[i] = 1;                          // 한 번 길 갈 때, 똑같은 곳을 또 방문하지 않기 위해
                DFS(i);
            }
        }
    }
}

int main(void) {
    int a, b;
    
    scanf("%d%d%d", &n, &m, &start);
    
    for(int i=0; i<m; i++){
        scanf("%d%d",&a,&b);
        map[a][b] = 1;
        map[b][a] = 1;
    }
    
    ch[start] = 1;
    cnt++;
    DFS(start);
    
    return 0;
}

- map[a][b] 만이 아닌, map[b][a]도 1로 설정

- 시작 정점을 1이 아닌, 값을 받아서 주고,

- 여러 경로를 탐색하기 위해 ch[i] = 0; 으로 풀어주는 과정을 지웠다.

응용문제) 백준 10971

www.acmicpc.net/problem/10971

#include <iostream>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
using namespace std;
int W[11][11];
int visited[11];

int N;
int start;
long long int m = 98765432;

void dfs(int start, int n, int cost, int cnt){
    
    // 선택한 노드의 수가 총 개수이고, 시작 노드까지의 경로가 있으면
    if(cnt == (N-1) && W[n][start] != 0){
        cost += W[n][start];
        if(cost < m)
            m = cost;
        return;
    } else {
        for(int i=0; i<N; i++){
            
            if(n == i || W[n][i] == 0)
                continue;
            
            // 간 적이 없는 노드일 때
            if(visited[i] == 0){
                
                visited[i] = 1;
                dfs(start, i, cost + W[n][i], cnt+1);
                visited[i] = 0;
            }
        }
    }
}


int main(void) {

    scanf("%d", &N);
    
    for(int i=0; i<N; i++){
        for(int j=0; j<N; j++){
            scanf("%d", &W[i][j]);
        }
    }

    // 0에서 출발하는 것만 구해도 됨 -> 싸이클이 있기 때문에 다른 출발점으로 해도 동일함
    visited[0] = 1;
    dfs(0, 0, 0, 0);
    
    printf("%lld\n", m);
    
    return 0;
}

- 최소 비용 경로를 구하는 문제였음

- DFS 재귀 반복할 때마다 cost와 cnt 를 넣어주고, 나올 때는 다시 풀게 하여 모든 경우의 cost 와 cnt를 구할 수 있게 함

1. 에러 검출

- 데이터 링크, 네트워크, 전송 계층 모두 에러 검출을 위한 동작 수행

- 각 계층에서 사용하는 방식이 서로 다를 수 있음

- 일반적 에러 검출 기법인 "패리티 사용 기법"만 다루기로 하자

- NIC는 CRC 코드를 생성하고 이를 통해 에러 발생을 검출함

2. 에러 검출 및 정정

- 에러 검출을 위해서는 추가적인 데이터를 전송 데이터와 함께 보내줘야 함

- 가장 간단한 에러 검출 알고리즘 : 패리티 비트

- 수신 데이터의 에러 검출 후 에러를 정정하는 방식도 존재

: 비용이 많이 들어 잘 쓰이진 않음

: 에러 정정을 위한 알고리즘 : 해밍 코드

: 일반적으로는 에러 검출만 하고 다시 데이터를 재전송시킴으로써 에러에 대응함

3. 에러 검출 - 1차원 패리티

- 패리티 비트 : 보낼 비트 패턴에 1비트를 추가하여 전송 에러를 검출

* 단, 에러가 홀수 개 발생했을 때만 검출 가능하다

- 짝수 패리티 : 1의 개수가 짝수가 되도록 패리티를 지정

- 홀수 패리티 : 1의 개수가 홀수가 되도록 패리티를 지정

- 송신 호스트와 수신 호스트는 동일한 패리티 방식을 사용해야 함

- ASCII 코드의 MSB를 패리티 비트로 사용할 수 있음

- 수신 측은 MSB를 에러 체크에서만 이용하고, MSB를 다시 0으로 바꿔서 사용

ex ) 짝수 패리티

패리티 비트 외의 비트들이 짝수이면 0, 홀수이면 1을 대입한다.

첫 비트가 패리티 비트 / 11101011 / 01101001

4. 에러 검출 - 2차원 패리티

- 1차원 패리티는 짝수 개의 에러 검출 불가

- 수평, 수직 방향 모두에 패리티 비트를 지정

- 짝수 개의 비트가 깨지는 오류도 검출 가능 (항상 검출한다는 의미는 아님)

- 오버헤드가 1차원 패리티 비트 기법에 비해 크다

- 수평, 수직 방향 모두에서 사각형 형태로 발생한 짝수 개의 집단 오류는 검출 못함

5. 체크섬

- 주어진 디지털 데이터에 대해 미리 정해진 계산을 통해 일정한 길이의 작은 크기 데이터를 생성

- 이를 체크섬 이라고 함

- 주어진 데이터 D에 대해 체크섬 함수를 적용하여 값을 얻어냄. 즉, 체크섬을 계산함

< 체크섬 함수 >

- 동일한 데이터에 대해서 항상 동일한 체크섬이 나옴

- CF(D) = CF(D) 인게 당연한데, D에 오류가 발생했을 경우 동일한 체크섬값이 나오지 않을 것이므로 오류 검출이 가능하다

- 데이터 D를 일정한 크기로 나누고, 나눈 데이터들을 더하는 방식

< 체크섬 예 >

- 두 통신 entity N1, N2가 서로 통신한다고 가정

- N1과 N2는 체크섬 함수 CF()를 공유

- 전송 (D, CF(D)) -> N2

- N2는 받은 데이터에 대해 원래 알고있던 CF()함수로 다시 체크섬 계산

- 새로 계산된 체크섬 값과 수신한 체크섬 값이 일치하지 않으면 에러 발생으로 판단

* 단, 값이 일치한다고 해서 항상 에러가 없었다고 단정할 수는 없다. 독립 변수가 틀려도 종속 변수가 같게 나올 수 있기 때문이다.

6. Hash 함수

- 입력 데이터 m에 대해 일정한 길이의 비트 스트림으로 대응시킴

- H(m) -> S

- m의 길이는 정해지지 않은 것임

- 좋은 해시 함수는 m != m' 일 때, f(m) != f(m') 의 결과를 보이는 것임

- S가 클수록 충돌 현상이 줄어듦

- Y값을 안다고 해서 X값을 알 수 있는 것은 아님

- 널리 쓰이는 해시 알고리즘으로는 MD5와 SHA-1

- 체크섬 함수도 해시 함수 중 하나라고 할 수 있음

- 비트코인 채굴 과정에서도 해시 함수가 사용됨

< 충돌 가능성 >

- 2비트 : 1/2의 2승

- 16비트 : 1/2의 16승

1. 채널

- 데이터가 흐르는 개별적인 경로

- 소매점 체인이 채널의 예

2. 다중접속 프로토콜의 바람직한 특성 (초당 R 비트의 전송률을 가질 때)

- 효율성 : 전송하는 노드가 하나 있다면 노드의 데이터 전송 속도는 R이 될 수 있다.

- 공정성 : M개의 노드가 동시에 전송을 한다면 각자 R/M의 전송 속도를 가진다.

- 안정성 : 프로토콜이 분산되어 있다. 즉, 특정 노드의 고장으로 인해 전체 시스템이 정지하는 경우가 발생하지 않느다.

- 프로토콜이 단순하여 구현 비용이 크지 않다.

3. LAN 토폴로지(LAN 형태)

- 버스형   ----a----b----c----d----

- 링형     a----b----c----d----a

- 성형     a---중앙 ---b

4. 버스형

- 전기 신호가 브로드캐스팅 됨

- 동시 전송 시, 충돌 발생 가능

- 예) Ethernet

- 링크의 길이가 길어지면 신호의 감쇄현상으로 중계기가 필요할 수 있음

5. 링형

- 한쪽 방향으로 데이터가 전송됨(시계 방향 혹은 반시계 방향)

- 전송 호스트와 목적지 호스트 주소가 기록됨, 링을 돌다가 목적지 호스트에 도착하면 데이터를 자신의 버퍼에 복사

- 데이터는 링을 돌다가 초기 데이터를 전송했던 호스트에 의해 제거됨

- 제어 절차가 상대적으로 복잡 (토큰 사용)

- 한 노드에 발생한 고장이 전체 링에 영향을 줄 수 있음

- 토큰 링의 형태로 사용되는 것이 일반적

** 효율성 낮음, 공정성 그저그럼, 안정성 낮음

6. 성형

- 스위치 허브의 사용이 보편화 되면서 성형 구조의 LAN이 많이 사용되고 있는 상황

- 하나의 링크에 발생하는 문제는 다른 노드에 영향 주지 않음 (안정성 높음)

- 단, 중앙 스위치에 문제가 발생하면 LAN 전체에 문제 발생

1. OSI[Open System Interconnection] Reference Model - 참조 모델

- 국제 표준화 단체 ISO에서 OSI reference model을 정의

-  네트워크에서 통신 호스트들이 계속 추가될 수 있어야 한다. 그러려면 미리 정의된 통신 관련 표준이 필요하다. 그것이 OSI이다.

- 7개의 layer로 구성 

2. 7 layers

- 응용계층 (Application layer)

- 표현계층

- 세션계층

- 전송계층 (Transport layer) : TCP / UDP

- 네트워크계층 : IP

- 데이터링크계층

- 물리계층 (Physical layer)

-> Top - Down : application protocol에 맞춰 application process가 진행됨

-> Application Layer의 프로그램을 짤 때, Transport Layer의 기능을 이용

-> 운영체제 : 전송 / 네트워크 / 데이터링크 계층

3. 인터페이스(interface)

- 서로 다른 시스템이나 소프트웨어 간의 연결을 위해 정해둔 방식 

4. 프로토콜(Protocol)

-  통신규약

-  1) 메시지 포맷과 순서 2) 절차 정의

-  HTTP : 웹 브라우저와 웹 서버간 프로토콜

-  SMTP : 데이터를 email 서버로 보내기 위한 프로토콜

(나) 응용 -> 표현 -> 세션 -> 트랜스포트 -> 네트워크 -> 데이터링크 -> 물리

(상대방) 물리 -> 데이터링크 -> 네트워크 -> 트랜스포트 -> 세션 -> 표현 -> 응용

5. 프로토콜 예

1) 연결

2) GET / Res

3) 데이터 전송

4) 연결해제

6. 프로토콜 계층

- 상위 계층은 하위 계층에 존재하는 기능 이용

- 응용 프로세스(응용 계층에 위치)가 상대편 응용 프로세스로 데이터를 전송

: 여러 개의 프로토콜 계층 통과

7. 7 layers

응용 계층

  : HTTP, FTP, SMTP등 통신 프로토콜 정의

전송 계층

  : TCP, UDP 운영체제에 구현되며, 운영체제로부터 기능 호출(시스템 콜)

네트워크 계층

  : IP, 멀리 떨어져 있는 두 호스트 간의 데이터 전달 (라우터 장비 필요)

  : 라우터는 IP 주소를 차고하여 전달

데이터링크 계층

  : 유선 LAN카드, WiFi 카드, 물리적인 전송 매체 이용

물리 계층

: 구리선, 광케이블선, 비트 열을 전기적 신호로 변환