## Table of Contents

# Transfer learning image classifier

본 튜토리얼에서는, 브라우저 환경에서 Tesnorflow.js를 활용하여 커스텀 이미지 분류기를 만드는 방법을 알아봅니다.

이번 장에서는, 최소한의 데이터를 활용하여 높은 정확도를 가진 모델을 만들기 위하여 transfer learning(전이학습)을 활용해볼 것입니다. 우리는 이미 잘 학습되어 있는 MobileNet이라고 불리우는 이미지 분류기를 활용할 것입니다. 이 모델을 기반으로, 이미지 클래스를 사용자 정의 하여 학습해볼 것입니다.

## 1. Introduction

이번 튜토리얼에서는, 간단한 [teachable machine](https://teachablemachine.withgoogle.com/)을 만들어 볼 것입니다. teachable machine이란, 자바스크립트로 작성된 유연하고도 강력한 머신러닝 라이브러리인 tensorflow.js를 활용하여 브라우저에서 작동할 수 있는 커스텀 이미지 분류기 입니다. 먼저 MobileNet이라고 불리우는 모델을 브라우저 환경에서 불러오고 실행해볼 것입니다. 그 다음에는 전이학습을 활용하여 이미 학습된 MobileNet 모델을 커스터마이징하고 우리의 앱에서 실행할 수 있도록 할 것입니다.

이 튜토리얼에서는 teachable machine 애플리케이션을 만드는데 필요한 이론적 배경을 소개하지는 않습니다. 만약 궁금하다면, [이 튜토리얼](https://beta.observablehq.com/@nsthorat/how-to-build-a-teachable-machine-with-tensorflow-js)을 참고하시기 바랍니다.

### 배우게 될 것

- 이미 학습된 MobileNet 모델을 불러오고 새로운 데이터로 예측하는 방법
- 웹캠을 활용하여 예측하는 법
- MobileNet을 즉시 활성화하여, 웹캠에서 인식된 이미지를 분류하는 법

## 2. 요구 사항

1. 최신버전의 크롬 또는 모던 브라우저
2. 로컬 머신에서 실행할 수 있는 텍스트 에디터, 혹은 웹에서 이용할 수 있는 Codepen이나 Glitch
3. HTML, CSS, Javascript, Chrome Devtool에 대하한 기본적인 지식
4. 신경망에 대한 높은 수준의 이해. 만약 이에 관련된 지식이 필요하다면, [3blue1brown](https://www.youtube.com/watch?v=aircAruvnKk)이나 [video on Deep Learning in Javascript by Ashi Krishnan](https://www.youtube.com/watch?v=SV-cgdobtTA)를 보는 것을 추천합니다.

## 3. Tensorflow.js와 MobileNet 불러오기

index.html을 열고 아래 코드를 넣어주세요.

```html
<html>
  <head>
    
    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
    <script src="https://unpkg.com/@tensorflow-models/mobilenet"></script>
  </head>
  <body>
    <div id="console"></div>
    
    <img
      id="img"
      crossorigin
      src="https://i.imgur.com/JlUvsxa.jpg"
      width="227"
      height="227"
    />
    
    <script src="index.js"></script>
  </body>
</html>
```

## 4. 브라우저에서 MobileNet을 로딩

`index.js`를만들고 연다음에, 아래 코드를 넣어주세요.

```javascript
let net

async function app() {
  console.log('Loading mobilenet..')

  // Load the model.
  net = await mobilenet.load()
  console.log('Successfully loaded model')

  // Make a prediction through the model on our image.
  const imgEl = document.getElementById('img')
  const result = await net.classify(imgEl)
  console.log(result)
}

app()
```

## 5. MobileNet을 테스트 하기

index.html을 웹브라우저에서 열어보세요.

자바스크립트 콘솔에, 사진의 강아지가 어떤 강아지인지 예측한 작업내역을 볼 수 있습니다. 이 작업은 모델을 다운로드 하는데 시간이 약간의 시간이 걸릴 수 있으므로 조금 기다리시기 바랍니다.

```json
[
  { "className": "kelpie", "probability": 0.5226836204528809 },
  {
    "className": "American Staffordshire terrier, Staffordshire terrier, American pit bull terrier, pit bull terrier",
    "probability": 0.1948588341474533
  },
  { "className": "malinois", "probability": 0.11830379068851471 }
]
```

## 6. 브라우저에서 웹캠을 활용하여 MobileNet 모델을 실행하기

지금부터는 좀 더 실시간 데이터를 다뤄보도록 하겠습니다. 웹캠으로 부터 넘어온 이미지를 바탕으로 예측을 할 수 있도록 작업해보겠습니다.

먼저, 웹캠을 video element에 설정해보겠습니다. `index.html` 파일을 열어, `body` 에 아래 코드를 넣고, 강아지 이미지 로딩을 위해 사용했던 `img` 태그를 삭제하세요.

```html
<video autoplay playsinline muted id="webcam" width="224" height="224"></video>
```

`index.js`를 열고 파일의 최상단에 위 코드를 넣어주세요.

```javascript
const webcamElement = document.getElementById('webcam')
```

이제 `app()` function 내부에서, 이미지를 기반으로한 예측을 제거하고 대신 웹캠 엘리먼트를 통해 예측을 하는 무한루프 로직을 만들 수 있습니다.

```javascript
async function app() {
  console.log('Loading mobilenet..')

  // Load the model.
  net = await mobilenet.load()
  console.log('Successfully loaded model')

  // Create an object from Tensorflow.js data API which could capture image
  // from the web camera as Tensor.
  const webcam = await tf.data.webcam(webcamElement)
  while (true) {
    const img = await webcam.capture()
    const result = await net.classify(img)

    document.getElementById('console').innerText = `
      prediction: ${result[0].className}\n
      probability: ${result[0].probability}
    `
    // Dispose the tensor to release the memory.
    img.dispose()

    // Give some breathing room by waiting for the next animation frame to
    // fire.
    await tf.nextFrame()
  }
}
```

웹페이지에서 콘솔창을 열어본다면, MobileNet에서 웹캠의 매 프레임을 바탕으로 예측한 결과를 볼수 있을 것입니다.

그러나 이는 ImageNet의 데이터 세트가 일반적으로 웹캠에 나타나는 이미지와 매우 많이 다르기 때문에 정확하지 않을 수 있습니다. 이것을 테스트 해보는 한가지 방법은, 노트북 카메라 (웹캠)에 강아지 사진이 있는 폰을 비추는 것입니다.

## 7. MobileNet에 Custom 분류기를 추가하기

이제, 조금 더 유용하게 만들어 봅시다. 우리는 웹캠을 활용하여 3개의 object로 분류하는 분류기를 만들어 볼 것입니다. 분류를 위해서 MobileNet을 활용할 것입니다만, 이번에는 특정 웹캠 이미지에 대한 모델의 내부활성화를 활용하여, (internal representation, activation) 분류에 사용해 볼 것입니다.

여기에서는 "K-Nearest Neighbors Classifier"라고 불리는 모듈을 사용할 것입니다. 이는 웹캠에서 입력되는 이미지를 서로다른 카테고리로 효과적으로 분리해주며, 사용자가 예측을 시도할 때 단순히 가장 확률이 높은 결과 하나만 리턴하게 할 것입니다.

KNN Classifier를 index.html의 head 태그 마지막에 import 하세요.

```html
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier"></script>
```

index.html의 마지막에 세개의 버튼을 추가합니다. 각각의 버튼들은 이미지를 모델에서 훈련시키는데 사용됩니다.

```html
<button id="class-a">Add A</button>
<button id="class-b">Add B</button>
<button id="class-c">Add C</button>
```

`index.js`의 최상단에서는 classifier를 선언합니다.

```javascript
const classifier = knnClassifier.create()
```

app 함수를 업데이트 합니다.

```javascript
async function app() {
  console.log('Loading mobilenet..')

  // 모델을 로드한다.
  net = await mobilenet.load()
  console.log('Successfully loaded model')

  // 웹캠의 데이터를 tensor로 변환하는 tensorflwjs api를 만든다.
  const webcam = await tf.data.webcam(webcamElement)

  // 웹캠에서 이미지를 로딩하고, 특정 클래스와 연관짓는다.
  const addExample = async (classId) => {
    // Capture an image from the web camera.
    const img = await webcam.capture()

    // conv_preds라는 활성함수를 가져오고, KNN 분류기에 넘긴다.
    const activation = net.infer(img, 'conv_preds')

    // 중간 활성화 함수를 분류기에 넘긴다.
    classifier.addExample(activation, classId)

    // tensor를 메모리에 dispose 한다.
    img.dispose()
  }

  // 버튼을 클릭하면, 각 클래스별로 예제를 추가한다.
  document
    .getElementById('class-a')
    .addEventListener('click', () => addExample(0))
  document
    .getElementById('class-b')
    .addEventListener('click', () => addExample(1))
  document
    .getElementById('class-c')
    .addEventListener('click', () => addExample(2))

  while (true) {
    if (classifier.getNumClasses() > 0) {
      const img = await webcam.capture()

      // 웹켐의 mobilnet의 활성함수를 가져온다.
      const activation = net.infer(img, 'conv_preds')
      // 분류기에서 가장 근접한 결과를 가져온다.
      const result = await classifier.predictClass(activation)

      const classes = ['A', 'B', 'C']
      document.getElementById('console').innerText = `
        prediction: ${classes[result.label]}\n
        probability: ${result.confidences[result.label]}
      `

      img.dispose()
    }

    await tf.nextFrame()
  }
}
```

이제 index.html 페이지를 로드 하면, 세 클래스에 각각에 대한 이미 캡처를 하기 위하여 공통 오브젝트를 사용하거나, 얼굴/바디 제스쳐를 활용할 수 있다. `add` 버튼을 클릭할 때마다, 하나의 이미지가 예제로서 해당 클래스에 추가됩니다. 이작업을 하는 동안, 모델은 웹캠 이미지에 대한 예측을 계속하고 결과를 실시간으로 보여줍니다.

## 8. Optional: 예제를 확장하기

이제 아무 동작도 나타내지 않는 클래스를 추가해 보세요.

## 9. 우리가 배운 것

이 예제에서, Tensorflow.js를 활용하여 간단한 머신러닝 학습 웹 애플리케이션을 구현했습니다. 웹캠에서 이미지를 분류하기 위해 미리 학습된 MobileNet 모델을 로드하고 사용했습니다. 그런 다음 모델을 커스텀하여 이미지를 세가지 사용자 정의 범주로 분류합니다.

[예제](https://codesandbox.io/s/tensorflowjs-07-build-an-image-classifier-28kc5)

`toc tight: true, from-heading: 1 to-heading: 3 ` # Transfer learning image classifier 본 튜토리얼에서는, 브라우저 환경에서 Tesnorflow.js를 활용하여 커스텀 이미지 분류기를 만드는 방법을 알아봅니다. 이번 장에서는, 최소한의 데이터를 활용하여 높은 정확도를 가진 모델...

Tensorflow.js - 07. Build an image classifier

# 전이 학습이란 무엇인가?

정교한 딥러닝 모델은 수백만개의 파라미터 (가중치)를 가지고 있으며, 이를 처음 부터 훈련하려면 엄청난 양의 컴퓨팅 자원이 필요한 경우가 많습니다. 전이학습은, 이미 관련된 작업에 대해 훈련받은 모델의 한 부분을 취해서, 새로운 모델에서 이를 재사용함으로써 이러한 컴퓨팅 자원의 소모를 단축시키는 기술입니다.

예를 들어, 다음 튜토리얼은 이미 이미지내에서 1000 여가지의 다른 종류의 이미지를 인식하도록 훈련된 모델을 활용해, 자신만의 인식기를 만드는 방법을 보여줍니다. 사전에 학습된 모델의 기존의 지식을 활용하여, 원래 그 모델이 썼던것 보다 훨씬 더 적은 학습용 데이터를 활용하여, 자신만의 이미지를 인식하도록 할 수 있습니다.

이는 브라우저나 모바일과 같은 리소스가 제약되어 있는 환경에서 모델을 커스터마이징 하는 것 뿐만 아니라, 새로운 모델을 빠르게 개발하는데에도 굉장히 유용합니다.

전이학습을 할 때, 보통 원래 모델의 가중치를 조정하지 않습니다. 대신, 우리는 최종 레이어를 제거하여, 이렇게 잘린 모델의 출력위에 새로운 (얇은) 모델을 학습시킵니다. 그리고 이 기법은 다음 두 튜토리얼에서 진행할 것입니다.

- [Build a transfer-learning based image classifier](/2020/01/tensorflowjs-07-build-an-image-classifier/) [원문](https://www.tensorflow.org/js/tutorials/transfer/image_classification)
- [Build a transfer-learning based audio recognizer](/2020/01/tensorflowjs-08-build-an-audio-recognizer/) [원문](https://www.tensorflow.org/js/tutorials/transfer/audio_recognizer)


`toc tight: true, from-heading: 1 to-heading: 3 ` # 전이 학습이란 무엇인가? 정교한 딥러닝 모델은 수백만개의 파라미터 (가중치)를 가지고 있으며, 이를 처음 부터 훈련하려면 엄청난 양의 컴퓨팅 자원이 필요한 경우가 많습니다. 전이학습은, 이미 관련된 작업에 대해 훈련받은 모델의 한 부분을 취해서, 새로운 ...

Tensorflow.js - 06. What is Transfer Learning

<h1 id="전이-학습이란-무엇인가">전이 학습이란 무엇인가?</h1>
<p>정교한 딥러닝 모델은 수백만개의 파라미터 (가중치)를 가지고 있으며, 이를 처음 부터 훈련하려면 엄청난 양의 컴퓨팅 자원이 필요한 경우가 많습니다. 전이학습은, 이미 관련된 작업에 대해 훈련받은 모델의 한 부분을 취해서, 새로운 모델에서 이를 재사용함으로써 이러한 컴퓨팅 자원의 소모를 단축시키는 기술입니다.</p>
<p>예를 들어, 다음 튜토리얼은 이미 이미지내에서 1000 여가지의 다른 종류의 이미지를 인식하도록 훈련된 모델을 활용해, 자신만의 인식기를 만드는 방법을 보여줍니다. 사전에 학습된 모델의 기존의 지식을 활용하여, 원래 그 모델이 썼던것 보다 훨씬 더 적은 학습용 데이터를 활용하여, 자신만의 이미지를 인식하도록 할 수 있습니다.</p>
<p>이는 브라우저나 모바일과 같은 리소스가 제약되어 있는 환경에서 모델을 커스터마이징 하는 것 뿐만 아니라, 새로운 모델을 빠르게 개발하는데에도 굉장히 유용합니다.</p>
<p>전이학습을 할 때, 보통 원래 모델의 가중치를 조정하지 않습니다. 대신, 우리는 최종 레이어를 제거하여, 이렇게 잘린 모델의 출력위에 새로운 (얇은) 모델을 학습시킵니다. 그리고 이 기법은 다음 두 튜토리얼에서 진행할 것입니다.</p>
<ul>
<li><a href="/2020/01/tensorflowjs-07-build-an-image-classifier/">Build a transfer-learning based image classifier</a> <a href="https://www.tensorflow.org/js/tutorials/transfer/image_classification">원문</a></li>
<li><a href="/2020/01/tensorflowjs-08-build-an-audio-recognizer/">Build a transfer-learning based audio recognizer</a> <a href="https://www.tensorflow.org/js/tutorials/transfer/audio_recognizer">원문</a></li>
</ul>

## Table of Contents

## 1. 서론

자바스크립트에서 http 요청을 하는 것은 이제 비일비재한 일이 되었다. 서버에서 모든 데이터를 가져와서 static 한 html을 만들어서 보여주고 있는 웹페이지는 아마 찾기 어려울 것이다. 맨 처음 웹을 배울 때, jquery의 ajax 요청을 배우 던 것이 한 5년 전 쯤 되었다. 비동기 http 요청이 비일비재한 요즘, 지금은 그 기술이 어디까지 왔을까? 그리고 어떻게 써야 더 깔끔하게 쓸수 있을까?

## 2. XMLHttpRequest

- [Caniuse: XMLHttpRequest](https://caniuse.com/#search=XMLHttpRequest)
- [MDN: XMLHttpRequest](https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest)
- [whatwg: XMLHttpRequest](https://xhr.spec.whatwg.org/)

가장 원초적으로 요청을 날리는 방법이다. 지금이 API를 이용하여 호출하고 있는 사람은 아마 없을 것이다.

```javascript
var xmlHttp = new XMLHttpRequest()

xmlHttp.onreadystatechange = function () {
  if (this.status == 200 && this.readyState == this.DONE) {
    console.log(xmlHttp.responseText)
  }
}

xmlHttp.open('GET', '/yceffort/request.txt', true)

xmlHttp.send()
```

어차피 쓸 일도 거의 없고, 스펙은 위 링크에서 자세히 나와있을 테니 생략한다.

## 3. JQuery Ajax

아직도 많은 곳에서 쓰고 있을 우리 친구 JQuery와 그의 친구 `JQuery.Ajax`다.

- [jquery: ajax](https://api.jquery.com/jquery.ajax/)

```javascript
$.ajax({
  url: '/yceffort/request.txt',
  success: function (data) {
    console.log(data)
  },
})
```

마찬가지로 자세한 스펙 설명은 마찬가지로 생략한다. 물론 여기까지만 안다 하더라도, 왠만한 수준의 request는 처리할 수 있다. 그러나 복잡한 유즈케이스에서는 조금 더 이야기하기 피곤해진다.

만약 1번 request의 정보를 받아서 2번 request를 날리고, 3번 request를 날려야 하면 어떻게 될까?

```javascript
$.ajax({
  url: "/yceffort/request1.json",
  success: function(data) {
    const result = JSON.parse(data);
    $.ajax({
        url: `/yceffort/request2.json?data=${result.data}`
        success: function(data2){
            const result2 = JSON.parse(data2);
            $.ajax({
                url: `/yceffort/request2.json?data=${result2.data}`
                success: function(data3){
                    ......
                }
            })
        }
    })
  },
})
```

[Promise의 callback hell](http://callbackhell.com/)의 지옥도가 여기서도 보이게 된다. 물론 이래저래 callback을 풀어내는 방법도 있지만, 여전히 then(success)의 체이닝 콤보를 벗어날 수가 없다.

## 3. async await & fetch

> fetch는 물론 promise로도 쓸 수 있다.

es7 에서 추가된 async await과 fetch api를 활용한다면, 위의 코드를 조금더 깔끔 하게 쓸 수 있다.

- [MDN: async](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function)
- [MDN: await](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await)
- [MDN: fetch](https://developer.mozilla.org/ko/docs/Web/API/Fetch_API)
- [wahtwg: fetch](https://fetch.spec.whatwg.org/)

```javascript
const response1 = await fetch('/yceffort/data1.json')
const result1 = await response1.json()

const response2 = await fetch(`/yceffort/data2.json?${result1.data}`)
const result2 = await response2.json()

const response3 = await fetch(`/yceffort/data3.json?${result2.data}`)
const result3 = await response3.json()
```

fetch api는 XMLHttpRequest와 비슷하지만, 조금더 강력하고 유연한 조작이 가능하다. 또한 CORS, http origin header에 관한 개념도 정리되어 있다.

```javascript
fetch("/yceffort/data1.json", {
  method: "POST",
  mode: 'cors',
  cache: 'no-cache',
  headers:  {"Content-Type", "application/json"},
  credentials: "same-origin",
  body: JSON.stringify(bodyData)
});
```

이 외에도 다양한 옵션들이 있으니, 스펙을 참고해보자. 그러나 이 fetch api에는 단점이 존재한다. 바로 우리가 사랑하는 익스플로러를 지원하지 않는다는 것이다.

[Caniuse: Fetch](https://caniuse.com/#search=fetch)

아쉽게도, fetch를 바로 쓸 수는 없다. (이미 async, await을 쓴 시점 부터 글렀지만)

## 4. fetch polyfill

여러가지 fetch Polyfill이 존재하지만, 그 중에서 가장 많이 사용되는 것은 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)와 [axios](https://github.com/axios/axios)가 있는 것 같다. 둘 중에 뭘 써야 되는 글이 [여기](https://gist.github.com/jsjoeio/0fd8563bc23ef852bc921836512992d9) [저기](https://stackoverflow.com/questions/40844297/what-is-difference-between-axios-and-fetch) 많이 존재한다. 대충 요약하면, isomorphic-fetch은 polyfill이 필요한 대신 원래 fetch와 가장 비슷하고(이름부터가 `isomorphic`다!) 가볍다. 반면에 axios는 사용법은 조금 다르지만 무겁고 더 여러가지 기능을 제공하는 것 같다. 취향 껏 쓰자. 여기서는 `isomorphic-fetch`를 기준으로 쓴다.

## 5. deep dive to fetch

데이터를 제공하는 api 서버가 존재하고, 여기에서 모든 응답을 json으로 내려 준다고 가정하자. 어떠한 경우에도 사용자에게 에러를 보여주지 않고 (100% 커버할 순 없지만) 최대한 자연스럽게 fetch를 해야 한다면 어떻게 해야할까?

### 5-1. 에러 처리

```javascript
const response = await `/yceffort/data1`

// 200이 아닐 경우의 처리
if (!response.ok) {
  captureException(`failed to fetch /yceffort/data1. [${response.code}]`)
}

try {
  const result = await response.json()
} catch (e) {
  // json 으로 파싱을 못할때의 처리
  captureException(`failed to parse /yceffort/data1, ${e}`)
}
```

### 5-2. Abortable Fetch

[참고](https://developers.google.com/web/updates/2017/09/abortable-fetch?hl=ko)

몇몇 fetch 요청은 그 시간이 오래 걸리거나, 사용자의 요청으로 취소를 할 수도 있어야 하는 경우가 발생한다. 그 경우 사용하는 것이 [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)다.

```javascript
const controller = new AbortController()
const signal = controller.signal

setTimeout(() => controller.abort(), 5000)

fetch(url, { signal })
  .then((response) => {
    return response.text()
  })
  .then((text) => {
    console.log(text)
  })
```

5초 뒤에 자동으로 abort 되는 코드이다. fetch를 abort하게되면, request와 response 모두 취소된다. 따라서, `response.text()`도 취소된다.

```
DOMException: The user aborted a request.
```

fetch시에 발생한 exception이 abort인지를 구별하기 위해서는 아래와 같이 처리하면 된다.

```javascript
fetch(url, { signal })
  .then((response) => {
    return response.text()
  })
  .then((text) => {
    console.log(text)
  })
  .catch((err) => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted by user')
    } else {
      console.error('other error', err)
    }
  })
```

### 5-3. fetch in react

이렇게 복잡한 fetch를 리액트스럽게 처리하는 라이브러리가 여기저기 있다.

- [use-http](https://github.com/alex-cory/use-http)
- [useSWR](https://github.com/zeit/swr)

대충 여기서 얘기 한 것 들을 기준으로, `useFetch`를 만들어 보자.

```javascript
const useFetch = (url, options) => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const controller = new AbortController()
  const signal = controller.signal

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const response = await fetch(url, {...options, {signal});
        const result = await res.json();
        setResponse(result);
        setIsLoading(false)
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);
  return { response, error, isLoading, signal };
};
```

## 6. 결론

잘 만들어진 걸 가져다 쓰자.


`toc tight: true, from-heading: 2 to-heading: 3 ` ## 1. 서론 자바스크립트에서 http 요청을 하는 것은 이제 비일비재한 일이 되었다. 서버에서 모든 데이터를 가져와서 static 한 html을 만들어서 보여주고 있는 웹페이지는 아마 찾기 어려울 것이다. 맨 처음 웹을 배울 때, jquery의 ajax ...

자바스크립트에서 http 요청하기 - fetch에 대한 고찰

## Table of Contents

# Training and Prediction in Node.js

본 튜토리얼에서는 MLBAM에서 제공하는 피쳐 센서 데이터를 바탕으로, 야구의 칭 유형을 추측하는 모델을 만들어볼 예정입니다. 이 튜토리얼은 서버사이드 애플리케이션인 Node.js에서 진행될 예정입니다.

이 튜토리얼에서는 `tfjs-node`를 서버사이드에서 npm package로 설치하고, 모델을 만든 다음, 실제로 피치 센서 데이터로 훈련까지 진행해 볼 것입니다. 또한 학습 진행 상태를 클라이언트에 제공하고, 훈련된 모델을 바탕으로 예측하는 서버/클라이언트 아키텍쳐도 만들어 볼 것입니다.

## 1. 소개

이 시간에는 강력하고 유연한 자바스크립트 머신러닝 라이브러리인 Tensorflow.js를 활용하여, 서버에서 야구 피치 유형을 학습하고 분류하는 방법을 배우게 됩니다. 피치 센서 데이터에서 미치 유형을 예측하고, 웹 클라이언트에서 예측을 호출하는 모델을 가진 웹 애플리케이션을 만들어볼 것입니다. 이 코드의 완전 버전은 [Github Repo](https://github.com/tensorflow/tfjs-examples/tree/master/baseball-node)에 있습니다.

배우게 될 것

- Nodejs를 활용하여 npm package로 tensorflow.js를 설치하는 법
- Nodejs 환경에서 데이터를 학습시키고 테스트 하는법
- Nodejs 서버에서 Tensorflowjs에서 모델을 훈련시키는 법
- 학습된 모델을 배포해서 클라이언트/서버 애플리케이션에서 작동시키는 법

## 2. 요구 사항

본 튜토리얼을 완료하기 위해서는

- 최신버전의 크롬 또는 다른 모던 브라우저
- 텍스트 에디터와 로컬 머신에서 실행하기 위한 커맨드 터미널
- HTML, CSS, Javascript, Chrome Devtool에 대한 기본적인 지식
- 신경망에 대한 높은 수준의 개념적 이해. 혹시 학습이 필요하다면, 이 두 비디오 [1](https://www.youtube.com/watch?v=aircAruvnKk) [2](https://www.youtube.com/watch?v=SV-cgdobtTA)를 보는 것을 추천합니다.

## 3. Nodejs.app 설치

Nodejs와 npm을 설치합니다. 지원하는 플랫폼과 디펜던시를 확인하기 위해서는, [tfjs-node 설치가이드](https://github.com/tensorflow/tfjs-node/blob/master/README.md)를 참고해주세요.

Nodejs app을 설치하기 위한`./baseball` 폴더를 만듭니다. 이 두개의 링크 [package.json](https://github.com/tensorflow/tfjs-examples/blob/master/baseball-node/package.json) [webpack.config.js](https://github.com/tensorflow/tfjs-examples/blob/master/baseball-node/webpack.config.js) 를 다운받고 해당 폴더에 복사하여
npm package dependency를 설정해주세요. 그리고 `npm install` 명령어를 이용하여 디펜던시를 설치합니다.

> tfjs-node의 링크가 [여기](https://github.com/tensorflow/tfjs/tree/master/tfjs-node) 로 변경되었습니다.

```shell
$ cd baseball
$ ls
package.json  webpack.config.js
$ npm install
...
$ ls
node_modules  package.json  package-lock.json  webpack.config.js
```

이제 코드를 작성하고 모델을 훈련시킬 준비가 되었습니다.

## 4. 학습/테스트용 데이터 설치하기

아래 하단에 있는 두 링크의 데이터를 활용해 학습과 테스트를 할 거십니다. 두 파일을 다운받아서 살펴보세요.

[pitch_type_training_data.csv](https://storage.googleapis.com/mlb-pitch-data/pitch_type_training_data.csv)

[https://storage.googleapis.com/mlb-pitch-data/pitch_type_test_data.csv](https://storage.googleapis.com/mlb-pitch-data/pitch_type_test_data.csv)

학습용 데이터를 살펴봅시다.

```
vx0,vy0,vz0,ax,ay,az,start_speed,left_handed_pitcher,pitch_code
7.69914900671662,-132.225686405648,-6.58357157666866,-22.5082591074995,28.3119270826735,-16.5850095967027,91.1,0,0
6.68052308575228,-134.215511616881,-6.35565979491619,-19.6602769147989,26.7031848314466,-14.3430602022656,92.4,0,0
2.56546504690782,-135.398673977074,-2.91657310799559,-14.7849950586111,27.8083916890792,-21.5737737390901,93.1,0,0
```

이 데이터에는 8개의 정보가 있습니다.

- 공의 속도 (vx0, vy0, vz0)
- 공의 가속 (ax, ay, az)
- 시구 속도 (starting speed of pitch) (이게 정확한 번역이 맞나...)
- 투수가 좌투인지 여부

그리고 결과 정보엔 아래와 같이 나옵니다.

- 7개의 구질 중 하나의 값

```
Fastball (2-seam), Fastball (4-seam), Fastball (sinker), Fastball (cutter), Slider, Changeup, Curveball
```

우리의 목표는 주어진 투구 센서 데이터로 어떤 구질인지 맞추는 모델을 만드는 것입니다.

모델을 만들기전에, 학습 데이터와 테스트 데이터를 준비해야 합니다. `./baseball` 에 `pitch_type.js` 파일을 생성한 후, 아래의 코드를 복사해서 넣어주셋요. 이 코드는 [tf.data.csv](https://js.tensorflow.org/api/latest/#data.csv)를 활용하여 데이터를 로딩합니다. 또한 데이터를 min-maxn normalization을 통해 정규화합니다. (항상 하기를 추천합니다)

```javascript
const tf = require('@tensorflow/tfjs')

// 주어진 값 사이로 정규화 하는 함수
function normalize(value, min, max) {
  if (min === undefined || max === undefined) {
    return value
  }
  return (value - min) / (max - min)
}

// 데이터는 URL또는 로컬 파일로 로딩가능
const TRAIN_DATA_PATH =
  'https://storage.googleapis.com/mlb-pitch-data/pitch_type_training_data.csv'
const TEST_DATA_PATH =
  'https://storage.googleapis.com/mlb-pitch-data/pitch_type_test_data.csv'

// 데이터 학습을 위한 상수
const VX0_MIN = -18.885
const VX0_MAX = 18.065
const VY0_MIN = -152.463
const VY0_MAX = -86.374
const VZ0_MIN = -15.5146078412997
const VZ0_MAX = 9.974
const AX_MIN = -48.0287647107959
const AX_MAX = 30.592
const AY_MIN = 9.397
const AY_MAX = 49.18
const AZ_MIN = -49.339
const AZ_MAX = 2.95522851438373
const START_SPEED_MIN = 59
const START_SPEED_MAX = 104.4

const NUM_PITCH_CLASSES = 7
const TRAINING_DATA_LENGTH = 7000
const TEST_DATA_LENGTH = 700

// csv 데이터를 features와 labels로 변환함
// 각 feature 필드는 위에서 선언한 상수를 기반으로 정규화 됨
const csvTransform = ({ xs, ys }) => {
  const values = [
    normalize(xs.vx0, VX0_MIN, VX0_MAX),
    normalize(xs.vy0, VY0_MIN, VY0_MAX),
    normalize(xs.vz0, VZ0_MIN, VZ0_MAX),
    normalize(xs.ax, AX_MIN, AX_MAX),
    normalize(xs.ay, AY_MIN, AY_MAX),
    normalize(xs.az, AZ_MIN, AZ_MAX),
    normalize(xs.start_speed, START_SPEED_MIN, START_SPEED_MAX),
    xs.left_handed_pitcher,
  ]
  return { xs: values, ys: ys.pitch_code }
}

const trainingData = tf.data
  .csv(TRAIN_DATA_PATH, { columnConfigs: { pitch_code: { isLabel: true } } })
  .map(csvTransform)
  .shuffle(TRAINING_DATA_LENGTH)
  .batch(100)

// evaluation을 위해 학습용 데이터를 한 배치로 모두 로딩함
const trainingValidationData = tf.data
  .csv(TRAIN_DATA_PATH, { columnConfigs: { pitch_code: { isLabel: true } } })
  .map(csvTransform)
  .batch(TRAINING_DATA_LENGTH)

// evaluation을 위해 테스트용 데이터를 한 배치로 모두 로딩함
const testValidationData = tf.data
  .csv(TEST_DATA_PATH, { columnConfigs: { pitch_code: { isLabel: true } } })
  .map(csvTransform)
  .batch(TEST_DATA_LENGTH)
```

## 5. 구질을 구별하는 모델 만들기

이제 모델을 만들 준비를 마쳤습니다. [tf.layers](https://js.tensorflow.org/api/latest/#layers.dense)를 활용하여 input 데이터 (8개의 array로 이루어진)를 ReLU를 활성화 유닛으로 구성된 3개의 hidden fully-connected 레이어를 활용하여 연결하고, 이어서 7개의 유닛으로 구성된 1개의 softmax 출력 레이어를 활용하여 각 구질 유형 중 하나를 나타내도록 합니다.

모델을 학습 할 때는 adam 옵티마이저를 활용하고, 손실함수로는 sparseCategoricalCrossentroy를 활용합니다. 이러한 선택의 이유가 궁금하다면, [모델 훈련 가이드](https://www.tensorflow.org/js/guide/train_models)를 참고하세요.

아래의 코드를 `pitch_type.js`에 추가해주세요.

```javascript
const model = tf.sequential()
model.add(tf.layers.dense({ units: 250, activation: 'relu', inputShape: [8] }))
model.add(tf.layers.dense({ units: 175, activation: 'relu' }))
model.add(tf.layers.dense({ units: 150, activation: 'relu' }))
model.add(tf.layers.dense({ units: NUM_PITCH_CLASSES, activation: 'softmax' }))

model.compile({
  optimizer: tf.train.adam(),
  loss: 'sparseCategoricalCrossentropy',
  metrics: ['accuracy'],
})
```

학습을 메인서버에서 실행시키는 코드는 나중에 작성합니다.

`pitch_type.js`를 완성하기 위해, 검증 및 테스트 데이터 세트를 평가하고, 단일 표본의 구질을 예측하고, 정확도 메트릭을 계산하는 함수를 작성해봅시다. `pitch_type.js`의 끝에 아래의 코드를 추가해주세요.
\

```javascript
// 학습용 데이터에서 도출한 각 구질별 확률을 리턴합니다.
async function evaluate(useTestData) {
  let results = {}
  await trainingValidationData.forEachAsync((pitchTypeBatch) => {
    const values = model.predict(pitchTypeBatch.xs).dataSync()
    const classSize = TRAINING_DATA_LENGTH / NUM_PITCH_CLASSES
    for (let i = 0; i < NUM_PITCH_CLASSES; i++) {
      results[pitchFromClassNum(i)] = {
        training: calcPitchClassEval(i, classSize, values),
      }
    }
  })

  if (useTestData) {
    await testValidationData.forEachAsync((pitchTypeBatch) => {
      const values = model.predict(pitchTypeBatch.xs).dataSync()
      const classSize = TEST_DATA_LENGTH / NUM_PITCH_CLASSES
      for (let i = 0; i < NUM_PITCH_CLASSES; i++) {
        results[pitchFromClassNum(i)].validation = calcPitchClassEval(
          i,
          classSize,
          values,
        )
      }
    })
  }
  return results
}

async function predictSample(sample) {
  let result = model.predict(tf.tensor(sample, [1, sample.length])).arraySync()
  var maxValue = 0
  var predictedPitch = 7
  for (var i = 0; i < NUM_PITCH_CLASSES; i++) {
    if (result[0][i] > maxValue) {
      predictedPitch = i
      maxValue = result[0][i]
    }
  }
  return pitchFromClassNum(predictedPitch)
}

// 각 구질을 예측한 것에 대해서 정확도를 계산합니다.
function calcPitchClassEval(pitchIndex, classSize, values) {
  // 결과는 7개의 서로다른 구질로 구성되어 있습니다.
  let index = pitchIndex * classSize * NUM_PITCH_CLASSES + pitchIndex
  let total = 0
  for (let i = 0; i < classSize; i++) {
    total += values[index]
    index += NUM_PITCH_CLASSES
  }
  return total / classSize
}

// Returns the string value for Baseball pitch labels
function pitchFromClassNum(classNum) {
  switch (classNum) {
    case 0:
      return 'Fastball (2-seam)'
    case 1:
      return 'Fastball (4-seam)'
    case 2:
      return 'Fastball (sinker)'
    case 3:
      return 'Fastball (cutter)'
    case 4:
      return 'Slider'
    case 5:
      return 'Changeup'
    case 6:
      return 'Curveball'
    default:
      return 'Unknown'
  }
}

module.exports = {
  evaluate,
  model,
  pitchFromClassNum,
  predictSample,
  testValidationData,
  trainingData,
  TEST_DATA_LENGTH,
}
```

## 6. 모델을 서버에서 훈련시키기

server.js 라는 새로운 파일을 작성한다음, 서버에서 훈련과 평가를 담당하는 모델을 만들어서 동작하게 합니다. 먼저, HTTP server를 만들고, `socket.io` API을 사용해 소켓을 활용해 양방향 통신을 하도록합니다.

아래 코드를 server.js에 작성해주세요.

```javascript
require('@tensorflow/tfjs-node')

const http = require('http')
const socketio = require('socket.io')
const pitch_type = require('./pitch_type')

const TIMEOUT_BETWEEN_EPOCHS_MS = 500
const PORT = 8001

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

// 서버를 시작하고, 모델을 훈련시키고, 현재 상태를 소켓 연결로 내보낸다.
async function run() {
  const port = process.env.PORT || PORT
  const server = http.createServer()
  const io = socketio(server)

  server.listen(port, () => {
    console.log(`  > Running socket on port: ${port}`)
  })

  io.on('connection', (socket) => {
    socket.on('predictSample', async (sample) => {
      io.emit('predictResult', await pitch_type.predictSample(sample))
    })
  })

  let numTrainingIterations = 10
  for (var i = 0; i < numTrainingIterations; i++) {
    console.log(`Training iteration : ${i + 1} / ${numTrainingIterations}`)
    await pitch_type.model.fitDataset(pitch_type.trainingData, { epochs: 1 })
    console.log('accuracyPerClass', await pitch_type.evaluate(true))
    await sleep(TIMEOUT_BETWEEN_EPOCHS_MS)
  }

  io.emit('trainingComplete', true)
}

run()
```

여기까지 왔다면, 서버를 실행하고 테스트 할 수 있습니다. 밑에서 보이는 로그처럼, 서버에서 각 iteration 마다 하나의 epoch으로 학습하는 모습을 볼 수 있습니다. (또한 `model.fitDataset` API를 활용해서 한번의 호출로 여러 epoch에 걸쳐 학습할 수도 있습니다.) 만약 여기에서 에러를 접하게 된다면, node나 npm 설치상황을 확인해보시기 바랍니다.

```shell
$ npm run start-server
...
  > Running socket on port: 8001
Epoch 1 / 1
eta=0.0 ========================================================================================================>
2432ms 34741us/step - acc=0.429 loss=1.49
```

Ctrl+C로 서버를 중단시킵니다. 다음 단계에서 다시 이 부분을 실행할 것입니다.

## 7. 클라이언트 페이지를 만들고 display 용 코드 만들기

서버가 준비되었으므로, 다음 단계는 브라우저에서 실행할 클라이언트 코드를 작성하는 것입니다. 간단한 페이지를 만들어서, 서버에서 모델 예측을 호출하고 결과를 표시합니다. `socket.io`를 활용해서 클라이언트/서버 커뮤니케이션을 진행합니다.

먼저 `./baseball`폴더에 index.html 을 만들고 아래 코드를 복사합니다.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Pitch Training Accuracy</title>
  </head>
  <body>
    <h3 id="waiting-msg">Waiting for server...</h3>
    <p>
      <span style="font-size:16px" id="trainingStatus"></span>
    </p>

    <p></p>
    <div id="predictContainer" style="font-size:16px;display:none">
      Sensor data: <span id="predictSample"></span>
      <button
        style="font-size:18px;padding:5px;margin-right:10px"
        id="predict-button"
      >
        Predict Pitch
      </button>
      <p>
        Predicted Pitch Type:
        <span style="font-weight:bold" id="predictResult"></span>
      </p>
    </div>

    <script src="dist/bundle.js"></script>
    <style>
      html,
      body {
        font-family: Roboto, sans-serif;
        color: #5f6368;
      }
      body {
        background-color: rgb(248, 249, 250);
      }
    </style>
  </body>
</html>
```

`client.js`를 `./baseball` 폴더에 만들고 아래 내용을 복사합니다.

```javascript
import io from 'socket.io-client'
const predictContainer = document.getElementById('predictContainer')
const predictButton = document.getElementById('predict-button')

const socket = io('http://localhost:8001', {
  reconnectionDelay: 300,
  reconnectionDelayMax: 300,
})

const testSample = [2.668, -114.333, -1.908, 4.786, 25.707, -45.21, 78, 0] // Curveball

predictButton.onclick = () => {
  predictButton.disabled = true
  socket.emit('predictSample', testSample)
}

// functions to handle socket events
socket.on('connect', () => {
  document.getElementById('waiting-msg').style.display = 'none'
  document.getElementById('trainingStatus').innerHTML = 'Training in Progress'
})

socket.on('trainingComplete', () => {
  document.getElementById('trainingStatus').innerHTML = 'Training Complete'
  document.getElementById('predictSample').innerHTML =
    '[' + testSample.join(', ') + ']'
  predictContainer.style.display = 'block'
})

socket.on('predictResult', (result) => {
  plotPredictResult(result)
})

socket.on('disconnect', () => {
  document.getElementById('trainingStatus').innerHTML = ''
  predictContainer.style.display = 'none'
  document.getElementById('waiting-msg').style.display = 'block'
})

function plotPredictResult(result) {
  predictButton.disabled = false
  document.getElementById('predictResult').innerHTML = result
  console.log(result)
}
```

클라이언트가 `trainingComplete` 소켓 메시지를 처리하여 예측 버튼을 표시합니다. 이 버튼을 클릭하면 클라이언트는 샘플 센서 데이터가 포함된 소켓 메시지를 전송합니다. `predictResult` 메시지를 받으면 페이지에 예측을 표시합니다.

## 8. 앱 실행하기

아래 두 코드를 실행해서 클라이언트 / 서버 를 실행합니다.

```shell
[In one terminal, run this first]
$ npm run start-client

[In another terminal, run this next]
$ npm run start-server
```

브라우저에서 http://localhost:8080/ 를 엽니다. 모델 학습이 끝나면, Predict Sample 버튼을 눌러보세요. 브라우저에서 예측 결과가 뜰 것입니다. 그리고 테스트 csv 파일의 몇가지 예제를 활용해서 샘플 센서 데이터를 자유롭게 수정하고, 모델이 얼마나 정확하게 예측하는지 확인해보세요.

## 9. 배운것

본 튜토리얼에서는, Tensorflow.js를 활용한 간닪한 머신러닝 웹 애플리케이션을 만들어 보았습니다. 센서 데이터를 활용해서 구질이 무엇인지 분류하는 모델을 만들어 보았습니다. node.js 코드를 작성해서 서버를 만들고, 클라이언트에 데이터를 통해 학습한 모델을 전송합니다.

[tensorflow.org/js](https://www.tensorflow.org/js)를 방문해서, 더욱 많은 예제와 데모를 보시고, 당신의 애플리케이션에서 Tensorflow.js를 어떻게 활용할수 있을지 살펴보세요.

https://codesandbox.io/s/tensorflowjs-05-training-prediction-nodejs-tc6c4


`toc tight: true, from-heading: 1 to-heading: 3 ` # Training and Prediction in Node.js 본 튜토리얼에서는 MLBAM에서 제공하는 피쳐 센서 데이터를 바탕으로, 야구의 칭 유형을 추측하는 모델을 만들어볼 예정입니다. 이 튜토리얼은 서버사이드 애플리케이션인 Node.js에서 진행될 ...

Tensorflow.js - 05. Training and Prediction in Node.js

# 리액트에서 카운트 다운을 만들며 배운 것들

리액트에서 카운트 다운을 만든다고 가정해보자. 가장 먼저 생각나는대로, 빠르게 구현한다면 아래와 같은 느낌이 될 것이다.

https://codepen.io/yceffort/pen/BayPyNe

하지만 이 코드는 한가지 문제를 가지고 있다.

## setInterval, setTimeout

`setInterval`은 자바스크립트의 메인 쓰레드에서 실행된다. 그런데, 자바스크립트는 싱글스레드 기반으로, 동시에 할 수 있는 일은 단 한가지로 제한 되어 있다. 따라서 중간에 interruption이 있거나 모종의 이유로 처음에 선언한 시간을 정확히 지켜서 (여기서는 1000ms) 실행을 보장해주지는 않는다.

아래 코드를 사파리에서 실행해보자.

```javascript
const start = Date.now()

setInterval(() => {
  console.log(`${Date.now() - start}ms`)
}, 1000)
```

```
1001ms
2002ms
3003ms
4003ms
5003ms
6004ms
7004ms
```

자바스크립트 엔진은 오직 싱글 스레드만을 사용하므로, 비동기 이벤드들을 큐에 대기시킨다. 따라서 그 사이에 다른 이벤트 (마우스, 키보드 등) 가 발생하면 이벤트가 지연될 수 있다. 또한 지연없는 `setTimeout` 또는 `setInterval`이 5회 이상 실행될 경우, 4ms 이상의 지연시간이 강제적으로 추가된다. 그리고 이는 HTML5 표준으로 지정되어있다.

- https://developer.mozilla.org/ko/docs/Web/API/WindowTimers/setTimeout
- https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers

> Timers can be nested; after five such nested timers, however, the interval is forced to be at least four milliseconds.

> This API does not guarantee that timers will run exactly on schedule. Delays due to CPU load, other tasks, etc, are to be expected.

또한 CPU가 과부하 상태이거나, 브라우저 탭이 백그라운드 모드이거나, 노트북이 배터리에 의존 하는 등의 경우에도 마찬가지로 시간이 지연된다.

## 브라우저가 리페인팅하는 시간

브라우저가 화면에 무언가를 그리는 데에는 여러 단계를 거친다.

![pixel-pipeline](https://developers.google.com/web/fundamentals/performance/rendering/images/intro/frame-full.jpg?hl=ko)

그러나 이 과정에서 만약 setInterval 등이 호출되면 어떻게 될까?

![set-timeout](https://developers.google.com/web/fundamentals/performance/rendering/images/optimize-javascript-execution/settimeout.jpg?hl=ko)

setTimeout은 자바스크립트 엔진 단에서 실행되므로, 브라우저가 이를 페인팅하는 시간 따위를 신경쓰지 않고 일정 간격으로 계속해서 작동하게 된다. 이는 종종 프레임을 누락시켜 버벅거리는 현상을 사용자에게 노출 시킬 수 있다.

실제로 jquery의 기본 animate 들은 setTimeout을 통해서 사용되고 있다.

## 해결책 1) requestAnimationFrame

[참고](https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame)

`window.requestAnimationFrame`은, 브라우저에게 수행하기를 원하는 애니메이션을 알리고, 다음 리페인트가 작동하기 전에 해당 애니메이션을 업데이트 하는 함수를 호출하게 된다.

```javascript
window.requestAnimationFrame(callback)
```

화면에 새로운 애니메이션을 업데이트 할 준비가 될 때마다 호출하는 것이 좋다. 일반적으로 대부분의 브라우저에서는 디스플레이 주사율에 맞춰 콜백을 호출한다. 성능을 위해서, 백그라운드 탭, hidden, iframe 등에서는 실행 되지 않는다.

이 함수는 0이 아닌 고유한 요청 id를 리턴하는데, window.cancelAnimationFrame(requestId)로 해당 요청을 취소할 수 있다.

## 해결책 2) EventEmitter 사용

https://github.com/Gozala/events는 Node.js의 [events](https://nodejs.org/api/events.html)를 브라우저와 같은 다양한 환경에서 사용할 수 있도록 만들어주는 패키지다.

Nodejs는 이벤트를 처리하기 위해서 EventEmitter를 사용한다. 일종의 옵저버 패턴으로, 이벤트를 대기하는 이벤트 리스너들이 (옵저버들이) 이벤트를 기다리다가, 해당 이벤트가 실행되면 이를 처리하는 함수가 실행된다.

이것과 `requestAnimationFrame` 을 적절하게 이용한다면, 보다 나은 카운트다운 컴포넌트를 만들 수 있을 것이다.

```typescript
import EventEmitter from "events"

class Timer extends EventEmitter {
  // 최초 시작시간
  private time: number = -1
  // requestAnimationFrame의 ID
  private timerId: number = -1

  // Timer를 생성할 때 몇초를 셀지 받는다.
  constructor(private duration: number) {
    super()
  }

  // 타이머가 시작하면, requestAnimationFrame와 함께 step함수를 호출한다.
  start() {
    this.timerId = requestAnimationFrame(this.step)
    return this.timerId
  }

  // 타이머가 끝나면, cancelAnimationFrame를 호출하여 repaint를 막고
  // 타이머를 다시 초기화 시킨다.
  stop() {
    cancelAnimationFrame(this.timerId)
    this.timerId = -1
  }

  // 현재 시간을 받는다.
  private step = (timestamp: number) => {
    // time이 -1이라면 === 맨처음 생성되었다면
    // 받은 시간을 timer의 시간으로 갱신하한다.
    if (this.time === -1) {
      this.time = timestamp
    }

    // 현재시간과 타이머 내장시간의 차이
    const progress = timestamp - this.time

    // progress의 차이가 처음에 받는 시간의 차이보다 크다면
    if (progress < this.duration) {
      // progress를 인자로 하는 progress 이벤트를 시작한다.
      this.emit("progress", progress)
      // 그리고 이는 브라우저의 리페인팅 (== 카운트 다운 갱신)이 필요하므로,
      // requestAnimationFrame를 호출한다.
      this.timerId = requestAnimationFrame(this.step)
    } else {
      // 카운트 다운이 종료되었다면 stop을 호출하고 이벤트를 끝낸다.
      this.stop()
      this.emit("finish")
    }
  }
}
```

```typescript
const [countDown, setCountDown] = useState(duration)

useEffect(() => {
  // 타이머 선언
  const timer = new Timer(duration)

  // progress 이벤트를 정의한다. 받은 시간만큼, 현재 카운트 다운 시간에서 제외한다.
  timer.on("progress", (elapsed: number) => {
    setCountDown(duration - elapsed)
  })

  // finish 이벤트를 정의한다.
  timer.on("finish", onFinished)

  timer.start()

  // useEffect가 끝날때마다 timer를 멈춘다.
  return () => {
    timer.stop()
  }
}, [duration]) // 시간이 변경될 때마다 이 함수를 다시 호출한다.
```

## 구현

https://codesandbox.io/s/react-countdown-ghe1j

## 참고자료

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

https://developers.google.com/web/fundamentals/performance/rendering?hl=ko

https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=ko


# 리액트에서 카운트 다운을 만들며 배운 것들 리액트에서 카운트 다운을 만든다고 가정해보자. 가장 먼저 생각나는대로, 빠르게 구현한다면 아래와 같은 느낌이 될 것이다.  https://codepen.io/yceffort/pen/BayPyNe  하지만 이 코드는 한가지 문제를 가지고 있다.  ## setInterval, setTimeout  `setInte...

yceffort

Tensorflow.js - 07. Build an image classifier

Tensorflow.js - 06. What is Transfer Learning

자바스크립트에서 http 요청하기 - fetch에 대한 고찰

Tensorflow.js - 05. Training and Prediction in Node.js

React count down에서 배운 event-emitter 와 requestAnimationFrame