Don't do anything boring

## Tensorflow JS

중요도: ★★★★★
난이도: ★★★★★

AI가 하고 싶어요 선생님... tensorflowjs 를 튜토리얼부터 따라하면서 배워보자.

## 알고리즘 강의

[백준강의](https://code.plus/bundle/8)

이제 알고리즘 정복할 때가 되었다. 자바스크립트와 파이썬으로 진행해볼 예정.

중요도: ★★★★
난이도: ★★

## Preference 패키지

terminal과 친숙해지기 위해 alias설정, git 설정 등을 모아 놓은 private repository를 만들어보고자 한다.

https://blog.appkr.dev/work-n-play/dotfiles/
https://github.com/inbeom/dotfiles
https://github.com/boxersb/dotfiles

요런 거를 참고해보자. `dotfiles` 보다는 광범위한 영역을 커버해보고 싶다.

중요도: ★
난이도: ★★

## Resume 작성

마크다운 문서로 Resume를 준비해두자. 그리고 꼭 이직은 아니더라도 한 두군데 이따금씩 넣어보면서 업계에서의 내 위치(?) 를 고민해보자.

중요도: ★★★★
난이도: ★

## Kindle

이제 이 좁은 집에 더 이상 책 둘 곳도 없다. 이제 그냥 킨들로 읽자. 작년까지는 무식하게 많이 읽자 주의 였다면, 이제는 좀 한권씩 정독할 생각이다.

중요도: ★★★
난이도: ★★★★★

## 영어 Speaking

영어 면접 대비인데... 당장 일하러갈일이 없어서 이건 안 할 수도 있겠다.

중요도: ★★★
난이도: ★

## 앱 런칭

`flutter` 나 `react-native-app`으로 새롭게 앱 하나 만들어 보고 싶다. 근데 마땅히 뭘 만들어야 할지 아무생각이 없다.

중요도: ★
난이도: ★★★★


Don't do anything boring ## Tensorflow JS  중요도: ★★★★★ 난이도: ★★★★★  AI가 하고 싶어요 선생님... tensorflowjs 를 튜토리얼부터 따라하면서 배워보자.  ## 알고리즘 강의  [백준강의](https://code.plus/bundle/8)  이제 알고리즘 정복할 때가 되었다. 자바스크립트와 파이썬으...

2020년 목표

## Commit Message

[좋은 git commit 메시지를 위한 영어사전](https://blog.ull.im/engineering/2019/03/10/logs-on-git.html)

[좋은 git 커밋 메시지를 작성하기 위한 7가지 약속](https://meetup.toast.com/posts/106)

### 요약

Single Line

```
[#issue number] :emoji: Commit Message
```

Multi Line

```
[#issue number] :emoji: Commit Message
- change detail1
- change detail2
```

- Single Line 과 동일하지만, Multi Line 으로 가면 두 번째 라인은 반드시 비워둘 것
- 세 번째 라인부터 Change 상세를 리스트 형식으로 기술

## Linear History in git

### 장점

1. **git bisect**
2. **possibility of submitting with history to another version control system like SVN**
3. **Documentation for the posterity**. A linear history is typically easier to follow. This is similar to how you want your code to be well structured and documented: whenever someone needs to deal with it later (code or history) it is very valuable to be able to quickly understand what is going on.
4. **Improving code review efficiency and effectiveness**. If a topic branch is divided into linear, logical steps, it is much easier to review it compared to reviewing a convoluted history or a squashed change-monolith (which can be overwhelming).
5. **When you need to modify the history at a later time**. For instance when reverting or cherry-picking a feature in whole or in part.
6. **Scalability.** Unless you strive to keep your history linear when your team grows larger (e.g. hundreds of contributors), your history can become very bloated with cross branch merges, and it can be hard for all the contributors to keep track of what is going on.

[출처](https://stackoverflow.com/questions/20348629/what-are-advantages-of-keeping-linear-history-in-git)

### Rebase

리베이스가 최고다

[출처](https://dev.to/maxwell_dev/the-git-rebase-introduction-i-wish-id-had)

간단히 요약하면, 내가 작업한 내용을 master의 최신 커밋 뒤에 이어서 붙이는 것이다.

우리의 목표

![git-rebase](https://git-scm.com/book/en/v2../../../images/perils-of-rebasing-5.png)

1. rebase 대상 브랜치 (보통은 master)를 checkout해서 pull
2. rebase 하려는 브랜치 (내가 작업한 브랜치)를 checkout해서 pull

![git-rebase](https://git-scm.com/book/en/v2../../../images/basic-rebase-1.png)
현재까지의 상태는 이럴 것이다.

3. `git rebase master` 를 때린다

![git-rebase](https://git-scm.com/book/en/v2../../../images/basic-rebase-3.png)

4. 컨플릭이 없다면 6번으로

5. 컨플릭이 있다면 컨플릭을 해결한 후에 `git rebase --continue`를 한다.

6. `git push origin <branch> --force`로 force push를 한다.

리베이스는 과거 커밋을 지우고 뒤에 이어 붙인 새로운 커밋을 만들기 때문에, 저장소의 커밋 히스토리를 다시 쓰게 된다.


## Commit Message [좋은 git commit 메시지를 위한 영어사전](https://blog.ull.im/engineering/2019/03/10/logs-on-git.html)  [좋은 git 커밋 메시지를 작성하기 위한 7가지 약속](https://meetup.toast.com/posts/106)  ### 요약  Single Line  ...

Github을 아름답게 관리하기

## 요구사항

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

아래 예시를 살펴보자

### 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...

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

> Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel method to cancel delayed func invocations and a flush method to immediately invoke them. Provide options to indicate whether func should be invoked on the leading and/or trailing edge of the wait timeout. The func is invoked with the last arguments provided to the debounced function. Subsequent calls to the debounced function return the result of the last func invocation.

[출처](https://lodash.com/docs/4.17.15#debounce)

디바운스는 과다한 이벤트 로직이 실행되는 것을 방지하는 함수로, 호출이 반복되는 동안에는 반복해서 로직이 실행되는 것을 막고, 설정한 시간이 지나고 나서야 로직이 실행하게 하는 함수다. 


```typescript
export function debounce<Params extends any[]>(
  func: (...args: Params) => any,
  timeout: number
): (...args: Params) => void {
  let timer: NodeJS.Timeout;
  return (...args: Params) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, timeout);
  };
}
```

즉, 반복되는 이벤트가 계속해서 실행될 때, 매번 그 이벤트를 실행하는 것이 아니라, timeout 만큼의 시간이 흐른뒤에, 이전의 이벤트를 무시하고 이벤트 하나만 실행하는 것이다.


> Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel m...

typescript debounce

## 브라우저 히스토리

브라우저의 히스토리는 `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>

yceffort

2020년 목표

Github을 아름답게 관리하기

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

typescript debounce

브라우저 히스토리 조작