[이전글 보기](/2019/12/20/tensorflowjs-01-get-started/)

## 설치

### 브라우저 설치

Tensorflow.js를 설치하는 방법은 두 가지가 있습니다.

- Script tag를 이용하는법
- npm을 이용해서 설치하고, Parcel, Webpack, Rollup 같은 빌드 툴을 사용

뉴비 웹 개발자거나, 위 에서 언급한 패키지 들을 전혀 모른다면 스크립트 태그를 활용하세요. 혹은 조금 경험 이 있거나, 큰 규모의 프로그램을 계획하고 있다면 빌드 툴 활용을 검토해보세요.



#### 스크립트 태그 사용하기

```html
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
```

```javascript
// linear regression 모델
const model = tf.sequential()
model.add(tf.layers.dense({ units: 1, inputShape: [1] }))

model.compile({ loss: "meanSquaredError", optimizer: "sgd" })

// 훈련을 위한 임의 데이터 생성
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1])
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1])

// 데이터 기반으로 훈련시키기
model.fit(xs, ys, { epochs: 10 }).then(() => {
  // 훈련한 모델을 기반으로 데이터 예측
  model.predict(tf.tensor2d([5], [1, 1])).print()
  // dev tool에 결과 값이 나온다.
})
```

### npm을 이용해서 설치하기

`npm cli`나 `yarn`둘다 활용할 수 있습니다.

```
yarn add @tensorflow/tfjs
```

```
npm install @tensorflow/tfjs
```

```javascript
import * as tf from "@tensorflow/tfjs"

// linear regression 모델
const model = tf.sequential()
model.add(tf.layers.dense({ units: 1, inputShape: [1] }))

model.compile({ loss: "meanSquaredError", optimizer: "sgd" })

// 훈련을 위한 임의 데이터 생성
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1])
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1])

// 데이터 기반으로 훈련시키기
model.fit(xs, ys, { epochs: 10 }).then(() => {
  // 훈련한 모델을 기반으로 데이터 예측
  model.predict(tf.tensor2d([5], [1, 1])).print()
  // 결과 값이 나온다.
})
```

### Node.js 설치

`npm cli`나 `yarn`둘다 활용할 수 있습니다.

**Option1** native C++ 바인딩이 포함되어 있는 Tensorflow.js 설치

```
yarn add @tensorflow/tfjs-node
```

```
npm install @tensorflow/tfjs-node
```

**Option2** (리눅스 만 가능) 만약 시스템에서 CUDA NVIDIA GPU를 활용 가능하다면, 더 고성능 퍼포먼스를 위해 GPU 패키지를 사용할 수도 있습니다.

```
yarn add @tensorflow/tfjs-node-gpu
```

```
npm install @tensorflow/tfjs-node-gpu
```

**Option3** 순수 자바스크립트 버전 설치. 셋 중에 가장 느린 버전입니다.

```
yarn add @tensorflow/tfjs
```

```
npm install @tensorflow/tfjs
```

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

// 옵셔널
// '@tensorflow/tfjs-node-gpu' gpu와 사용하고 싶다면
require("@tensorflow/tfjs-node")

// Train a simple model:
const model = tf.sequential()
model.add(tf.layers.dense({ units: 100, activation: "relu", inputShape: [10] }))
model.add(tf.layers.dense({ units: 1, activation: "linear" }))
model.compile({ optimizer: "sgd", loss: "meanSquaredError" })

const xs = tf.randomNormal([100, 10])
const ys = tf.randomNormal([100, 1])

model.fit(xs, ys, {
  epochs: 100,
  callbacks: {
    onEpochEnd: (epoch, log) =>
      console.log(`Epoch ${epoch}: loss = ${log.loss}`),
  },
})
```

### TypeScript

타입스크립트 환경에서 사용한다면, 그리고 프로젝트에서 strict null 체킹을 한다면`skipLibCheck: true` 을 `tsconfig.json`에 포함시켜서 컴파일 도중에 에러가 나지 않도록 처리해야 합니다.

[이전글 보기](/2019/12/20/tensorflowjs-01-get-started/) ## 설치  ### 브라우저 설치  Tensorflow.js를 설치하는 방법은 두 가지가 있습니다.  - Script tag를 이용하는법 - npm을 이용해서 설치하고, Parcel, Webpack, Rollup 같은 빌드 툴을 사용  뉴비 웹 개발자거나, 위 에서...

Tensorflow.js - 02. 설치하기

## 요구사항

한 엘리먼트안에서 특정한 키워드를 다른 색싱으로 바꿔서 출력하는 것이다.

아래 예시를 살펴보자

### before

```jsx
<Text>카카오 페이지 카카오 스토리 카카오톡</Text>
```

### after

```jsx
<Text>
  <Text color="blue">카카오 </Text>페이지
  <Text color="blue">카카오 </Text>스토리
  <Text color="blue">카카오</Text>톡
</Text>
```

## 의식의 흐름

특정 키워드가 포함되어 있는지, 그리고 그것을 따로 뽑아 낼 수 있는 가장 간단한 방법은 무엇일까? 바로 [split](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split) 일 것이다.

```javascript
const splitResult = '카카오 페이지, 카카오 스토리, 카카오톡'
splitResult.split('카카오') // ["", " 페이지, ", " 스토리, ", "톡"]
```

그러나 여기서 두 가지 몰랐던 사실을 알게 된다.

1. 첫 문자에 seperator 가 동일하게 나올 경우, 앞에 ""가 무조건 나온다.
2. text === seperator 면 결과는 빈 문자열 두개다.

```javascript
const splitResult = '카카오'
splitResult.split('카카오') //  ["", ""]
```

> 문자열에서 separator가 등장하면 해당 부분은 삭제되고 남은 문자열이 배열로 반환됩니다. separator가 등장하지 않거나 생략되었을 경우 배열은 원본 문자열을 유일한 원소로 가집니다. separator가 빈 문자열일 경우, str은 문자열의 모든 문자를 원소로 가지는 배열로 변환됩니다. separator가 원본 문자열의 처음이나 끝에 등장할 경우 반환되는 배열도 빈 문자열로 시작하거나 끝납니다. 그러므로 원본 문자열에 separator 하나만이 포함되어 있을 경우 빈 문자열 두 개를 원소로 가지는 배열이 반환됩니다.

평소에 잘 몰랐던 split의 심오한 철학이 많이 있으니 가서 확인해보는 것도 좋을 듯 하다.

암튼 첫 번째 결과물은 이렇다.

```typescript
const [initial, ...rest] = text.split(highlight)
<Text>
    {rest.reduce(
        (partialResult, current) =>
        [
            ...partialResult,
            <Text
            key={highlight + current}
            color={highlightColor}
            inlineBlock
            size={fontSize}
            whiteSpace="pre"
            >
            {highlight}
            </Text>,
            current,
        ],
        [initial],
    )}
</Text>
```

[reduce](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) 를 활용해서, 처리했다.

근데 어차피, map으로 돌면서 하는게 더 간단하지 않을까 하는 아이디어가 나왔다.

## 결과

```typescript
const initial = text.split(highlight)
<Text>
    {initial.map((normal, i) =>
    i > 0 ? (
        <>
        <Text
            key={highlight + i.toString()}
            color={highlightColor}
            inlineBlock
            size={fontSize}
            whiteSpace="pre"
        >
            {highlight}
        </Text>
        {normal}
        </>
    ) : (
        <>{normal}</>
    ),
    )}
</Text>
```

`i > 0` 을 처리한 이유는, 어차피 첫번째 엘리먼트는 무조건 하이라이트가 안되는 텍스트가 오기 때문이다! 첫단어가 일치하는 단어라면 ""가 올 것이고, 일치 하지 않는 단어라면 그 단어 그대로 올라오기 때문에 첫번째 단어는 별도처리를 하지 않아도 된다.

그리고 두번째 엘리먼트 부터 해당 text가 있어서 쪼개진 단어가 올것이기 때문에, 앞에 하이라이트 텍스트를 붙여주고, 그 다음 평범한 단어를 붙여주면 된다.


## 요구사항 한 엘리먼트안에서 특정한 키워드를 다른 색싱으로 바꿔서 출력하는 것이다.  아래 예시를 살펴보자  ### before  ```jsx <Text>카카오 페이지 카카오 스토리 카카오톡</Text> ```  ### after  ```jsx <Text>   <Text color="blue">카카오 </Text>페이지   <Text color="bl...

리액트 텍스트 하이라이트 만들기

## 브라우저 히스토리

브라우저의 히스토리는 `window.history`안에 있다.

`History {length: 3, scrollRestoration: "auto", state: null}`

`length`만 가져올 수 있을 뿐, 실제 내부에 리스트는 가져올 수가 없는데 이는 보안상의 문제 때문이다.

`window.history.back()` `window.history.forward()`는 각각 브라우저의 앞으로가기 뒤로 가기와 동일한 역할을 한다.

## 특정 위치로 가기

`window.history.go(n)` 현재 페이지의 index는 0 이라고 볼 수 있다. -1 은 바로 전 페이지, 1 은 다음 페이지라고 볼 수 있다.

## 히스토리 추가 및 변경

### pushState

`window.pushState(state, title, url)`

아래와 같이 한번 사용해보자.

```javascript
history.pushState({ hello: "world" }, "title", "hello");
```

현재 있는 페이지 주소창에서 `hello`가 추가되었음을 알 수 있다. 그러나 브라우저는 이를 불러오지도 않고, 해당 주소의 존재여부도 파악하지 않는다. 그저 주소만 바뀐 것이다.

아래 프로세스를 살펴보자.

1. `www.google.com` 접속 -> history: 1
2. `history.pushState({ hello: "world" }, "title", "hello");` 입력 -> 주소창: `google.com/hello` / history: 2
3. `www.naver.com` 접속 -> history: 3
4. 뒤로가기 버튼 클릭
5. `https://www.google.com/hello` 가 404를 띄움 -> history.state에 hello: world 가 있음.
6. 뒤로가기 버튼 클릭
7. `www.google.com` 으로 돌아가지만, 여전히 404

따라서 `pushState`는 history에 새로운 history만을 추가할 뿐, 실질적으로 페이지 이동은 일으키지 않는 다는 것을 볼 수 있다.

#### state

javascript object로, pushState로 새로운 히스토리를 만드는 것과 관련이 있다. 사용자가 새로운 상태로 이동할 때마다, `popState`이벤트가 발생해서, `state`의 사본을 가져온다. 파이어폭스의 경우 640k정도의 데이터를 저장할 수 있으며, 이는 브라우저를 재시작해도 사용할 수 있다. 즉, 해당 history state에서 필요한 값을 넣어두는 용도로 사용하면 좋다.

#### title

현재 파이어폭스나 크롬에서 쓰지 않는 변수로 보인다. state의 명칭을 기록해 두는 용도로 사용하면 될 것 같다.

#### URL

새로운 history의 url을 지정한다. 이 전 예제에서도 봤던 것처럼, 브라우저는 해당 URL을 호출하지 않는다.

어째 돌아가는 모양, 주소는 바뀌지만 url을 로딩하지 않는 다는 것이 `window.location = '#foo'` 와 비슷해 보이는 측면이 있다. 이렇게 쓸모없어보이는 `pushState`는 아래와 같은 장점이 있다.

- `pushState`로 생성한 URL은 현재 URL을 기준으로 한다. 반대로 window.location는 해쉬값을 지정할 경우에만 같은 document에 머물러 있다. (아무튼 URL로딩을 안함)
- URL 변경이 필요 없다면, URL값을 안넣어서 변경을 안해주어도 된다. 반대로 해쉬값 지정의 경우에는 현재 해쉬값과 다른 경우에만 새로운 히스토리를 생성한다.
- `state` 오브젝트로 데이터를 저장할 수 있다. 반면 해쉬는 해쉬값을 활용해야 한다.


### replaceState

`replaceState`는 `pushState`와 동작이 거의 비슷하다. 다만 히스토리를 추가하는 것이 아닌, 덮어 쓴다는 것에서 차이가 있다.


## 브라우저 히스토리 브라우저의 히스토리는 `window.history`안에 있다.  `History {length: 3, scrollRestoration: "auto", state: null}`  `length`만 가져올 수 있을 뿐, 실제 내부에 리스트는 가져올 수가 없는데 이는 보안상의 문제 때문이다.  `window.history.back()` ...

브라우저 히스토리 조작

<h2 id="브라우저-히스토리">브라우저 히스토리</h2>
<p>브라우저의 히스토리는 <code>window.history</code>안에 있다.</p>
<p><code>History {length: 3, scrollRestoration: "auto", state: null}</code></p>
<p><code>length</code>만 가져올 수 있을 뿐, 실제 내부에 리스트는 가져올 수가 없는데 이는 보안상의 문제 때문이다.</p>
<p><code>window.history.back()</code> <code>window.history.forward()</code>는 각각 브라우저의 앞으로가기 뒤로 가기와 동일한 역할을 한다.</p>
<h2 id="특정-위치로-가기">특정 위치로 가기</h2>
<p><code>window.history.go(n)</code> 현재 페이지의 index는 0 이라고 볼 수 있다. -1 은 바로 전 페이지, 1 은 다음 페이지라고 볼 수 있다.</p>
<h2 id="히스토리-추가-및-변경">히스토리 추가 및 변경</h2>
<h3 id="pushstate">pushState</h3>
<p><code>window.pushState(state, title, url)</code></p>
<p>아래와 같이 한번 사용해보자.</p>
<pre class="language-javascript"><code class="language-javascript">history<span class="token punctuation">.</span><span class="token method function property-access">pushState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> hello<span class="token operator">:</span> <span class="token string">"world"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">"title"</span><span class="token punctuation">,</span> <span class="token string">"hello"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>현재 있는 페이지 주소창에서 <code>hello</code>가 추가되었음을 알 수 있다. 그러나 브라우저는 이를 불러오지도 않고, 해당 주소의 존재여부도 파악하지 않는다. 그저 주소만 바뀐 것이다.</p>
<p>아래 프로세스를 살펴보자.</p>
<ol>
<li><code>www.google.com</code> 접속 -> history: 1</li>
<li><code>history.pushState({ hello: "world" }, "title", "hello");</code> 입력 -> 주소창: <code>google.com/hello</code> / history: 2</li>
<li><code>www.naver.com</code> 접속 -> history: 3</li>
<li>뒤로가기 버튼 클릭</li>
<li><code>https://www.google.com/hello</code> 가 404를 띄움 -> history.state에 hello: world 가 있음.</li>
<li>뒤로가기 버튼 클릭</li>
<li><code>www.google.com</code> 으로 돌아가지만, 여전히 404</li>
</ol>
<p>따라서 <code>pushState</code>는 history에 새로운 history만을 추가할 뿐, 실질적으로 페이지 이동은 일으키지 않는 다는 것을 볼 수 있다.</p>
<h4 id="state">state</h4>
<p>javascript object로, pushState로 새로운 히스토리를 만드는 것과 관련이 있다. 사용자가 새로운 상태로 이동할 때마다, <code>popState</code>이벤트가 발생해서, <code>state</code>의 사본을 가져온다. 파이어폭스의 경우 640k정도의 데이터를 저장할 수 있으며, 이는 브라우저를 재시작해도 사용할 수 있다. 즉, 해당 history state에서 필요한 값을 넣어두는 용도로 사용하면 좋다.</p>
<h4 id="title">title</h4>
<p>현재 파이어폭스나 크롬에서 쓰지 않는 변수로 보인다. state의 명칭을 기록해 두는 용도로 사용하면 될 것 같다.</p>
<h4 id="url">URL</h4>
<p>새로운 history의 url을 지정한다. 이 전 예제에서도 봤던 것처럼, 브라우저는 해당 URL을 호출하지 않는다.</p>
<p>어째 돌아가는 모양, 주소는 바뀌지만 url을 로딩하지 않는 다는 것이 <code>window.location = '#foo'</code> 와 비슷해 보이는 측면이 있다. 이렇게 쓸모없어보이는 <code>pushState</code>는 아래와 같은 장점이 있다.</p>
<ul>
<li><code>pushState</code>로 생성한 URL은 현재 URL을 기준으로 한다. 반대로 window.location는 해쉬값을 지정할 경우에만 같은 document에 머물러 있다. (아무튼 URL로딩을 안함)</li>
<li>URL 변경이 필요 없다면, URL값을 안넣어서 변경을 안해주어도 된다. 반대로 해쉬값 지정의 경우에는 현재 해쉬값과 다른 경우에만 새로운 히스토리를 생성한다.</li>
<li><code>state</code> 오브젝트로 데이터를 저장할 수 있다. 반면 해쉬는 해쉬값을 활용해야 한다.</li>
</ul>
<h3 id="replacestate">replaceState</h3>
<p><code>replaceState</code>는 <code>pushState</code>와 동작이 거의 비슷하다. 다만 히스토리를 추가하는 것이 아닌, 덮어 쓴다는 것에서 차이가 있다.</p>

[목차](/2019/08/13/reactjs-interview-questions/) # table of contents  ```toc tight: true, from-heading: 2 to-heading: 3 ```  ## React Router  ### What is React Router?  React Router는 리액트 최상단에 있는 강력한 라우...

리액트 면접 질문 모음 (2)

[목차](/2019/08/13/reactjs-interview-questions/)  ```toc tight: true, from-heading: 2 to-heading: 3 ```  ## Core React  ### What is React  리액트는 오픈소스 프론트엔드 자바스크립트 라이브러리로, 특히 싱글 페이지 애플리케이션의 사용자 인터페이스 구축을...

yceffort

javascript

Tensorflow.js - 02. 설치하기

리액트 텍스트 하이라이트 만들기

브라우저 히스토리 조작

리액트 면접 질문 모음 (2)

리액트 면접 질문 모음 (1)