## 리덕스의 탄생 배경

https://redux.js.org/introduction/motivation

**자바스크립트 싱글 페이지 애플리케이션에 대한 요구 사항이 점점 복잡해 짐에 따라서, 우리의 코드는 그 어느 때 보다도 더 많이 상태관리에 대한 필요성을 느끼고 있다.** 여기서 말하는 상태에는 서버 응답, 캐시된 데이터 뿐만아니라 서버에 아직 요청되지 않은 로컬로 생성된 데이터도 포함된다. UI 상태 또한 다양한 라우팅, 탭, 스피너, 페이징 등을 관리해야 하므로 그 복잡성이 증가하고 있다.

이러한 상태를 연속적으로 관리하는 것은 더 어렵다. 만약 모델이 다른 모델에 의해서 업데이트 될 수 있고, 뷰가 모델을 업데이트하고 또 다른 모델을 연속적으로 업데이트 하면, 차례대로 다른 뷰를 업데이트 할 수도 있다. 이런식의 복잡성이 증가하다보면, 어느 순간 부터 앱에 무슨일이 일어나는지 이해하지 못하게 된다. 이말은, 개발자가 **언제, 어떻게 , 왜 상태가 업데이트 되는지에 대한 통제력을 잃게 된다.** 시스템이 불투명하고 비결정적일 때, 버그를 재현하거나 새로운 기능을 추가하는 것이 굉장히 어려워진다.

개발자로서, 우리는 서버사이드 렌더링, 라우팅이 일어나기전 데이터를 가져오는 등의 일을 처리해야 된다. 이는 우리가 이전에 다루어 보지 못했던 복잡성을 관리해야 하는 자신을 발견 하게 될 것이다.

이러한 복잡성은 mutation과 비동기라는 두가지 어려운 개념이 혼합되어 있기 때문이다. 나는 이 둘을 멘토스와 콜라라고 부른다. 이 두가지는 분리되어 있을 때는 훌륭하지만, 함께 있게 된다면 엉망진창이 된다. 리액트와 같은 라이브러리는 비동 기 및 직접 돔조작을 모두 뷰단에서 제거함으로서 이 문제를 해결하려고 한다. 하지만 데이터 상태에 대 한 관리는 전적으로 개발자의 몫이다. 여기에서 바로 Redux가 필요해진다.

리덕스는 이러한 상태 변화를, 업데이트가 언제 어떻게 일어날 수 있는지 제한하여 예측가능하게 만드려고 시도한다. 이러한 제한은 리덕스의 세가지 원칙에 반영되어 있다.

## 핵심 개념

https://redux.js.org/introduction/core-concepts

만약 당신의 할일 앱이 상태가 하나의 object로 구성되어 있다고 생각해보자.

```javascript
{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}
```

이 객체는 마치 setter가 없는 model처럼 보인다. 이는 상태값을 독단적으로 변경할 수 없기 때문에, 재현하기 어려운 버그를 만든다.

(리덕스에서는) 상태에서 무언가를 바꾸기 위해서는, 액션을 dispatch해야 한다. 여기서 액션은 단순한 자바스크립트 객체이며, 이는 무엇이 일어날지를 묘사한다. 액션의 예를 들어보자.

```javascript
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
```

모든 변화가 액션으로 설명하도록 강요하는 것은, 앱에서 무슨일이 일어나고 있는지 명확하게 이해할 수 있도록 도와준다. 만약 무언가 변했다면, 그 이유를 알 수 있다. 액션은 마치 빵가루와 같다. (흔적을 남긴다는 뜻) 그것은 단지 상태와 액션을 argument로 남겨두고, 앱의 다음 상태를 리턴하는 것 뿐이다. 사이즈가 큰 앱의 경우 이러한 기능을 명세하기 어려울 수 있으므로, 상태 값을 작은 함수로 나누어서 작성해야 한다.

```javascript
function visibilityFilter(state = "SHOW_ALL", action) {
  if (action.type === "SET_VISIBILITY_FILTER") {
    return action.filter
  } else {
    return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case "ADD_TODO":
      return state.concat([{ text: action.text, completed: false }])
    case "TOGGLE_TODO":
      return state.map((todo, index) =>
        action.index === index
          ? { text: todo.text, completed: !todo.completed }
          : todo
      )
    default:
      return state
  }
}
```

그리고 앱의 완전한 전체 상태를 관리하는 리듀서를 작성하여, 두개의 리듀서를 각각의 키로 호출한다.

```javascript
function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action),
  }
}
```

이것이 기본적인 리덕스의 전체적인 아이디어다. 리덕스는 어떠한 종류의 API도 사용하지 않는 다는 것을 명심해두자. 이러한 패턴을 유용하게 사용하기 위해 몇가지 유틸리티를 제공하지만, 주된 아이디어는 액션 오브젝트에 대응하여 시간이 지남에 따라 어떻게 상태가 업데이트 관리되는지 묘사하는 것이며, 그리고 당신이 쓰는 코드의 90%는 그저 평범한 자바스크립트 코드이고, 여기에는 어떠한 - 리덕스, API, 꼼수 - 것들도 쓰이지 않았다.

## 3가지 원칙

리덕스는 아래의 3가지 원칙으로 묘사할 수 있다.

### 신뢰할 수 있는 한가지 소스

**애플리케이션의 전채상테는 하나의 스토어 안에 오브젝트 트리 형태로 저장된다.**

이를 통해 서버의 상태를 별도의 코딩 작업 없이 클라이언트로 직렬화 하고, hydrate (plain형태로 되어 있는 state를 읽어내는 행위) 할 수 있으므로 쉽게 유니버설 앱을 만들 수 있다. 또한 하나의 상태 트리를 사용하면, 애플리케이션을 디버깅하거나 검사하기 쉽다. 또한 더 빠른 개발주기 내에서도 애플리케이션의 상태를 관리할 수 있다. 전통적으로 구현하기 어려웠던 일부기능, 예를 들어 Undo/Redo 등도 모든 상태가 단일 트리에 저장되어 있으면 굉장히 구현하기 쉽다.

```javascript
console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/
```

### 상태는 무조건 읽기전용이다.

**상태를 변경하는 유일한 방법은, 어떤일이 일어나는지 기술하는 action 이다.**

이는 뷰나 네트웤 콜백 모두 직접적으로 상태를 작성하지 못하게 된다. 대신, State를 변화시키려는 목적을 표현하게 된다. 왜냐하면 모든 변화가 중앙에서 이루어지고, 엄격한 순서에 따라서 하나씩 발생하기 때문에, 조심해야할 race condition이 없다. 작업은 단순한 객체일 뿐이므로, 디버깅이나 테스트 목적으로 녹화, 직렬화, 저장 및 재생할 수 있다.

```javascript
store.dispatch({
  type: "COMPLETE_TODO",
  index: 1,
})

store.dispatch({
  type: "SET_VISIBILITY_FILTER",
  filter: "SHOW_COMPLETED",
})
```

### 변화는 순수 함수로 이루어진다.

**액션을 통해서 상태트리가 어떻게 바뀌는지 묘사하기 위해서는, 순수 리듀서를 작성해야 한다.**

리듀서는 이전의 상태값과 액션을 받아다가, 다음 상태를 반환하는 단순한 함수다. 여기에서는 이전의 상태값이 아닌 새로운 상태 오브젝트를 리턴해야 한다. 단일 리듀서로 시작할 수 있으며, 앱이 커지면 상태트리의 일부를 관리하는 작은 리듀러들로 구성할 수 있다. 리듀서는 단순히 함수이기 때문에, 순서를 조절하거나, 추가 데이터를 넘기거나, 페이징같은 기능을 하기 위한 재사용한 리듀서를 만들 수도 있다.

```javascript
function visibilityFilter(state = "SHOW_ALL", action) {
  switch (action.type) {
    case "SET_VISIBILITY_FILTER":
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case "ADD_TODO":
      return [
        ...state,
        {
          text: action.text,
          completed: false,
        },
      ]
    case "COMPLETE_TODO":
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true,
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from "redux"
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)
```


## 리덕스의 탄생 배경 https://redux.js.org/introduction/motivation  **자바스크립트 싱글 페이지 애플리케이션에 대한 요구 사항이 점점 복잡해 짐에 따라서, 우리의 코드는 그 어느 때 보다도 더 많이 상태관리에 대한 필요성을 느끼고 있다.** 여기서 말하는 상태에는 서버 응답, 캐시된 데이터 뿐만아니라 서버에 아직 요...

리덕스 공부해보기 (2) - 리덕스의 탄생, 핵심 개념 그리고 3가지 원칙.

## 리덕스 공부해보기 1

[리덕스 공식문서](https://redux.js.org/introduction/getting-started)를 스스로 대충 번역해본 글입니다.

리덕스는 자바스크립트 앱을 위한 **예측 가능한 상태 관리 컨테이너**다.

리덕스는 일관성 있게 동작하고, 서로 다른 환경 (클라이언트, 서버, 네이티브)에서 실행되며, 테스트하기 쉬운 애플리케이션을 만들 수 있도록 도와준다. 최상단에는, 최상의 개발자 경험을 제공하기 위한 타임 트레블 디버거를 결합한 라이브 코드 편집 등의 기능을 제공한다.

리덕스는 리액트와 함께 사용할 수 있으며, 또한 다른 뷰 라이브러리와 사용할 수 있다. 리액트는 작지만 (디펜던시를 포함하더라도 2kb) 사용가능한 다양한 애드온을 가진 생태계를 가지고 있다.

### 설치

```
# NPM
npm install redux

# Yarn
yarn add redux
```

이외도 또한 글로벌 변수인 `window.Redux`로 선언된 UMD 패키지로도 사용 가능하다. UMD 패키지는 스크립트 태그에 직접적으로 선언해서 사용 가능하다.

### 리덕스 툴 킷

리덕스는 작고 비편향적이다. (대충 특정 플랫폼에 의존적이지 않다는 뜻) 또한 [Redux Toolkit](https://redux-toolkit.js.org/)이라고 하는 패키지를 가지고 있는데, 이는 리덕스를 보다 효과적으로 사용할 수 있는 패키지이며, 공식적으로 리덕스 로직을 사용하는데 이를 활용하기를 추천한다.

리덕스 툴킷 (이하 RTX)는 일반적인 유즈 케이스를 매우 간결하게 하는데 도움을 주는데, 여기에는 [스토어 설정](https://redux-toolkit.js.org/api/configureStore), [리듀서를 만들고 불면한 업데이트 로직을 작성하는법](https://redux-toolkit.js.org/api/createreducer), [심지어 모든 스테이트를 한번에 슬라이스하는 것](https://redux-toolkit.js.org/api/createslice) 도 포함되어 있다.

새로운 프로젝트에서 Redux를 사용하는 사람인이든, 혹은 기존의 애플리케이션을 단순화 하려는 사용자든 간에 리덕스 툴 킷은 리덕스 코드를 더 잘 만들 수 있도록 도와준다.

## 리액트 리덕스 앱 만들기

리액트와 리덕스가 설치된 앱을 만드는 방법으로 추천하는 것은 Create React App의 [오피셜 리액트+JS 템클릿](https://github.com/reduxjs/cra-template-redux)을 사용하는 것이다. 이는 리덕스 툴킷을 사용하는 장점과 리액트 리덕스를 리액트 컴포넌트에 연동하기 쉽게 해준다.

```
npx create-react-app my-app --template redux
```

### 일반적인 예제

**앱의 전체 상태는, 단일 스토어 내의 오브젝트 트리에 저장된다.** 상태 트리에 변화를 주는 유일한 방법은 액션을 emit하는 것인데, 이는 오브젝트에 어떤 변화가 있는지를 알려주는 것이다. 액션이 어떻게 상태 트리를 변화시키는지 지정하기 위해, 순수한 리듀서를 작성한다.

```javascript
import { createStore } from "redux"
/**
 아래 함수는 (state, action) => state로 구성된 순수한 함수인 리듀서 이다.

 state의 구조는 개발자에 따라 달려있다. 원시타입, 배열, 오프젝트, 혹은 Immutabale.js 데이터 구조가 될 수도 있다. 
 여기에서 중요한 것은 상태 객체를 바로 변경하지 말고, 상태가 변경되면 새로운 오브젝트를 반환해야 한다는 것이다. 

 아래 예제에서는, switch와 string을 사용했으며, function map을 사용하는등 다양한 방법을 시도해볼 수 있다. 
 */
function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1
    case "DECREMENT":
      return state - 1
    default:
      return state
  }
}

// 앱의 상태를 가지고 있을 스토어를 만든다.
// 여기애는 { subscribe, dispatch, getState } 가 있다.
let store = createStore(counter)

// 상태 변화의 응답에 따른 UI를 업데이트 하기 위해서는 subscribe()를 사용해야 한다.
// 보통 개발자들은 뷰 바인딩 라이브러리 (리액트 리덕스)를 subscribe()를 직접적으로 사용하는 것 보다 더 자주 쓸 것이다.
// 그러나 localStorage에서 현재 상태를 유지하는데에도 사용할 수 있다.

store.subscribe(() => console.log(store.getState()))

// 내부 상태값을 바꾸는 유일한 방법은 action을 dispatch하는 것이다.
//액션은 시리얼라이즈 할 수 있으며, 로그를 남기거나, 저장하거나, 이어서 할 수 있다.
store.dispatch({ type: "INCREMENT" })
// 1
store.dispatch({ type: "INCREMENT" })
// 2
store.dispatch({ type: "DECREMENT" })
// 1
```

상태를 직접적으로 수정하는 대신, 개발자가 원하는 변화를 `액션`이라는 플레인 오브젝트로 구체화 해야 한다. 그 다음, 리듀서라고 하는 특수 함수를 작성하여 모든 액션이 전체 애플리케이션을 어떻게 변화 시키는지 결정한다.

전형적인 리액트 앱에는 하나의 단일 스토어와 함께 단일 루트 리듀싱 함수가 존재할 뿐이다. 애플리케이션이 커짐에 다라서, 루트 리듀서를 더 작은 리듀서로 나누고, 각각의 상태 트리를 독립적으로 나누기도 한다. 이것은 리액트 앱에서 하나의 루트 컴포넌트가 있지만, 많은 작은 컴포넌트로 구성되어 있는 것과 비슷하다.

이러한 아키텍쳐는 좀 과해 보일 수 있지만, 이러한 배턴의 미덕은 크고 복잡한 애플리케이션을 잘 확장할 수 있다는 데에 있다. 또한 매우 강력한 개발자도구를 사용할 수 있다. 왜냐하면 이러한 액션으로 인한 모든 변화를 추적할 수 있기 때문이다. 모든 동작을 기록해뒀다가, 다시 재생해서 볼 수 있다.

## 예제 프로젝트

[여기](https://redux.js.org/introduction/examples)를 확인해보자.


## 리덕스 공부해보기 1 [리덕스 공식문서](https://redux.js.org/introduction/getting-started)를 스스로 대충 번역해본 글입니다.  리덕스는 자바스크립트 앱을 위한 **예측 가능한 상태 관리 컨테이너**다.  리덕스는 일관성 있게 동작하고, 서로 다른 환경 (클라이언트, 서버, 네이티브)에서 실행되며, 테스트하기 ...

리덕스 공부해보기 (1) - 개요

<h2 id="리덕스-공부해보기-1">리덕스 공부해보기 1</h2>
<a href="https://redux.js.org/introduction/getting-started">리덕스 공식문서</a>를 스스로 대충 번역해본 글입니다.
리덕스는 자바스크립트 앱을 위한 예측 가능한 상태 관리 컨테이너다.
리덕스는 일관성 있게 동작하고, 서로 다른 환경 (클라이언트, 서버, 네이티브)에서 실행되며, 테스트하기 쉬운 애플리케이션을 만들 수 있도록 도와준다. 최상단에는, 최상의 개발자 경험을 제공하기 위한 타임 트레블 디버거를 결합한 라이브 코드 편집 등의 기능을 제공한다.
리덕스는 리액트와 함께 사용할 수 있으며, 또한 다른 뷰 라이브러리와 사용할 수 있다. 리액트는 작지만 (디펜던시를 포함하더라도 2kb) 사용가능한 다양한 애드온을 가진 생태계를 가지고 있다.
<h3 id="설치">설치</h3>
<pre><code># NPM
npm install redux

# Yarn
yarn add redux
</code></pre>
이외도 또한 글로벌 변수인 <code>window.Redux</code>로 선언된 UMD 패키지로도 사용 가능하다. UMD 패키지는 스크립트 태그에 직접적으로 선언해서 사용 가능하다.
<h3 id="리덕스-툴-킷">리덕스 툴 킷</h3>
리덕스는 작고 비편향적이다. (대충 특정 플랫폼에 의존적이지 않다는 뜻) 또한 <a href="https://redux-toolkit.js.org/">Redux Toolkit</a>이라고 하는 패키지를 가지고 있는데, 이는 리덕스를 보다 효과적으로 사용할 수 있는 패키지이며, 공식적으로 리덕스 로직을 사용하는데 이를 활용하기를 추천한다.
리덕스 툴킷 (이하 RTX)는 일반적인 유즈 케이스를 매우 간결하게 하는데 도움을 주는데, 여기에는 <a href="https://redux-toolkit.js.org/api/configureStore">스토어 설정</a>, <a href="https://redux-toolkit.js.org/api/createreducer">리듀서를 만들고 불면한 업데이트 로직을 작성하는법</a>, <a href="https://redux-toolkit.js.org/api/createslice">심지어 모든 스테이트를 한번에 슬라이스하는 것</a> 도 포함되어 있다.
새로운 프로젝트에서 Redux를 사용하는 사람인이든, 혹은 기존의 애플리케이션을 단순화 하려는 사용자든 간에 리덕스 툴 킷은 리덕스 코드를 더 잘 만들 수 있도록 도와준다.
<h2 id="리액트-리덕스-앱-만들기">리액트 리덕스 앱 만들기</h2>
리액트와 리덕스가 설치된 앱을 만드는 방법으로 추천하는 것은 Create React App의 <a href="https://github.com/reduxjs/cra-template-redux">오피셜 리액트+JS 템클릿</a>을 사용하는 것이다. 이는 리덕스 툴킷을 사용하는 장점과 리액트 리덕스를 리액트 컴포넌트에 연동하기 쉽게 해준다.
<pre><code>npx create-react-app my-app --template redux
</code></pre>
<h3 id="일반적인-예제">일반적인 예제</h3>
앱의 전체 상태는, 단일 스토어 내의 오브젝트 트리에 저장된다. 상태 트리에 변화를 주는 유일한 방법은 액션을 emit하는 것인데, 이는 오브젝트에 어떤 변화가 있는지를 알려주는 것이다. 액션이 어떻게 상태 트리를 변화시키는지 지정하기 위해, 순수한 리듀서를 작성한다.
<pre class="language-javascript"><code class="language-javascript">import { createStore } from "redux"
/**
 아래 함수는 (state, action) => state로 구성된 순수한 함수인 리듀서 이다.

 state의 구조는 개발자에 따라 달려있다. 원시타입, 배열, 오프젝트, 혹은 Immutabale.js 데이터 구조가 될 수도 있다. 
 여기에서 중요한 것은 상태 객체를 바로 변경하지 말고, 상태가 변경되면 새로운 오브젝트를 반환해야 한다는 것이다. 

 아래 예제에서는, switch와 string을 사용했으며, function map을 사용하는등 다양한 방법을 시도해볼 수 있다. 
 */
function counter(state = 0, action) {
 switch (action.type) {
 case "INCREMENT":
 return state + 1
 case "DECREMENT":
 return state - 1
 default:
 return state
 }
}

// 앱의 상태를 가지고 있을 스토어를 만든다.
// 여기애는 { subscribe, dispatch, getState } 가 있다.
let store = createStore(counter)

// 상태 변화의 응답에 따른 UI를 업데이트 하기 위해서는 subscribe()를 사용해야 한다.
// 보통 개발자들은 뷰 바인딩 라이브러리 (리액트 리덕스)를 subscribe()를 직접적으로 사용하는 것 보다 더 자주 쓸 것이다.
// 그러나 localStorage에서 현재 상태를 유지하는데에도 사용할 수 있다.

store.subscribe(() => console.log(store.getState()))

// 내부 상태값을 바꾸는 유일한 방법은 action을 dispatch하는 것이다.
//액션은 시리얼라이즈 할 수 있으며, 로그를 남기거나, 저장하거나, 이어서 할 수 있다.
store.dispatch({ type: "INCREMENT" })
// 1
store.dispatch({ type: "INCREMENT" })
// 2
store.dispatch({ type: "DECREMENT" })
// 1
</code></pre>
상태를 직접적으로 수정하는 대신, 개발자가 원하는 변화를 <code>액션</code>이라는 플레인 오브젝트로 구체화 해야 한다. 그 다음, 리듀서라고 하는 특수 함수를 작성하여 모든 액션이 전체 애플리케이션을 어떻게 변화 시키는지 결정한다.
전형적인 리액트 앱에는 하나의 단일 스토어와 함께 단일 루트 리듀싱 함수가 존재할 뿐이다. 애플리케이션이 커짐에 다라서, 루트 리듀서를 더 작은 리듀서로 나누고, 각각의 상태 트리를 독립적으로 나누기도 한다. 이것은 리액트 앱에서 하나의 루트 컴포넌트가 있지만, 많은 작은 컴포넌트로 구성되어 있는 것과 비슷하다.
이러한 아키텍쳐는 좀 과해 보일 수 있지만, 이러한 배턴의 미덕은 크고 복잡한 애플리케이션을 잘 확장할 수 있다는 데에 있다. 또한 매우 강력한 개발자도구를 사용할 수 있다. 왜냐하면 이러한 액션으로 인한 모든 변화를 추적할 수 있기 때문이다. 모든 동작을 기록해뒀다가, 다시 재생해서 볼 수 있다.
<h2 id="예제-프로젝트">예제 프로젝트</h2>
<a href="https://redux.js.org/introduction/examples">여기</a>를 확인해보자.

```typescript
export async function MyMiddleware(
 ctx: Koa.Context,
 next: (ctx: Koa.Context) => Promise<any>
) {
 console.log("first middleware started..")

 // ctx를 조작하여 인증등의 옵션을 처리할 수 있다.
 const {
 header: { auth },
 } = ctx

 if (auth === "foo") {
 ctx.state.user = user
 } else {
 // 401
 ctx.status = 401
 // 다음 미들웨어로 넘어가지 못하고 끝나게 된다.
 return
 }

 // 다음 미들웨어로 넘어간다.
 await next(ctx)

 console.log("first middleware finished..")
}
```

이런 미들웨어를 활용해서 logger를 만들 수도 있다.

expressjs의 경우 https://github.com/expressjs/morgan 가 있고,

koa를 활용할 경우 https://github.com/koa-modules/morgan 를 활용하면 된다.

```typescript export async function MyMiddleware( ctx: Koa.Context, next: (ctx: Koa.Context) => Promise<any> ) { console.log("first middleware started..") // ctx를 조작하여 인증등의 옵션을 처리할 수 있다. co...

타입스크립트로 koa 미들웨어 만들기

## WebSocket

웹은 전형적으로 HTTP 요청에 대한 HTTP 응답을 받고, 이에 따라 브라우저 화면을 새로 만드는 방식이다. 따라서 데이터 통신은 요청과 응답이 한 쌍으로 묶여왔다. 그러나 웹 페이지가 보다 쉽게 상호작용을 하려면, 브라우저와 웹 사이에 이러한 요청 - 응답 방식이 아닌 더 자유로운 양방향 메시지 송수신 기술이 필요하다. 이러한 요구를 충족하기 위해 HTML5에서 표준안의 일부로 WebSocket이 등장하였다.

- 문서보기: https://html.spec.whatwg.org/multipage/web-sockets.html
- Caniuse: https://caniuse.com/#feat=websockets

## Socket.io

https://github.com/socketio/socket.io

Socket.io는 WebSocket이 나올 당시 (2011년 쯤?) 모든 브라우저가 지원하지는 않았으므로, 대다수의 브라우저에 WebSocket 기능을 사용할 수 있도록 구현한 라이브러리다. Github의 used by 로 봐서는 요즘에도 많이 쓰고 있는 것 같다.

### Express를 활용한 기본적인 예제

#### 1. 기본설정

먼저 npm에서 socket.io를 설치한다.

```javascript
var app = require("express")()
var http = require("http").createServer(app)
var io = require("socket.io")(http)

// index.html을 서빙한다
app.get("/", function(req, res) {
 res.sendFile(__dirname + "/index.html")
})

// 'connection' 이라는 이벤트를 감지한다.
io.on("connection", function(socket) {
 console.log("a user connected")
})

// http를 3000포트에서 실행한다.
http.listen(3000, function() {
 console.log("listening on *:3000")
})
```

이제 localhost:3000 으로 접속하면 아래와 같은 로그를 확인할 수 있다.

```
listening on *:3000
a user connected
```

연결 외에 연결 종료를 감지하면 아래와 같이 코드를 추가한다.

```javascript
io.on("connection", function(socket) {
 console.log("a user connected")
 socket.on("disconnect", function() {
 console.log("user disconnected")
 })
})
```

다시 실행하고, 페이지를 닫으면 이제 아래와 같이 로그가 찍힌다.

```
listening on *:3000
a user connected
user disconnected
a user connected
user disconnected
```

#### 2. 이벤트 보내기

이제 클라이언트에서 이벤트를 보내보자. 기본적으로 보낼 수 있는 객체는 JSON형태이며, binary data도 가능하다.

```html
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
 $(function() {
 var socket = io()
 $("form").submit(function(e) {
 e.preventDefault() // prevents page reloading
 socket.emit("chat message", $("#m").val())
 $("#m").val("")
 return false
 })
 })
</script>
```

```javascript
io.on("connection", function(socket) {
 socket.on("chat message", function(msg) {
 console.log("message: " + msg)
 })

 socket.on("disconnect", function() {
 console.log("user disconnected")
 })
})
```

```
> node index.js

listening on *:3000
message: 와
message: 이렇게 메시지가 가는구나
message: 신기하네
```

#### 3. 브로드캐스팅

브로드 캐스팅은 서버에서 현재 connection으로 접속한 모든 유저에게 이벤트를 보내는 것이다. `io.emit`을 활용하면 된다.

```javascript
io.on("connection", function(socket) {
 socket.on("chat message", function(msg) {
 // chat message를 보낸 사용자를 제외한 모든 사용자에게 emit
 // socket.broadcast.emit(msg)
 // 그냥 모든 사용자에게 emit
 io.emit("chat message", msg)
 })

 socket.on("disconnect", function() {
 console.log("user disconnected")
 })
})
```

이제 클라이언트 사이드에서 'chat message' 를 감지한다.

```html
<script>
 $(function() {
 var socket = io()
 $("form").submit(function(e) {
 e.preventDefault() // prevents page reloading
 socket.emit("chat message", $("#m").val())
 $("#m").val("")
 return false
 })
 socket.on("chat message", function(msg) {
 $("#messages").append($("<li>").text(msg))
 })
 })
</script>
```

![chat-example](images/chat-example.png)

기본적인 채팅기능은 만들었지만, 실제 활용하기엔 조금 거리가 있다. 소켓서버와 채팅서버가 같이있고, 채팅방도 단 하나 뿐이다. 다음 예제에서는 koa와 함께 소켓서버를 따로 구축하고, 채팅 (frontend)과 분리해서 여러개의 채팅방을 만드는 예제를 해보려고 한다.

## WebSocket 웹은 전형적으로 HTTP 요청에 대한 HTTP 응답을 받고, 이에 따라 브라우저 화면을 새로 만드는 방식이다. 따라서 데이터 통신은 요청과 응답이 한 쌍으로 묶여왔다. 그러나 웹 페이지가 보다 쉽게 상호작용을 하려면, 브라우저와 웹 사이에 이러한 요청 - 응답 방식이 아닌 더 자유로운 양방향 메시지 송수신 기술이 필요하다. 이러한 ...

Socket.IO 공부하기 (1)

네이버 클라우드 플랫폼의 서비스 중 하나인 https://www.ncloud.com/product/applicationService/sens 로 SMS를 발송하는 예제. ncloud서비스를 다 써본건 아니지만, `make_signature`는 전 서비스에 다 똑같이 쓸 수 있을 것 같은 기분이다.

```python
import time
import requests
import hashlib
import hmac
import base64

def send_sms(phone_number, subject, message):
  def make_signature(access_key, secret_key, method, uri, timestmap):
    secret_key = bytes(secret_key, 'UTF-8')

    message = method + " " + uri + "\n" + timestamp + "\n" + access_key
    message = bytes(message, 'UTF-8')
    signingKey = base64.b64encode(hmac.new(secret_key, message, digestmod=hashlib.sha256).digest())
    return signingKey

  #  URL
  url = 'https://sens.apigw.ntruss.com/sms/v2/services/ncp:sms:kr:99999999999:sample/messages'
  # access key
  access_key = 'access_key'
  # secret key
  secret_key = 'secret_key'
  # uri
  uri = '/sms/v2/services/ncp:sms:kr:99999999999:sample/messages'
  timestamp = str(int(time.time() * 1000))

  body = {
    "type":"LMS",
    "contentType":"COMM",
    "countryCode":"82",
    "from":"01012345678",
    "content": message,
    "messages":[
        {
            "to": phone_number,
            "subject": subject,
            "content": message
        }
    ]
  }

  key = make_signature(access_key, secret_key, 'POST', uri, timestamp)
  headers = {
    'Content-Type': 'application/json; charset=utf-8',
    'x-ncp-apigw-timestamp': timestamp,
    'x-ncp-iam-access-key': access_key,
    'x-ncp-apigw-signature-v2': key
  }


  res = requests.post(url, json=body, headers=headers)
  print(res.json())
  return res.json()
```


네이버 클라우드 플랫폼의 서비스 중 하나인 https://www.ncloud.com/product/applicationService/sens 로 SMS를 발송하는 예제. ncloud서비스를 다 써본건 아니지만, `make_signature`는 전 서비스에 다 똑같이 쓸 수 있을 것 같은 기분이다. ```python import time import req...

yceffort

리덕스 공부해보기 (2) - 리덕스의 탄생, 핵심 개념 그리고 3가지 원칙.

리덕스 공부해보기 (1) - 개요

타입스크립트로 koa 미들웨어 만들기

Socket.IO 공부하기 (1)

[Python] Send ncloud sms message