regex를 활용해서 숫자에 , 를 찍어서 formatting을 해보자.

## 1. 첫번째 시도

```javascript
function formatNumber(number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
```

인터넷에 가장 많이 떠돌아 다니는 해결책으로, 아쉽게도 소수점에 대한 대응이 되지 않는다.

```javascript
"1111.1111111".toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
// 1,111.1,111,111
```

## 2. 두번째 시도

```javascript
function formatNumber(number) {
  return number.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
}
```

```javascript
"1111.1111111".toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
// 1,111.1111111
```

이게 성공하는 줄 알고, test 도 넘어가길래 실제로 써보았더니 앱에서 오류가 나기 시작했다. ㅠ.ㅠ

```javascript
"1111.1111111".toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
// SyntaxError: Invalid regular expression: invalid group specifier name
```

이와 관련된 posting은 여기 [여기](https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group)에서 찾아볼 수 있었다.

`x(?<=y)` `x(?<!y)`는 각각 lookbehind 문법으로, 아쉽게도 [사파리와 익스플로러에서는 지원하지 않는다.](https://caniuse.com/#feat=js-regexp-lookbehind). (감사합니다.)

따라서 아쉽게도, 순수 regex로 모든 브라우저 환경을 지원하면서 대체 하기는 무리인듯 하다.

## 3. (지금까지의) 정답

```javascript
function formatNumber(x) {
  var parts = x.toString().split(".")
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  return parts.join(".")
}
```

언젠가 더 좋은 방법을 찾기를 바라며 (...)


regex를 활용해서 숫자에 , 를 찍어서 formatting을 해보자. ## 1. 첫번째 시도  ```javascript function formatNumber(number) {   return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") } ```  인터넷에 가장 많이 떠돌아 다니는 해결책으로, ...

Javascript Regex 숫자를 comma와 함께 Formatting 하기

[nextjs의 공식 문서](https://nextjs.org/docs/basic-features/data-fetching)를 보고 요약한 내용입니다.

## Table of Contents

## 1. getInitialProps

Nextjs 9.3 이전에는 `getInitialProps` 밖에 존재하지 않는다. 최신 버전인 9.3에서는 밑에서 설명할 `getStaticProps`나 `getServerSideProps`를 사용하기를 권장한다. (왠지 deprecate 될 것 같은 기분이다.)

`getInitialProps`는 페이지에서 서버사이드 렌더링을 가능하게 하며, 페이지가 호출될 때 최초로 데이터 조작을 가능하게 한다. 이 말의 뜻은, 서버에서 데이터를 불러온 다음에, 이 데이터와 함께 페이지를 내보낸다는 뜻이다. 이는 특히 SEO 등에서 유용하다.

> 주의: `getInitialProps`를 쓰는 순간 nextjs의 automatic static optimization이 불가능해진다.

예제를 살펴보자.

```typescript
import { NextPageContext } from 'next'
import React from 'react'
import fetch from 'isomorphic-fetch'

interface EmployeeInterface {
  id: number
  employee_name: string
  employee_salary: number
  employee_age: number
  profile_image: string
}

export default function Data({ data }: { data: EmployeeInterface[] }) {
  return (
    <>
      <h1>Employee list</h1>
      {data.map(
        ({ id, employee_age, employee_name, employee_salary }, index) => (
          <div key={index}>
            <span>{id}.</span>
            <span>{employee_name} </span>
            <span>${employee_salary}</span>
            <span> {employee_age} years old</span>
          </div>
        ),
      )}
    </>
  )
}

Data.getInitialProps = async (_: NextPageContext) => {
  const response = await fetch(
    'http://dummy.restapiexample.com/api/v1/employees',
  )
  const { data } = await response.json()

  return { data }
}
```

`getInitialProps` 내 에서 비동기로 데이터를 가져 온 다음에, props를 만들어 컴포넌트에 넘긴다. 한가지 명심할 것은, 여기서 컴포넌트에 넘겨주는 행위는 `JSON.stringify`와 비슷하다. 따라서 넘길 수 있는 데이터는 순수 Object여야 한다.

**중요 포인트**

1. 처음 페이지가 로딩 된다면, `getInitialProps`는 서버에서만 로딩된다. 그러나 `next/link` 또는 `next/router`를 통해서 클라이언트 사이드에서 페이지 이동이 일어난다면, 클라이언트 사이드에서 실행될 수 있다.

2. `getInitialProps` 는 자식 컴포넌트에서 사용할 수 없다. 오직 각 페이지에서만 실행 가능하다.

3. 1번의 이유에 따라서, `getInitialProps`내에서 서버사이드에서만 실행될 수 있는 모듈을 내장하고 있다면, 주의를 기울여야 한다. 만약 서버사이드에서만 작동하고 싶은 로직이 있다면, 아래처럼 하면 된다.

```typescript
Data.getInitialProps = async ({ req }: NextPageContext) => {
  console.log('fetch some data')
  const response = await fetch(
    'http://dummy.restapiexample.com/api/v1/employees',
  )
  const { data } = await response.json()

  let isServer = false
  if (req) {
    // is server side???????
    isServer = true
  }

  return { data, isServer }
}
```

## 2. getStaticProps

정적 페이지 생성을 지원하며, 데이터를 딱 빌드 타임에만! 실행된다.

```typescript
export async function getStaticProps(_: NextPageContext) {
  const response = await fetch(
    'http://dummy.restapiexample.com/api/v1/employees',
  )
  const { data } = await response.json()

  console.log('fetchData in build time!')

  return {
    props: { data },
  }
}
```

빌드를 해보면 아래와 같이 메시지가 출력된다.

```
...
Automatically optimizing pages ..fetchData in build time!
Automatically optimizing pages

Page                                                           Size     First Load
┌ λ /                                                          458 B       68.2 kB
├   /_app                                                      352 B       67.7 kB
├ λ /about                                                     301 B         68 kB
├ ● /data                                                      412 B       68.2 kB
└ λ /posts/[id]                                                303 B         68 kB
+ shared by all                                                67.7 kB
  ├ static/pages/_app.js                                       352 B
  ├ chunks/d43014630f87ab6320ffd55320a44642064161b7.111b68.js  9.77 kB
  ├ chunks/framework.9daf87.js                                 40.1 kB
  ├ runtime/main.d2cfdc.js                                     16.8 kB
  └ runtime/webpack.a34f97.js                                  744 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
...
```

data를 빌드시에 미리 땡겨와서 static하게 제공한다는 것을 알 수 있다. 그리고 next를 실행해보면 데이터 fetch를 하지 않는다는 것을 알 수 있다. 이미 빌드 시에 데이터를 땡겨 왔기 때문에, 굉장히 빠른 속도로 페이지가 로딩 된다.

`getStaticProps` 는 아래와 같은 경우에 유용할 것이다.

- 매 유저의 요청마다 fetch할 필요가 없는 데이터를 가진 페이지를 렌더링 할때
- headless CMS로 부터 데이터가 올때
- 유저에 구애받지 않고 퍼블릭하게 캐시할 수 있는 데이터
- SEO 등의 이슈로 인해 빠르게 미리 렌더링 해야만 하는 페이지. `getStaticProps`는 HTML과 JSON파일을 모두 생성해 두기 때문에, 성능을 향상시키기 위해 CDN 캐시를 하기 쉽다.

그리고 아래와 같은 사항을 유념해 두자.

- 빌드 타임에서만 실행된다.
- 서버사이드 코드다. 절대 클라이언트 사이드에서 실행되지 않는다. 심지어 브라우저 JS 번들에도 포함되지 않는다. 그냥 props결과물 자체를 JS 번들에 포함시키고 있다. 페이지에서 소스 보기를 하면, 아래 처럼 데이터를 아예 들고 있는 것을 볼 수 있다.

```html
<script id="__NEXT_DATA__" type="application/json">
  {
    "props": {
      "pageProps": {
        "data": [
          {
            "id": "1",
            "employee_name": "Tiger Nixon",
            "employee_salary": "320800",
            "employee_age": "61",
            "profile_image": ""
          }
        ]
      },
      "__N_SSG": true
    },
    "page": "/data",
    "query": {},
    "buildId": "ExAlLKs0H7K3JGmYT162x",
    "nextExport": false,
    "isFallback": false,
    "gsp": true
  }
</script>
```

- Page에서만 가능하다.
- 개발 모드에서는 매 번 요청이 간다.

## 3. getStaticPaths

위에서 언급한 `getStaticProps`와 매우 유사하다. 차이가 있다면, `getStaticPaths`는 다이나믹 라우트에서만 쓴다는 것이다. 설명보단 예시를 보는게 더 빠르다.

**/pages/post/[id].tsx**

```typescript
import React from 'react'
import fetch from 'isomorphic-fetch'
import { GetStaticProps } from 'next'

interface PostInterface {
  userId: number
  id: number
  title: string
  body: string
}

export default function Employee({ todo }: { todo: PostInterface }) {
  const { userId, id, title, body } = todo
  return (
    <>
      <h1>Todo</h1>
      <div>userId: {userId}</div>
      <div>id: {id}</div>
      <div>title: {title}</div>
      <div>body: {body}</div>
    </>
  )
}

export async function getStaticPaths() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await response.json()

  const paths = data.map(({ id }: PostInterface) => ({
    params: { id: String(id) },
  }))

  return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params?.id}`,
  )
  const data = await response.json()

  return {
    props: { todo: data },
  }
}
```

`getStaticPaths` 에서 `/pages/post/[id]`로 접근 가능한 모든 목록을 땡겨온다. 그리고 가능한 접근 목록을

```json
[{ "params": { "id": 1 } }, { "params": { "id": 2 } }]
```

와 같은 형태로 만들어 둔다. 문서와 다르게 꼭 주의 해야 할 것은 **value는 무조건 string 이어야 한다는 것이다.** 그리고 이제 빌드 타임에 가능한 모두 경우의 수를 땡겨와서 - 빌드 하게 된다.

몇 가지 더 샘플을 보도록 하자.

**pages/todo/[userId]/[id].tsx**

```typescript
export async function getStaticPaths() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/')
  const data = await response.json()

  const paths = data.map(({ id, userId }: TodoInterface) => ({
    params: { userId: String(userId), id: String(id) },
  }))

  return { paths, fallback: false }
}
```

**pages/todo/[...slug].tsx**

```typescript
export async function getStaticPaths() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/')
  const data = await response.json()

  const paths = data.reduce(
    (
      acc: Array<{ params: { slug: string[] } }>,
      { userId, id }: PostInterface,
    ) => {
      return acc.concat([
        { params: { slug: [String(userId), String(id)] } },
        { params: { slug: [String(id)] } },
      ])
    },
    [],
  )

  return { paths, fallback: false }
}
```

이렇게 array 형태로 넘겨주면 된다.

```json
{"slug":["10","95"]}},{"params":{"slug":["95"]}}
```

`getStaticProps`에서는 `params`로 접근하면

```json
{ "slug": ["1", "3"] }
```

여기서 꺼내 쓰면 된다.

`getStaticPaths`는 리턴 값으로 앞서 만들었던 `paths`와 `fallback`을 넘겨준다. `fallback`을 true나 false가 가능하다. false라면 nextjs의 404가 뜬다. 이는 미리 만들어 두어야 할 페이지의 수가 적을 때, 빌드 타임을 짧게 가져감으로서 이익을 볼 수 있다.

만약 `fallback`의 값이 true라면 `getStaticProps`는 아래와 같이 달라진다.

- `getStaticPaths`에서 리턴되는 `paths`는 빌드타임에 HTML이 렌더링 된다.

- 여기서 생성되지 않는 예외 Path들은 404 페이지를 리턴하지 않는다. 대신, NextJs는 fallback page를 보여주게 된다. 아래 예시를 살펴보자.

```typescript
export default function Employee({ todo }: { todo: PostInterface }) {
  const { isFallback } = useRouter()

  if (isFallback) {
    return <>Fail!</>
  }

  const { userId, id, title, body } = todo
  return (
    <>
      <h1>Todo</h1>
      <div>userId: {userId}</div>
      <div>id: {id}</div>
      <div>title: {title}</div>
      <div>body: {body}</div>
    </>
  )
}

export async function getStaticPaths() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await response.json()

  const paths = data.map(({ id }: PostInterface) => ({
    params: { id: String(id) },
  }))

  return { paths, fallback: true }
}
```

Fallback 페이지의 props는 아무것도 없다. 따라서 props를 가공하는 처리를 해서는 안된다.

- 해당 path가 없는 페이지에 대해서 Nextjs는 서버단에서 정적인 HTML과 JSON을 만들어 둔다. 여기에는 `getStaticProps`을 실행하는 것도 포함된다.

- 위 작업이 끝났다면, 브라우저는 해당 path에 따라서 만든 JSON을 받게된다. 이 JSON은 페이지 렌더링에 필요한 Props를 제공하는데 사용된다. 유저 입장에서는, fallback 페이지에서 전체 페이지로 스왑되는 것으로 보일 것이다. (fallback이 잠시 보였다가 다시 받아온 props로 그리는 페이지가 나타남 (isFallback이 true에서 false로 바뀜))

- 이와 동시에, 해당 path를 미리 렌더링한 path에 추가해둔다. 같은 path로 오는 요청들은 이제 마치 빌드시에 사전에 렌더링해 둔 페이지 처럼 제공된다.

복잡하다. 예를 들어서 설명해보자.

```typescript
export async function getStaticPaths() {
  const items = Array.from(Array(10).keys())

  const paths = items.map(value => ({
    params: { id: String(value) },
  }))

  return { paths, fallback: true }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const id = params?.id

  if (Number(id) > 10) {
    return {
      props: {
        todo: {
          userId: 1,
          id,
          title: `이건 에러야.`,
          body: `아 이건 에러라니깐.`,
        },
      },
    }
  } else {
    return {
      props: {
        todo: {
          userId: 1,
          id,
          title: `할일 ${id}`,
          body: `이거 하자. ${id}`,
        },
      },
    }
  }
```

개 떡 같은 코드지만 (...) `getStaticPaths`는 `/todo/0` 부터 `/todo/9`까지만 미리 빌드 타임에 만들어 둔다.

```
 ● /todo/[id]                                                 378 B       68.1 kB
    ├ /todo/0
    ├ /todo/1
    ├ /todo/2
    └ [+7 more paths]
```

그리고 만약 어떤 사용자가 처음으로 `/todo/1111`로 접근했다고 가정해보자. 그럼 사용자는 잠시 fallback 페이지를 봤다가, 다시 `getStaticProps`가 렌더링해주는 에러 페이지를 보게된다. 그리고 nextjs는 해당 path에 대해 렌더링 해둔 것을 저장해둔다. 그리고 이후에 다시 접근하는 사용자는 fallback 페이지를 보지 않고 바로 앞서 만들어 두었던 페이지를 보여주게 된다.

fallback 페이지는 언제 유용할까?

아주 큰 커머스 사이트와 같이, 데이터에 따라 만들어 두어야할 정적페이지가 많은 사이트에서 유리할 것이다. 모든 페이지를 빌드시에 만들어 두고 싶지만, 그랬다가는 빌드가 엄청나게 오래걸릴 것이다. 대신, 미리 몇개의 주요 페이지만 만들어두고, 나머지는 `fallback: true`로 처리하자. 누군가 아직 만들어지지 않은 페이지에 접근하려 한다면, 유저에게 로딩 인디케이터를 띄우자. 그러면 백그라운드에서는 `getStaticProps`를 실행해서 렌더링에 필요한 데이터를 가져올 것이다. 그리고 이 작업이 끝난다면, 다른 유저들은 이제 미리 렌더링된 정적인 페이지를 볼 수 있다.

그리고 아래와 같은 사항을 유념해 두자.

- 항상 `getStaticProps`와 짝으로 쓰자. 그리고 `getServerSideProps`와는 쓸수가 없다.
- `getStaticPaths`는 서버사이드에서 빌드 타임에만 실행된다.
- `getStaticPaths`는 페이지에서만 사용 가능하다.
- 개발 모드에서는 항상 실행된다.

## 4. getServerSideProps

`getServerSideProps`를 사용하면, 각 요청 마다 `getServerSideProps`에서 리턴한 데이터를 받아다가 서버사이드에서 미리 렌더링을 하게 된다.

```javascript
export async function getServerSideProps(context) {
  return {
    props: {},
  }
}
```

빌드를 하게 되면, 아래와 같이 나타난다.

```
Page                                                           Size     First Load
...
├ λ /server                                                    415 B       68.2 kB
...

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
```

context에는 다음과 같은 것들이 포함되어 있다.

- `params`: 다이나믹 라우트 페이지라면, `params`를 라우트 파라미터 정보를 가지고 있다.
- `req`: [HTTP request object](https://nodejs.org/api/http.html#http_class_http_incomingmessage)
- `res`: [HTTP response object](https://nodejs.org/api/http.html#http_class_http_serverresponse)
- `query`: 쿼리스트링
- `preview`: `preview` 모드 여부 [preview mode](https://nextjs.org/docs/advanced-features/preview-mode)
- `previewData`: `setPreviewData`로 설정된 데이터

언제 써야 할까?

`getServerSideProps`는 페이지를 렌더링하기전에 반드시 fetch해야할 데이터가 있을 때 사용한다. 매 페이지 요청시마다 호출되므로 당연히, TTFB가 `getStaticProps`보다 느리다.

그리고 아래와 같은 사항을 유념해 두자.

- `getServerSideProps`는 서버사이드에서만 실행되고, 절대로 브라우저에서 실행되지 않는다.
- `getServerSideProps`는 매 요청시 마다 실행되고, 그 결과에 따른 값을 props로 넘겨준 뒤 렌더링을 한다.
- `next/link`를 이용해서 클라이언트 사이드 페이지 트렌지션을 하더라도, `getInitialProps`와는 다르게 무조건 서버에서 실행된다.
- 당연히 page 에서만 실행할 수 있다.


[nextjs의 공식 문서](https://nextjs.org/docs/basic-features/data-fetching)를 보고 요약한 내용입니다. ```toc tight: true, from-heading: 1 to-heading: 2 ```  ## 1. getInitialProps  Nextjs 9.3 이전에는 `getInitialProps` 밖에...

NextJS 2. Data Fetching

요즘 리액트를 쓰는 많은 프로젝트에서, SSR을 지원하기 위해 [nextjs](https://nextjs.org/)를 쓰고 있다. 초기 로딩 속도나, SEO 지원 이슈 등 등 때문에 아무래도 SPA는 요즘 트렌드에서 많이 밀린 기분이다. 물론 [razzle](https://github.com/jaredpalmer/razzle) 을 쓰거나 custom server 로 맨 바닥에 해딩하는 방법도 있지만 여기저기 컨퍼런스나 주변 사람들의 말을 들어보면 nextjs가 대세이긴 한 것 같다.

입사 이래로 nextjs를 쓰면서 별 생각 없이 썼던 것들이 많은데, 9.3 출시를 기념하여 이참에 하나씩 정리해보려고 한다.

## Table of Contents

## 1. Page

기본적으로, `pages/파일명.js|ts|tsx` 네이밍으로 파일을 만들면 `/파일명` 으로 라우팅을 할 수 있다. `pages/about.js`로 파일을 만들면 `/about`으로 접근이 가능하다.

다이나믹 라우트의 경우에도 비슷하다. `pages/디렉터리명/[id].js|ts|tsx`로 생성하게되면, `디렉토리명/id`로 접근 가능하다. 예를 들어 `pages/posts/[id].tsx`로 파일을 생성하면, `posts/1`, `posts/2` 와 같은 식으로 접근이 가능하다.

### pages/posts/[id].tsx

```typescript
import React from 'react'
import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query
  return <div>Post id {id}</div>
}
```

임의로 선언한 id 는 위처럼 받아서 처리할 수 있다.

nested routes도 위와 마찬가지로 처리하면 된다.

## 2. Routing

Nextjs에서는 SPA와 유사한 클라이언트 사이드 라우팅을 지원한다. `Link`라고 불리는 컴포넌트를 활용하면, 클라이언트 사이드 라우팅을 할 수 있다.

```jsx
import Link from 'next/link'

function Home() {
  return (
    <Link href="/">
      <a>Home</a>
    </Link>
  )
}
export default Home
```

nextjs 는 `Link`를 적절한 a 태그로 변환해 준다.

위에서 언급한 다이나믹 라우트의 경우에는, 처리하는 방식이 조금 다르다. `href`와 `as`를 전달해 주어야 한다.

- `href`: 디렉토리 명을 넘겨주면 된다. `/posts/[id]`
- `as`: 브라우저에 실제로 표시될 주소를 넘긴다. `/posts/1`

```jsx
import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/posts/[id]" as="/posts/1">
          <a>To Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home
```

## 3. Router

nextjs의 라우터 안에는 다음과 같은 정보가 포함되어 있다.

- `pathname`: (String) 현재 라우트
- `query`: (Object) object로 파싱한 query string
- `asPath`: (String) 실제로 브라우저에 표시되고 있는 path

그리고 아래와 같은 router api도 포함되어 있다.

### 3-1. Router Api

#### Router.push

클라이언트 사이드 트랜지션을 다룰 때 쓰는 api다.

```tsx
import Router from 'next/router'
Router.push(url, as, options)
```

- `url`: 이동할 URL을 명시한다. 보통 `page`명을 넣는다
- `as`: 옵셔널 파라미터로, 브라우저에서 보여질 URL이다. 없으면 default로 `url`이 들어간다.
- `options`: 은 shallow만 옵션으로 가질 수 있다.
  - `shallow`: `getInitialProps`를 재실행하지 않고 현재 페이지의 라우트를 업데이트 한다. 기본값은 false다.

무슨 소리하는지 모르겠다. 예제로 알아보자.

`index.tsx`

```typescript
import React from 'react'
import { useRouter } from 'next/router'
import { NextPageContext } from 'next'

export default function Index() {
  const { push } = useRouter()

  function pushOnlyUrl() {
    push('/posts/1')
  }

  function pushWithAs() {
    push('/posts/[id]?hello=world', '/posts/1')
  }

  function shallowPush() {
    push('/?counter=1', undefined, { shallow: true })
  }

  function notShallowPush() {
    push('/?counter=1')
  }

  function pushUrl() {
    push('/about')
  }

  function pushUrlAndAs() {
    push('/about', '/about')
  }

  return (
    <>
      <ul>
        <li>
          <button onClick={() => pushOnlyUrl()}>1번. Push only URL</button>
        </li>
        <li>
          <button onClick={() => pushWithAs()}>2번. Push with as</button>
        </li>
        <li>
          <button onClick={() => shallowPush()}>3번. shallow push</button>
        </li>
        <li>
          <button onClick={() => notShallowPush()}>
            4번. not shallow push
          </button>
        </li>
        <li>
          <button onClick={() => pushUrl()}>5번. push route</button>
        </li>
        <li>
          <button onClick={() => pushUrlAndAs()}>
            6번. push route with as
          </button>
        </li>
      </ul>
    </>
  )
}

Index.getInitialProps = function (_: NextPageContext) {
  console.log('getInitialProps of Index')

  return {}
}
```

`[id].tsx`

```typescript
import React from 'react'
import { useRouter } from 'next/router'
import { NextPageContext } from 'next'

export default function Post() {
  const router = useRouter()

  console.log('Router', JSON.stringify(router))

  const { id } = router.query
  return <div>Post id {id}</div>
}

Post.getInitialProps = function ({ req }: NextPageContext) {
  console.log('getInitialProps of Post')

  return {}
}
```

`about.tsx`

```typescript
import React from 'react'
import { NextPageContext } from 'next'

export default function About() {
  return <div>about page</div>
}

About.getInitialProps = function (_: NextPageContext) {
  console.log('getInitialProps of about')

  return {}
}
```

1번 버튼: getInitialProps가 서버에 찍힌다. 서버사이드에서 실행되었음을 알수가 있다. 1번 버튼 동작은 사용자가 브라우저에서 주소를 치고 들어오는 것과 동일하다.

```json
{
  "pathname": "/posts/[id]",
  "route": "/posts/[id]",
  "query": { "id": "1" },
  "asPath": "/posts/1",
  "components": {
    "/posts/[id]": { "props": { "pageProps": {} } },
    "/_app": {}
  },
  "isFallback": false,
  "events": {}
}
```

2번 버튼: getInitialProps가 클라이언트에 찍힌다. 클라이언트 사이드에서 실행되었음을 알수가 있다. 그리고 또한 url에서 보냈던 쿼리스트링이 사용자 브라우저 URL에는 감춰진 것을 알수 있다. 그러나 Post 컴포넌트에서 해당 값을 받아다가 쓸 수 있다.

```json
{
  "pathname": "/posts/[id]",
  "route": "/posts/[id]",
  "query": { "hello": "world", "id": "1" },
  "asPath": "/posts/1",
  "components": {
    "/": { "props": { "pageProps": {} } },
    "/_app": {},
    "/posts/[id]": { "props": { "pageProps": {} } }
  },
  "isFallback": false,
  "events": {}
}
```

3번 버튼: index의 getInitialProps가 실행되면서 쿼리스트링이 변했다.

4번 버튼: index의 getInitialProps가 실행되지 않고 쿼리스트링이 변했다.

5번과 6번 버튼: 다이나믹 라우트가 아니기 때문에, 동작이 동일하다. (getInitialProps가 클라이언트에 찍힘). 그러나 사용자가 주소를 직접 치고 들어간다면 서버사이드에 찍힐 것이다.

#### Router.Replace

Replace는 Push와 받는 파라미터도 동일하지만, 동작만 다르다. 이름에서 알 수 있는 것 처럼 Replace는 URL에 새로운 스택을 쌓지 않는다.

#### Router.beforePopState

몇 몇의 경우 (특히 커스텀 서버를 쓰는 경우) [popsState](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event) 요청을 받아서 라우트에서 액션이 일어나기 전에 무언가를 하고 싶을 수 있다.

> Window 인터페이스의 popstate 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다.

`_app.tsx`

```typescript
function App({ Component, pageProps }: AppProps) {
  const router = useRouter()

  useEffect(() => {
    router.beforePopState(() => {
      console.log('beforePopState!!')
      return true
    })

    return () => {
      router.beforePopState(() => true)
    }
  }, [])
  return <Component {...pageProps} />
}
```

next의 routing이 아닌, 사용자가 히스토리를 직접 조작하는 행위 (뒤로가기, 앞으로가기 등)가 일어날 경우 해당 메소드가 호출된다. 만약 false를 리턴할 경우, Router는 `popState`를 처리하지 않는다. (주소는 바뀌지만 아무 일이 일어나지 않는다.)

#### Router.events

Router에서 일어나는 다양한 이벤트를 감지 할 수 있다.

여기서 url은 브라우저에 뜨는 url을 의미한다. 만약 as를 썼다면, 여기서 url값은 as 값이 될 것이다.

- `routerChangeStart(url)`: route가 변하기 시작할 때
- `routerChangeComplete(url)`: route의 변화가 끝났을 때
- `routerChangeError(err, url)`: route가 바뀌는 과정에서 에러가 나거나, route 로딩이 취소되었을 때
  - `err.cancelled`: 네비게이션이 취소되었는지 여부
- `beforeHistoryChange(url)`: 브라우저 히스토리가 바뀌기 전에
- `hashChangeStart(url)`: 해쉬값이 변할 때
- `hashChangeComplete(url)`: 해쉬값이 다 변하고 난 뒤 에

```typescript
useEffect(() => {
  router.events.on('routeChangeStart', (as) => {
    console.log('routeChangeStart', as)
  })
}, [])
```


요즘 리액트를 쓰는 많은 프로젝트에서, SSR을 지원하기 위해 [nextjs](https://nextjs.org/)를 쓰고 있다. 초기 로딩 속도나, SEO 지원 이슈 등 등 때문에 아무래도 SPA는 요즘 트렌드에서 많이 밀린 기분이다. 물론 [razzle](https://github.com/jaredpalmer/razzle) 을 쓰거나 custom ser...

NextJS 1. Page & Route

## 커링

[이 글](https://www.sitepoint.com/currying-in-functional-javascript/) 에 잘 정리 되어 있습니다.

Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다.

즉 커링은 함수 하나가 n개의 인자를 받는 과정을 n개의 함수로 각각의 인자를 받도록 하는 것이다. 부분적으로 적용된 함수를 체인으로 계속 생성해 결과적으로 값을 처리하도록 하는 것이 그 본질이다.

```javascript
function add(a) {
  console.log(`a of add: ${a}`)
  return function(b) {
    console.log(`a: ${a} / b: ${b}`)
    return a + b
  }
}

add(1)(2) // 이 결과는 3이다.
```

`add(1)`을 javascript 콘솔에서 찍어보면 아래와 같이 나온다.

```javascript
ƒ (b) {
    console.log(`a: ${a} / b: ${b}`)
    return a + b
  }
```

먼저 `add(1)`이 실행되면 위의 함수를 리턴한다. 저 함수 내에서 a 는 1로 기억되고 있다. 그리고 `add(1)`의 결과를 바로 그 다음인 2 파라미터와 함께 바로 실행했다. 그 결과 3이 되었다.

```javascript
var add1 = add(1)
add1(2) // 3
add1(3) // 4
```

`add1`이 선언된 순간, 이 함수가 리턴하는 익명함수는 클로저가 되었다. 이 익명함수에서는, a가 정의된적은 없지만 클로저는 그 함수가 실행된 환경을 기억하고 있으므로 1을 기억하고 익명함수에 계속해서 a = 1이라는 사실을 가지고 함수를 실행하게 된다.

물론 더욱 복잡하게 만들 수도 있다.

```javascript
function add(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}

add(1)(2)(3) // 6
```

위를 화살표 함수로 쓴다면 아래와 같다.

```javascript
const add = a => b => c => a + b + c
```

화살표 함수를 쓰니까 더 간결해졌다.


## 커링 [이 글](https://www.sitepoint.com/currying-in-functional-javascript/) 에 잘 정리 되어 있습니다.  Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다.  즉 커링은 함수 하나가 n개...

자바스크립트 커링과 클로져

<h2 id="커링">커링</h2>
<p><a href="https://www.sitepoint.com/currying-in-functional-javascript/">이 글</a> 에 잘 정리 되어 있습니다.</p>
<p>Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다.</p>
<p>즉 커링은 함수 하나가 n개의 인자를 받는 과정을 n개의 함수로 각각의 인자를 받도록 하는 것이다. 부분적으로 적용된 함수를 체인으로 계속 생성해 결과적으로 값을 처리하도록 하는 것이 그 본질이다.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">a of add: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
  <span class="token keyword control-flow">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">a: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> / b: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
    <span class="token keyword control-flow">return</span> a <span class="token operator">+</span> b
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// 이 결과는 3이다.</span>
</code></pre>
<p><code>add(1)</code>을 javascript 콘솔에서 찍어보면 아래와 같이 나온다.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token function">ƒ</span> <span class="token punctuation">(</span><span class="token parameter">b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">a: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> / b: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
    <span class="token keyword control-flow">return</span> a <span class="token operator">+</span> b
  <span class="token punctuation">}</span>
</code></pre>
<p>먼저 <code>add(1)</code>이 실행되면 위의 함수를 리턴한다. 저 함수 내에서 a 는 1로 기억되고 있다. 그리고 <code>add(1)</code>의 결과를 바로 그 다음인 2 파라미터와 함께 바로 실행했다. 그 결과 3이 되었다.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">var</span> add1 <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token function">add1</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// 3</span>
<span class="token function">add1</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 4</span>
</code></pre>
<p><code>add1</code>이 선언된 순간, 이 함수가 리턴하는 익명함수는 클로저가 되었다. 이 익명함수에서는, a가 정의된적은 없지만 클로저는 그 함수가 실행된 환경을 기억하고 있으므로 1을 기억하고 익명함수에 계속해서 a = 1이라는 사실을 가지고 함수를 실행하게 된다.</p>
<p>물론 더욱 복잡하게 만들 수도 있다.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword control-flow">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword control-flow">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword control-flow">return</span> a <span class="token operator">+</span> b <span class="token operator">+</span> c
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 6</span>
</code></pre>
<p>위를 화살표 함수로 쓴다면 아래와 같다.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token parameter">a</span> <span class="token arrow operator">=></span> <span class="token parameter">b</span> <span class="token arrow operator">=></span> <span class="token parameter">c</span> <span class="token arrow operator">=></span> a <span class="token operator">+</span> b <span class="token operator">+</span> c
</code></pre>
<p>화살표 함수를 쓰니까 더 간결해졌다.</p>

## Table of Contents

# Transfer learning audio recognizer

이번 튜토리얼에서는, Tensorflow.js를 활용하여 브라우저에서 학습시키는 커스텀 오디오 분류기를 만들어 볼 것입니다. 브라우저에서 슬라이더를 컨트롤을 하여 사운드를 만들어 볼 것입니다.

비교적 적은 학습 자료로 짧은 소리를 분류하는 모델을 만들기 위해 전송 학습을 사용할 것입니다. 그리고 음성 명령 인식을 위해 미리 훈련된 모델을 사용할 것입니다, 이 모델 위에 우리가 맞춤형 사운드 클래스를 인식하도록 새로운 모델을 훈련시킬 예정입니다.

## 1. 소개

먼저, 20가지의 음성 명령을 인식할 수 있는 [사전 학습된 모델](https://github.com/tensorflow/tfjs-models/tree/master/speech-commands). 그 다음 마이크를 활용하여, 당신의 목소리를 인식하고, 슬라이더를 좌우로 움직일 수 있게 하는 간단한 신경망을 만들어 볼 것입니다.

이번 학습에서는 음성인식과 관련된 배경지식을 설명하지는 않습니다. 만약 이에 관하여 궁금한 것이 있다면, [이 튜토리얼](https://www.tensorflow.org/tutorials/sequences/audio_recognition)을 참고하시기 바랍니다.

또한 이번 튜토리얼에서 나오는 용어를 모아 머신러닝을 위한 [용어집](https://docs.google.com/document/d/1YcLoCbDFfE6qJGZikBbjfbiI_dG4iETyIBEcS-NQbNE/edit)도 참고하세요.

이번 튜토리얼에서 배울 수 있는 것

- 미리 훈련된 음성 명령 인식 모델을 불러오는 법
- 마이크를 통한 실시간 예측을 하는 방법
- 브라우저의 마이크를 활용해 커스텀 음성 인식 모델을 사용하고 훈련하는 법

## 2. 요구사항

이번 튜토리얼을 마치기 위해서는, 아래와 같은 것들이 필요합니다.

1. 최신버전의 크롬 또는 다른 모던 브라우저
2. 로컬 머신에서 작동할 수 있는 텍스트 편집기 또는, Codepen, Glitch와 같은 툴
3. HTML, CSS, 자바스크립트, Chrome Devtool에 대한 기본적인 지식
4. 신경망에 대한 높은 수준의 이해. 초심자거나 다시 공부가 필요하다면, [3blue1brown](https://www.youtube.com/watch?v=aircAruvnKk)의 영상이나 [이 영상](https://www.youtube.com/watch?v=SV-cgdobtTA)을 참고해주세요.

## 3. Tensorflow.js와 오디오 모델 로딩

`index.html`에 아래 코드를 붙여 넣어주세요.

```html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>
  </head>
  <body>
    <div id="console"></div>
    <script src="index.js"></script>
  </body>
</html>
```

첫번째 스크립트 태그는 Tensorflow.js 라이브러리를 , 두번째 스크립트 태그는 이미 학습된 [음성 명령 모델](https://github.com/tensorflow/tfjs-models/tree/master/speech-commands)을 불러옵니다. `<div id="console">` 는 모델에서의 결과를 표시할 것입니다.

## 4. 실시간 예측

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

```javascript
let recognizer

function predictWord() {
  // Array of words that the recognizer is trained to recognize.
  const words = recognizer.wordLabels()
  recognizer.listen(
    ({ scores }) => {
      // Turn scores into a list of (score,word) pairs.
      scores = Array.from(scores).map((s, i) => ({ score: s, word: words[i] }))
      // Find the most probable word.
      scores.sort((s1, s2) => s2.score - s1.score)
      document.querySelector('#console').textContent = scores[0].word
    },
    { probabilityThreshold: 0.75 },
  )
}

async function app() {
  recognizer = speechCommands.create('BROWSER_FFT')
  await recognizer.ensureModelLoaded()
  predictWord()
}

app()
```

## 5. 예측을 테스트 해보기

로컬 머신에 마이크가 있는지 확인하세요. 혹시 없다면, 스마트폰에서 열어서 마이크를 사용해도됩니다. 웹페이지에서 실행하기 위해서, 먼저 `index.html`을 브라우저에서 엽니다. 로컬 파일에서 작업중이라면, 마이크에 엑세스 하기 위해서 web server 를 실행 한 다음에 `http://localhost:port/`를 활용하면 됩니다.

8000 port에서 실행하고 싶다면, 파이썬을 활용해도 됩니다.

`python -m SimpleHTTPServer`

처음에 모델을 다운로드 하는데 시간이 좀 걸립니다. 모델이 로딩되면, 페이지 맨 위에 단어 들이 뜨는 것을 볼 수 있을 것입니다. 이 모델은 0~9의 영문 숫자, 그리고 간단한 단어 `left` `right` `yes` `no` 등을 인식할 수 있습니다.

이들 단어중 하나를 말해보세요. 단어를 정확히 인식하나요? `probabilityThreshold`를 조정해서 한번 시험해보세요. 이 변수는 모델이 결과값을 예측하는 정도를 조절해줍니다. 0.75라는 값은 주어진 단어에 대해서 75% 이상의 확률로 확신한다면, 그 결과를 응답한다는 뜻입니다.

음성 인식 모델과 이 API에 대해서 좀더 자세히 알고 싶다면, Github의 [README.md](https://github.com/tensorflow/tfjs-models/blob/master/speech-commands/README.md)를 참고해보세요.

## 6. 데이터 수집

더 흥미롭게 만들어 봅시다. 슬라이더를 컨트롤 하기 위해, 모든 단어를 인식하는 대신 짧은 단어만 활용해봅시다.

우리는 세가지 명령어 - `left` `right` `noise` 만 인식하도록 훈련 시켜 볼 것입니다. 이 단어로 슬라이더를 움직여 볼 것입니다. `Noise`는 음성인식에서 인식하게 될 중요한 단어인데, 그 이유는 우리는 슬라이더가 올바른 사운드에만 반응하기를 원하기 때문입니다. 우리가 일반적으로 말하는 단어로 말할 때는 움직여서는 안됩니다.

1. 먼저 데이터를 수집해야 합니다. `<body/>` 태그에 원래 있던 `<div id="console"/>` 대신 아래 코드를 붙여 넣습니다.

```html
<button id="left" onmousedown="collect(0)" onmouseup="collect(null)">
  Left
</button>
<button id="right" onmousedown="collect(1)" onmouseup="collect(null)">
  Right
</button>
<button id="noise" onmousedown="collect(2)" onmouseup="collect(null)">
  Noise
</button>
```

2. 아래 코드를 `index.js`에 붙여넣습니다.

```javascript
// One frame is ~23ms of audio.
const NUM_FRAMES = 3
let examples = []

function collect(label) {
  if (recognizer.isListening()) {
    return recognizer.stopListening()
  }
  if (label == null) {
    return
  }
  recognizer.listen(
    async ({ spectrogram: { frameSize, data } }) => {
      let vals = normalize(data.subarray(-frameSize * NUM_FRAMES))
      examples.push({ vals, label })
      document.querySelector(
        '#console',
      ).textContent = `${examples.length} examples collected`
    },
    {
      overlapFactor: 0.999,
      includeSpectrogram: true,
      invokeCallbackOnNoiseAndUnknown: true,
    },
  )
}

function normalize(x) {
  const mean = -100
  const std = 10
  return x.map((x) => (x - mean) / std)
}
```

3. `app()`에서 `predictWord()`를 지우고 아래 코드를 붙여넣습니다.

### 코드를 자세히 보기

우리는 Left, Right, Noise라고 이름 붙인 세가지 버튼을 추가했습니다. 이 셋은, 우리 모델이 인식하기를 바라는 각각의 음성 명령입니다. 이 버튼을 누르면, 새롭게 추가한 `collect()` 함수를 실행하는데, 이 함수는 우리 모델에 훈련용 샘플을 만들어 줍니다.

`collect()`는 `recognizer.listen()`의 결과물인 `label` 과 연관 이 있습니다. `includeSpectrogram`가 true라면, `recognizer.listen()`는 1초의 오디오를 43개의 프레임으로 나눈 음성 데이터를 보내는데, 이는 각 프레임당 23ms 의 오디오 정보를 가지고 있습니다.

```javascript
recognizer.listen(async ({spectrogram: {frameSize, data}}) => {
...
}, {includeSpectrogram: true});
```

우리는 슬라이더를 컨트롤 하기 위해 짧은 단어만 필요하므로, 3개의 프레임 (70ms)만 취할 것입니다.

```javascript
let vals = normalize(data.subarray(-frameSize * NUM_FRAMES))
```

숫자 관련 이슈를 피하기 위해, 데이터를 평균 0, 분산 1인 데이터로 정규화 할 것입니다.이 경우, 음성은 -100 언저리의, 표준편차 10의 데이터로 구성되어 있습니다.

```javascript
const mean = -100
const std = 10
return x.map((x) => (x - mean) / std)
```

결국엔, 훈련 예제에는 두가지 필드만 남습니다.

- label: 0, 1, 2는 각각 left, right, nosie를 나타냅니다.
- vals: 음성정보를 가지고 있는 696개의 숫자

그리고 우리는 이 데이터를 모두 `examples`에 보관합니다.

```javascript
examples.push({ vals, label })
```

## 7. 수집한 데이터 테스트

각각의 예제 별로 데이터를 수집하기 위해, 각 버튼을 3~4초간 누르면서 반복적으로 음성을 제공합니다. 각 레이블 별로 150개 정도의 예제가 필요합니다. 예를 들어, `left`는 손가락 스냅소리, 휘파람은 `right`, 그 외의 침묵이나 대화 소리는 `Noise`로 할 수 있을 것입니다.

예제 데이터를 모은다면, 페이지 상단에 카운터가 뜰 것입니다. console.log()를 활용해 examples에 어떤 변수들이 담기는지 살펴보세요. 이 시점에서 목표는, 데이터 수집 프로세스를 테스트 하는 것입니다. 나중에, 전체 앱을 테스트 할 때 이 데이터를 다시 볼 것입니다.

## 8. 모델 훈련시키기

1. `index.html`에 `Noise` 버튼 하단에 아래 버튼을 추가하세요.

```html
<br /><br />
<button id="train" onclick="train()">Train</button>
```

2. 아래 코드를 index.js에 추가하세요.

```javascript
const INPUT_SHAPE = [NUM_FRAMES, 232, 1]
let model

async function train() {
  toggleButtons(false)
  const ys = tf.oneHot(
    examples.map((e) => e.label),
    3,
  )
  const xsShape = [examples.length, ...INPUT_SHAPE]
  const xs = tf.tensor(flatten(examples.map((e) => e.vals)), xsShape)

  await model.fit(xs, ys, {
    batchSize: 16,
    epochs: 10,
    callbacks: {
      onEpochEnd: (epoch, logs) => {
        document.querySelector('#console').textContent = `Accuracy: ${(
          logs.acc * 100
        ).toFixed(1)}% Epoch: ${epoch + 1}`
      },
    },
  })
  tf.dispose([xs, ys])
  toggleButtons(true)
}

function buildModel() {
  model = tf.sequential()
  model.add(
    tf.layers.depthwiseConv2d({
      depthMultiplier: 8,
      kernelSize: [NUM_FRAMES, 3],
      activation: 'relu',
      inputShape: INPUT_SHAPE,
    }),
  )
  model.add(tf.layers.maxPooling2d({ poolSize: [1, 2], strides: [2, 2] }))
  model.add(tf.layers.flatten())
  model.add(tf.layers.dense({ units: 3, activation: 'softmax' }))
  const optimizer = tf.train.adam(0.01)
  model.compile({
    optimizer,
    loss: 'categoricalCrossentropy',
    metrics: ['accuracy'],
  })
}

function toggleButtons(enable) {
  document.querySelectorAll('button').forEach((b) => (b.disabled = !enable))
}

function flatten(tensors) {
  const size = tensors[0].length
  const result = new Float32Array(tensors.length * size)
  tensors.forEach((arr, i) => result.set(arr, i * size))
  return result
}
```

3. 앱을 로드할 때 `buildModel()`을 호출하세요.

```javascript
async function app() {
  recognizer = speechCommands.create('BROWSER_FFT')
  await recognizer.ensureModelLoaded()
  // Add this line.
  buildModel()
}
```

앱을 새로고침 한다면, `Train` 버튼이 나타날 것입니다. 이 버튼을 클릭하면 데이터를 다시 수집해서 테스트하거나, 10 단계 까지 기다렸다가 예측과 함께 학습된 내용을 테스트 해볼 수 있습니다.

### 코드 살펴보기

여기에서는 크게 두가지 함수가 있습니다. `buildModel()`은 모델 아키텍쳐를 정의하고, `train()`은 수집한 데이터로 모델을 훈련 시킵니다.

#### 모델 아키텍쳐

이 모델에는 4개의 레이어가 있습니다. 음성데이터를 처리하기 위한 합성곱 레이어, max-pool layer, flatten layer, 그리고 3개의 레이어를 연결해주는 dense layer가 있습니다.

```javascript
model = tf.sequential()
model.add(
  tf.layers.depthwiseConv2d({
    depthMultiplier: 8,
    kernelSize: [NUM_FRAMES, 3],
    activation: 'relu',
    inputShape: INPUT_SHAPE,
  }),
)
model.add(tf.layers.maxPooling2d({ poolSize: [1, 2], strides: [2, 2] }))
model.add(tf.layers.flatten())
model.add(tf.layers.dense({ units: 3, activation: 'softmax' }))
```

input 모델의 형태는 `[NUM_FRAMES, 232, 1]`입니다. 이는 각 프레임이 23의 오디오를 갖고 있으며, 또 이들은 각각 232개의 서로 다른 진동수를 포함하고 있습니다. (232인 이유는, 사람의 목소리를 인식하는데 필요한 frequency의 양입니다) 이번 코드랩에서는, 단어 전체를 말하는 대신 소리를 만들기 때문에 3프레임 짜리 (~70ms) 샘플을 사용하고 있습니다.

모델을 훈련시키기 위해 모델을 컴파일 합니다.

```javascript
const optimizer = tf.train.adam(0.01)
model.compile({
  optimizer,
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy'],
})
```

여기에서는 [아담](https://arxiv.org/abs/1412.6980)을 사용했는데, 이는 딥러닝에서 가장 자주 사용되는 보편적인 옵티마이저입니다. loss와 분류를 위한 손실함수에는 `categoricalCrossEntropy`를 사용했습니다. 간단하게 말해, 이 방법론은 예측값이 어느정도의 확률로 나오는지 (각 클래스당)를 계싼하며, 100%~0%의 값으로 나옵니다. 여기에 또한 metric을 모니터링 하기 위해 `accuracy`를 변수로 넘겨주었습니다. 이는 각각의 모델들이 훈련을 거치면서 몇퍼센트의 정확도를 갖게 되는지 알려 줄 것입니다.

#### 학습

학습은 모든 데이터를 총 1ㅐ회 하며, 배치사이즈는 16이고, 현재의 정확도가 화면상에 나타날 것입니다.

```javascript
await model.fit(xs, ys, {
  batchSize: 16,
  epochs: 10,
  callbacks: {
    onEpochEnd: (epoch, logs) => {
      document.querySelector('#console').textContent = `Accuracy: ${(
        logs.acc * 100
      ).toFixed(1)}% Epoch: ${epoch + 1}`
    },
  },
})
```

## 9. 슬라이더를 실시간으로 움직이기

이제 우리 모델을 훈련시킬 수 있으니, 실시간으로 예측하고 슬라이더를 움직이는 코드를 추가합니다. `Train` 버튼 바로 밑에 아래 코드를 추가해주세요.

```html
<br /><br />
<button id="listen" onclick="listen()">Listen</button>
<input type="range" id="output" min="0" max="10" step="0.1" />
```

그리고 아래 코드를 `index.js`에 추가해주세요.

```javascript
async function moveSlider(labelTensor) {
  const label = (await labelTensor.data())[0]
  document.getElementById('console').textContent = label
  if (label == 2) {
    return
  }
  let delta = 0.1
  const prevValue = +document.getElementById('output').value
  document.getElementById('output').value =
    prevValue + (label === 0 ? -delta : delta)
}

function listen() {
  if (recognizer.isListening()) {
    recognizer.stopListening()
    toggleButtons(true)
    document.getElementById('listen').textContent = 'Listen'
    return
  }
  toggleButtons(false)
  document.getElementById('listen').textContent = 'Stop'
  document.getElementById('listen').disabled = false

  recognizer.listen(
    async ({ spectrogram: { frameSize, data } }) => {
      const vals = normalize(data.subarray(-frameSize * NUM_FRAMES))
      const input = tf.tensor(vals, [1, ...INPUT_SHAPE])
      const probs = model.predict(input)
      const predLabel = probs.argMax(1)
      await moveSlider(predLabel)
      tf.dispose([input, probs, predLabel])
    },
    {
      overlapFactor: 0.999,
      includeSpectrogram: true,
      invokeCallbackOnNoiseAndUnknown: true,
    },
  )
}
```

### 코드 살펴보기

#### 실시간 예측

`listen()` 함수는 마이크를 득고 실시간으로 예측하는 역할을 합니다. 이 코드는 `collect()`와 굉장히 유사합니다. 유일한 차이점은, 학습된 모델을 바탕으로 예측을 한다는 점입니다.

```javascript
const probs = model.predict(input)
const predLabel = probs.argMax(1)
await moveSlider(predLabel)
```

결과물인 `model.predict(input)`는 `[1, numClasses]`의 형태를 가지고 있습니다. 이는 클래스에 대한 각 확률 분포를 표현합니다. 더 간단히 말하자면, 이는 합계가 1인 각 출력 클래스에 대한 신뢰도 일 뿐입니다. 텐서는 단일크기이기 때문에 1의 합계를 가집니다.

확룰 분포를 가장 가능성이 높은 클래스를 나타내는 단일 정수로 변환하기 위해서는, `probs.argMax(1)`를 호출해야되는데, 이는 가장 확류이 높은 클래스의 index를 보여줍니다.

#### 슬라이더 움직이기

`moveSlider()` 함수는 만약 레이블이 0이라면 왼쪽으로, 1이라면 오른쪽으로, 2라면 움직이지 않습니다.

#### Disposing tensors

GPU 메모리를 정리하기 위해서, `tf.dispose()`함수를 호출하는 굉장히 중요합니다. 이 함수 대신 `tf.tidy()`를 사용하는 방법도 있습니다만, 이는 async 함수로 사용할 수 없습니다.

```javascript
tf.dispose([input, probs, predLabel])
```

## 10. 최종 결과물 확인

브라우저에서 index.html을 열고, 이전 섹션에서 처럼 3개의 명령에 해당하는 각각의 버튼을 활용해서 데이터를 수집합니다. 데이터를 수집하기 위해서는 각 버튼을 3~4초를 누른 채 유지해야 합니다.

샘플을 수집한 뒤에는, 학습 버튼을 누릅니다. 이 후에 모델이 학습하기 시작하며, 정확도가 90% 이상까지 향상될 것입니다. 모델 성능이 좋지 못하다면, 더 많은 데이터를 수집하세요.

학습이 끝나면, '듣기' 버튼을 눌러 마이크를 활용해 슬라이더를 제어하세요.

더많은 예제를 http://js.tensorflow.org/ 에서 확인하세요.


```toc tight: true, from-heading: 1 to-heading: 3 ``` # Transfer learning audio recognizer  이번 튜토리얼에서는, Tensorflow.js를 활용하여 브라우저에서 학습시키는 커스텀 오디오 분류기를 만들어 볼 것입니다. 브라우저에서 슬라이더를 컨트롤을 하여 사운드를 만들어 볼 것입니다....

yceffort

Javascript Regex 숫자를 comma와 함께 Formatting 하기

NextJS 2. Data Fetching

NextJS 1. Page & Route

자바스크립트 커링과 클로져

Tensorflow.js - 08. Build an audio recognizer