## I/O는 느리다

IO (Input / Output)은 컴퓨터의 기본 작업 중에 제일 느리다. RAM에 비해서 당연히 느리고, 디스크의 처리속도, CPU 등등과 비교해서도 제일 느린 것이 IO다. 과거 플로피 디스크를 생각해보면, 디스크에서 긁히는 (읽는) 소리가 나서야 프로그램이 동작했다. 따라서 I/O는 웹 서비스의 성능에 가장 많은 영향을 미치는, 모니터링 해야 하는 요소 중에 하나다.

## 블로킹 I/O

전통적인 블로킹 IO 프로그래밍 에서는, IO 요청에 해당하는 함수의 작업이 완료 될 때까지 쓰레드의 실행이 차단된다.

```javascript
// 데이터가 사용가능해질 때까지 블로킹됨
data = socket.read()
// 데이터가 사용가능해져야 비로소 print가 된다.
print(data)
```

따라서 블로킹 IO를 사용하여 구현된 웹서버에서는, 한개의 쓰레드에서 여러개의 연결을 처리할 수 없다. 소켓의 IO 동작이 다른 연결의 처리를 차단해 버리기 때문이다. 이 문제를 해결하기 위한 전통적인 접근 방식은, 각각의 연결을 동시에 처리하기 위해 별도의 스레드 (프로세스)를 사용하는 것이다.

데이터 베이스 또는 파일 시스템과 상호작용하기 위하여 IO를 차단해야 한다면, IO 작업 결과를 대기 하기 위해 얼마나 많은 스레드가 차단되어야 하는지는 쉽게 상상할 수 있다. 당연히도, 스레드는 시스템 리소스 측면에서 저렴하지 않으므로, 각 연결에 대해 장기간 실행되는 스레드를 가지고 대부분의 시간 동안 사용하지 않는 것은 소중한 메모리와 CPU 사이클을 낭비하게 되는 결과를 초래한다.

## 논블로킹 I/O

대부분의 최신 OS는 블로킹 IO 외에도 논블로킹 IO라고 하는 또다른 메커니즘을 지원한다. 이 모드에서는, 데이터가 읽히거나 쓰일 때 까지 기다리지 않고 즉시 시스템 호출을 반환한다. 이 시점에 결과를 리턴할 준비가 안되어 있을 경우, 미리 정해진 상수를 반환하여 그 순간에 아직 반환할 수 있는 데이터가 없음을 나타낸다.

이러한 논블로킹 IO 처리를 위한 기본적인 패턴은, 실제 데이터가 반환될 때까지 루프 내에서 리소스를 계속해서 폴링하는 것이다. 이를 `busy-waiting`이라고 한다.

```javascript
resources = [socketA, socketB, fileA]
while (!resources.isEmpty()) {
  for (resource of resources) {
    // 읽기 시도
    data = resource.read()
    if (data === NO_DATA_AVAILABLE) {
      // 아직 데이터가 없다
      continue
    }
    if (data === RESOURCE_CLOSED) {
      // 리소스가 종료되었다. 리스트에서 삭제
      resources.remove(i)
    } else {
      // 데이터를 받았다.
      consumeData(data)
    }
  }
}
```

보시다시피 이는 간단하게 동일 스레드에서 서로 다른 자원을 처리할 수 있지만, 여전히 효율적이 지 않다. 위 예제의 루프는 대부분의 시간을 사용할 수 없는 리소스를 반복하기 위해 귀중한 CPU 자원만 소비한다. 폴링 알고리즘은, CPU 를 엄청나게 낭비한다.

## 이벤트 디멀티플렉싱

멀티플렉싱이란, 하나의 통신 채널을 통해서 둘 이상의 데이터를 전송하는데 사용하는 기술로, 여러개의 신호를 하나로 결합해 용량이 제한된 매체를 통해 전송하는 방식이다.

디멀티플렉싱은, 신호가 원래 구성요소로 다시 분할되는, 멀티플렉싱과 반대되는 동작이다. 여러 리소스를 감시하고, 이중 하나의 실행된 읽기 또는 쓰기 작업이 완료되면 새로운 이벤트를 반환한다. 여기서 장점은 동기식으로 작동하기 때문에 새로운 이벤트가 있을 때까지 차단한다는 것이다. 즉 이 매커니즘은, 일련의 리소스들로부터 오는 IO 이벤트를 모아서 큐에 넣고 처리할 수 있는 새 이벤트가 있을 때까지 차단한다.

```javascript
// 리소스가 하나씩 추가된다
watchedList.add(socketA, FOR_READ)
watchedList.add(fileB, FOR_READ)
// demultiplexer.watch는 동기식으로 작동되며
// 감시 대상 중 하나라도 데이터를 리턴하기 전까지 차단된다.
// 자원이 읽어드릴 준비가 되면, 호출로 부터 복귀해서 새로운 이벤트를 처리할 수 있게 된다. (비동기)
while ((events = demultiplexer.watch(watchedList))) {
  // 디멀티플렉서가 감시할 자원의 그룹을 설정해둔다.
  // 이벤트 루프
  for (event of events) {
    // (3)
    // 디멀티플렉서가 반환한 이벤트가 처리된다.
    // 이곳에 도달했다는 것은, 읽기 작업이 완료되었다는 것이므로 차단되지 않고 데이터를 반환한다.
    data = event.resource.read()
    if (data === RESOURCE_CLOSED) {
      // 리소스가 닫히면, 더이상 감시하지 않는다.
      demultiplexer.unwatch(event.resource)
    } else {
      // 데이터를 받으면, 그냥 처리한다.
      consumeData(data)
    }
  }
}
```

정리하자면, 바로 값을 가져올 수 없는 형태의 함수를 만날 경우, 일단 약속된 상수값을 리턴하고, 해당 함수를 디멀티플렉서에 추가한다. 추가된 내용에는 완료 후 호출된 콜백과 이벤트가 들어 있다. 이벤트가 완료되면 디멀티플렉서가 이벤트를 반환한다. 반환된 이벤트는 이벤트 큐에 푸시되고, 이벤트 루프는 이 큐를 순환하며 각각 이벤트에 대한 핸들러를 실행한다.

이를 활용하면, 하나의 스레드로 여러 IO 작업을 동시에 실행할 수 있다. 이 외에도 하나의 쓰레드에서 처리한다는 것은, 프로그래머들이 동시성에 접근하는 방식에도 이점을 얻을 수 있다.

## 반응자 패턴 (Reactor Pattern)

반응자 패턴의 핵심 개념은 각 IO 동작과 관련된 핸들러를 갖는 것이다. Nodejs에서 핸들러는 콜백 함수로 표현된다. 핸들러는 이벤트 루프에 의해 이벤트가 생성되고, 처리되는 즉시 호출된다.

![Reactor pattern](https://miro.medium.com/max/1200/1*X0m82lpBhRONFvRGCRu84w.jpeg)

1. 애플리케이션이 요청을 이벤트 디멀티플렉서에 제출하여, 새로운 IO 작업을 생성한다. 애플리케이션은 또한 작업이 완료되면 호출할 핸들러(콜백)를 지정한다. 새로운 요청을 이벤트 디멀티플렉서에 제출하는 것은 논블로킹 요청으로, 즉시 애플리케이션에 통제권을 반환한다.
2. IO 작업 세트가 완료되면, 이벤트 디멀티플렉서가 해당 이벤트 세트를 이벤트 큐로 푸시 한다.
3. 이 때, 이벤트 루프는 이벤트 큐 항목에서 반복된다.
4. 각 이벤트에 연결된 핸들러가 호출된다.
5. 애플리케이션 코드의 일부인 핸들러(콜백) 실행이 완료되면, 이벤트 루프를 다시 제어한다. 콜백이 실행되는 동안, 새로운 비동기 작업을 요청할 수 있으며, 이는 이벤트 디멀티플렉서에 새로운 항목 추가를 야기한다.
6. 이벤트 큐의 모든항목이 처리되면, 이벤트 루프는 이벤트 디멀티플렉서를 다시 차단하며, 이 경우 새로운 이벤트가 가능해질 때 다시 트리거한다.

비동기 동작이 이제 보다 분명해졌다. 애플리케이션은 특정 시점에 (블로킹 없이) 자원에 접근하는 것에 대한 의사를 표시하고 이에 따른 핸들러를 제공하며, 다음 연산이 완료되면 다른 시점에 호출된다.

우리는 Node.js의 핵심 패턴을 다음과 같이 정의할 수 있다.

> 반응자 패턴: 관찰 대상 리소스가 반응하면 (콜백) 해당 이벤트 핸들러를 추적해 실행하는 디자인 패턴.

## Libuv, Node.js의 IO 엔진

각 운영체제는 이벤트 디멀티플렉서에 대한 자체 인터페이스가 있다. (리눅스의 epoll, macos의 kqueue, 윈도우의 IOCP API) 이러한 불일치로 인해 node.js 팀은 모든 주요 운영 체제와 호환되고 서로 다른 유형의 논블로킹 동작을 정상적으로 처리하기 위한 목적으로 `libuv`라고 하는 네이티브 라이브러리를 만들었다. `libuv`는 기본적인 시스템 호출을 추상화 하는 것 외에도, 반응자 패턴을 구현하여 이벤트 루프 생성, 이벤트 큐 곤리, 비동기 IO 작업 실행 및, 기타 유형의 작업 큐를 위한 API를 제공한다.

## Node.js

반응자패턴과 `libuv`는 Node.js를 구성하는 핵심이며, 여기에 추가적으로 3개의 구성요소를 더하면 node.js가 완성된다.

- Binding: `libuv` 과 기타 저수준 기능을 자바스크립트에 래핑하고 사용가능하게 만들어 준다.
- V8: 구글에서 만든 크롬용 자바스크립트 엔진. Node.js를 빠르고 효율적으로 만들어 준다. 혁신적인 디자인과 속도, 효율적인 메모리 관리로 호평받고 있다.
- Javascript Core API: Node.js API를 구현하는 코어

![receipt node.js](https://t1.daumcdn.net/cfile/tistory/992DF44A5AD96F4E0B)


Node.js는 어떻게 동작하는가

<h2 id="io는-느리다">I/O는 느리다</h2>
IO (Input / Output)은 컴퓨터의 기본 작업 중에 제일 느리다. RAM에 비해서 당연히 느리고, 디스크의 처리속도, CPU 등등과 비교해서도 제일 느린 것이 IO다. 과거 플로피 디스크를 생각해보면, 디스크에서 긁히는 (읽는) 소리가 나서야 프로그램이 동작했다. 따라서 I/O는 웹 서비스의 성능에 가장 많은 영향을 미치는, 모니터링 해야 하는 요소 중에 하나다.
<h2 id="블로킹-io">블로킹 I/O</h2>
전통적인 블로킹 IO 프로그래밍 에서는, IO 요청에 해당하는 함수의 작업이 완료 될 때까지 쓰레드의 실행이 차단된다.
<pre class="language-javascript"><code class="language-javascript">// 데이터가 사용가능해질 때까지 블로킹됨
data = socket.read()
// 데이터가 사용가능해져야 비로소 print가 된다.
print(data)
</code></pre>
따라서 블로킹 IO를 사용하여 구현된 웹서버에서는, 한개의 쓰레드에서 여러개의 연결을 처리할 수 없다. 소켓의 IO 동작이 다른 연결의 처리를 차단해 버리기 때문이다. 이 문제를 해결하기 위한 전통적인 접근 방식은, 각각의 연결을 동시에 처리하기 위해 별도의 스레드 (프로세스)를 사용하는 것이다.
데이터 베이스 또는 파일 시스템과 상호작용하기 위하여 IO를 차단해야 한다면, IO 작업 결과를 대기 하기 위해 얼마나 많은 스레드가 차단되어야 하는지는 쉽게 상상할 수 있다. 당연히도, 스레드는 시스템 리소스 측면에서 저렴하지 않으므로, 각 연결에 대해 장기간 실행되는 스레드를 가지고 대부분의 시간 동안 사용하지 않는 것은 소중한 메모리와 CPU 사이클을 낭비하게 되는 결과를 초래한다.
<h2 id="논블로킹-io">논블로킹 I/O</h2>
대부분의 최신 OS는 블로킹 IO 외에도 논블로킹 IO라고 하는 또다른 메커니즘을 지원한다. 이 모드에서는, 데이터가 읽히거나 쓰일 때 까지 기다리지 않고 즉시 시스템 호출을 반환한다. 이 시점에 결과를 리턴할 준비가 안되어 있을 경우, 미리 정해진 상수를 반환하여 그 순간에 아직 반환할 수 있는 데이터가 없음을 나타낸다.
이러한 논블로킹 IO 처리를 위한 기본적인 패턴은, 실제 데이터가 반환될 때까지 루프 내에서 리소스를 계속해서 폴링하는 것이다. 이를 <code>busy-waiting</code>이라고 한다.
<pre class="language-javascript"><code class="language-javascript">resources = [socketA, socketB, fileA]
while (!resources.isEmpty()) {
 for (resource of resources) {
 // 읽기 시도
 data = resource.read()
 if (data === NO_DATA_AVAILABLE) {
 // 아직 데이터가 없다
 continue
 }
 if (data === RESOURCE_CLOSED) {
 // 리소스가 종료되었다. 리스트에서 삭제
 resources.remove(i)
 } else {
 // 데이터를 받았다.
 consumeData(data)
 }
 }
}
</code></pre>
보시다시피 이는 간단하게 동일 스레드에서 서로 다른 자원을 처리할 수 있지만, 여전히 효율적이 지 않다. 위 예제의 루프는 대부분의 시간을 사용할 수 없는 리소스를 반복하기 위해 귀중한 CPU 자원만 소비한다. 폴링 알고리즘은, CPU 를 엄청나게 낭비한다.
<h2 id="이벤트-디멀티플렉싱">이벤트 디멀티플렉싱</h2>
멀티플렉싱이란, 하나의 통신 채널을 통해서 둘 이상의 데이터를 전송하는데 사용하는 기술로, 여러개의 신호를 하나로 결합해 용량이 제한된 매체를 통해 전송하는 방식이다.
디멀티플렉싱은, 신호가 원래 구성요소로 다시 분할되는, 멀티플렉싱과 반대되는 동작이다. 여러 리소스를 감시하고, 이중 하나의 실행된 읽기 또는 쓰기 작업이 완료되면 새로운 이벤트를 반환한다. 여기서 장점은 동기식으로 작동하기 때문에 새로운 이벤트가 있을 때까지 차단한다는 것이다. 즉 이 매커니즘은, 일련의 리소스들로부터 오는 IO 이벤트를 모아서 큐에 넣고 처리할 수 있는 새 이벤트가 있을 때까지 차단한다.
<pre class="language-javascript"><code class="language-javascript">// 리소스가 하나씩 추가된다
watchedList.add(socketA, FOR_READ)
watchedList.add(fileB, FOR_READ)
// demultiplexer.watch는 동기식으로 작동되며
// 감시 대상 중 하나라도 데이터를 리턴하기 전까지 차단된다.
// 자원이 읽어드릴 준비가 되면, 호출로 부터 복귀해서 새로운 이벤트를 처리할 수 있게 된다. (비동기)
while ((events = demultiplexer.watch(watchedList))) {
 // 디멀티플렉서가 감시할 자원의 그룹을 설정해둔다.
 // 이벤트 루프
 for (event of events) {
 // (3)
 // 디멀티플렉서가 반환한 이벤트가 처리된다.
 // 이곳에 도달했다는 것은, 읽기 작업이 완료되었다는 것이므로 차단되지 않고 데이터를 반환한다.
 data = event.resource.read()
 if (data === RESOURCE_CLOSED) {
 // 리소스가 닫히면, 더이상 감시하지 않는다.
 demultiplexer.unwatch(event.resource)
 } else {
 // 데이터를 받으면, 그냥 처리한다.
 consumeData(data)
 }
 }
}
</code></pre>
정리하자면, 바로 값을 가져올 수 없는 형태의 함수를 만날 경우, 일단 약속된 상수값을 리턴하고, 해당 함수를 디멀티플렉서에 추가한다. 추가된 내용에는 완료 후 호출된 콜백과 이벤트가 들어 있다. 이벤트가 완료되면 디멀티플렉서가 이벤트를 반환한다. 반환된 이벤트는 이벤트 큐에 푸시되고, 이벤트 루프는 이 큐를 순환하며 각각 이벤트에 대한 핸들러를 실행한다.
이를 활용하면, 하나의 스레드로 여러 IO 작업을 동시에 실행할 수 있다. 이 외에도 하나의 쓰레드에서 처리한다는 것은, 프로그래머들이 동시성에 접근하는 방식에도 이점을 얻을 수 있다.
<h2 id="반응자-패턴-reactor-pattern">반응자 패턴 (Reactor Pattern)</h2>
반응자 패턴의 핵심 개념은 각 IO 동작과 관련된 핸들러를 갖는 것이다. Nodejs에서 핸들러는 콜백 함수로 표현된다. 핸들러는 이벤트 루프에 의해 이벤트가 생성되고, 처리되는 즉시 호출된다.
<img src="https://miro.medium.com/max/1200/1*X0m82lpBhRONFvRGCRu84w.jpeg" alt="Reactor pattern">
<ol>
<li>애플리케이션이 요청을 이벤트 디멀티플렉서에 제출하여, 새로운 IO 작업을 생성한다. 애플리케이션은 또한 작업이 완료되면 호출할 핸들러(콜백)를 지정한다. 새로운 요청을 이벤트 디멀티플렉서에 제출하는 것은 논블로킹 요청으로, 즉시 애플리케이션에 통제권을 반환한다.</li>
<li>IO 작업 세트가 완료되면, 이벤트 디멀티플렉서가 해당 이벤트 세트를 이벤트 큐로 푸시 한다.</li>
<li>이 때, 이벤트 루프는 이벤트 큐 항목에서 반복된다.</li>
<li>각 이벤트에 연결된 핸들러가 호출된다.</li>
<li>애플리케이션 코드의 일부인 핸들러(콜백) 실행이 완료되면, 이벤트 루프를 다시 제어한다. 콜백이 실행되는 동안, 새로운 비동기 작업을 요청할 수 있으며, 이는 이벤트 디멀티플렉서에 새로운 항목 추가를 야기한다.</li>
<li>이벤트 큐의 모든항목이 처리되면, 이벤트 루프는 이벤트 디멀티플렉서를 다시 차단하며, 이 경우 새로운 이벤트가 가능해질 때 다시 트리거한다.</li>
</ol>
비동기 동작이 이제 보다 분명해졌다. 애플리케이션은 특정 시점에 (블로킹 없이) 자원에 접근하는 것에 대한 의사를 표시하고 이에 따른 핸들러를 제공하며, 다음 연산이 완료되면 다른 시점에 호출된다.
우리는 Node.js의 핵심 패턴을 다음과 같이 정의할 수 있다.
<blockquote>
반응자 패턴: 관찰 대상 리소스가 반응하면 (콜백) 해당 이벤트 핸들러를 추적해 실행하는 디자인 패턴.
</blockquote>
<h2 id="libuv-nodejs의-io-엔진">Libuv, Node.js의 IO 엔진</h2>
각 운영체제는 이벤트 디멀티플렉서에 대한 자체 인터페이스가 있다. (리눅스의 epoll, macos의 kqueue, 윈도우의 IOCP API) 이러한 불일치로 인해 node.js 팀은 모든 주요 운영 체제와 호환되고 서로 다른 유형의 논블로킹 동작을 정상적으로 처리하기 위한 목적으로 <code>libuv</code>라고 하는 네이티브 라이브러리를 만들었다. <code>libuv</code>는 기본적인 시스템 호출을 추상화 하는 것 외에도, 반응자 패턴을 구현하여 이벤트 루프 생성, 이벤트 큐 곤리, 비동기 IO 작업 실행 및, 기타 유형의 작업 큐를 위한 API를 제공한다.
<h2 id="nodejs">Node.js</h2>
반응자패턴과 <code>libuv</code>는 Node.js를 구성하는 핵심이며, 여기에 추가적으로 3개의 구성요소를 더하면 node.js가 완성된다.
<ul>
<li>Binding: <code>libuv</code> 과 기타 저수준 기능을 자바스크립트에 래핑하고 사용가능하게 만들어 준다.</li>
<li>V8: 구글에서 만든 크롬용 자바스크립트 엔진. Node.js를 빠르고 효율적으로 만들어 준다. 혁신적인 디자인과 속도, 효율적인 메모리 관리로 호평받고 있다.</li>
<li>Javascript Core API: Node.js API를 구현하는 코어</li>
</ul>
<img src="https://t1.daumcdn.net/cfile/tistory/992DF44A5AD96F4E0B" alt="receipt node.js">

## useEffect는 라이프 사이클 메소드가 아니다

과거 리액트 클래스 컴포넌트에는 `constructor` `componentDidMount` `componentDidUpdate` `componentWillUnmount` 와 같이 리액트 라이프 사이클에 대응할 수 있는 각각의 메소드가 존재했다. 함수형 컴포넌트의 훅으로 넘어오면서, 이러한 라이프 사이클 메소드를 훅으로 각각 대체하려고 하지만 이는 큰 실수다.

결론부터 말하자면, `useEffect`는 라이프 사이클 훅이 아니다. `useEffect`는 app 의 state값을 활용하여 동기적으로 부수효과를 만들 수 있는 메커니즘이다.

> The question is not "when does this effect run" the question is "with which state does this effect synchronize with"

https://twitter.com/ryanflorence/status/1125041041063665666

```javascript
useEffect(fn) // all state
useEffect(fn, []) // no state
useEffect(fn, [these, states])
```

## `eslint-plugin-react-hooks/exhaustive-deps`로 deps를 무시하지마라

물론 기술적으로는 가능하다. 그리고 때로는 사용하는게 좋은 이유가 될 수 있다. 그러나 대부분의 경우에 이를 사용하는 것은 나쁜 생각이며, 잠재적인 버그를 만들 수 있다. 이런 이야기를 했을 때, 많은 사람들이 '컴포넌트를 mount 했을 때만 실행 하고 싶을 때가 있다' 라고 말할 수 있다. 그러나 이는 라이프사이클의 접근법이며, 옳지 못하다. `useEffect`에 deps가 있을 경우, effect 백은 deps에 변화가 있을 때 항상 실행된다. 그 외에는, app의 state 변화로 부터 부수효과와 분리되어 sync가 맞지 않게 된다. (app의 state값과 부수효과가 별개로 돌아가게 된다.)

요약하자면, 이는 버그로 이어질 수 있으므로 해당 룰을 off해서는 안된다.

> app의 state와 상관없이 mount시에 실행되어야만 하는 코드가 얼마나 많겠느냐? 하는 의미로 받아드리면 될 것 같다.

## 하나의 큰 `useEffect`를 만들지 마라.

각각의 `useEffect`는 관심사를 따로 분리해 두어야 한다. 하나의 큰 `useEffect`보다는, 각각의 로직을 분리해두는 것이 훨씬 좋다.

## 불필요한 외부 함수를 만들지 마라.

아래와 같은 코드는, `useEffect`에 두가지 deps를 추가해야 된다.

```javascript
// before. Don't do this!
function DogInfo({ dogId }) {
 const [dog, setDog] = React.useState(null)
 const controllerRef = React.useRef(null)
 const fetchDog = React.useCallback((dogId) => {
 controllerRef.current?.abort()
 controllerRef.current = new AbortController()
 return getDog(dogId, { signal: controller.signal }).then(
 (d) => setDog(d),
 (error) => {
 // handle the error
 },
 )
 }, [])
 React.useEffect(() => {
 fetchDog(dogId)
 return () => controller.current?.abort()
 }, [dogId, fetchDog])
 return <div>{/* render dog's info */}</div>
}
```

위의 코드를 다음과 같이 바꿨다.

```javascript
function DogInfo({ dogId }) {
 const [dog, setDog] = React.useState(null)
 React.useEffect(() => {
 const controller = new AbortController()
 getDog(dogId, { signal: controller.signal }).then(
 (d) => setDog(d),
 (error) => {
 // handle the error
 },
 )
 return () => controller.abort()
 }, [dogId])
 return <div>{/* render dog's info */}</div>
}
```

`useEffect` 밖에서 정의되어 있던 `fetchDog` 함수를 `useEffect` 내부로 가지고 왔다. 이전에는 이것이 외부에 정의되어 있었기 때문에, deps 배열에 추가해야 했다. 또한 이 때문에 무한 루프에 빠지는 것을 방지하기 위하여 memoize를 해야 했다. 또한, controller를 위해 `ref`도 사용했다.

반드시 effect내에서 사용할 함수는 외부가 아닌 내부에서 정의 해야 한다.

useEffect는 라이프 사이클 메소드가 아니다.

면접에서 들었던 거지같은 질문에 대한 해답

detached window로 인한 자바스크립트 메모리 누수

## 1. 검색

먼저 다음 사전에서 검색을 해보자.

https://dic.daum.net/search.do?q=take

주소는 굉장히 명확하다. `q={word}` 형식으로 내가 원하는 단어를 검색할 수 있다.

![crawling1](./images/daum-dict-crawling1.png)

다음 사전에서는 가장 검색어와 일치하는 단어, 그리고 최적의 결과를 맨 위에 보여준다. 따라서 가장 최상단에 있는 결과를 가져오면 될 것이다.

## 2. HTML 구조 살펴보기

```html
<div class="card_word" data-tiara-layer="word eng">
 <div class="wrap_tit">
 <h4 class="tit_word">영어사전</h4>
 </div>

 <div class="search_box" data-tiara-layer="box">
 주요 검색어
 <div class="cleanword_type kuek_type">
 <div class="search_cleanword">
 
 <a
 href="/word/view.do?wordid=ekw000165573"
 class="txt_cleansch"
 data-tiara-action-name="표제어 클릭"
 >take</a
 >
 

 <a
 href="#none"
 name="goDaumLogin"
 data-dic="en"
 data-wordid="ekw000165573"
 data-wordbooktype="endic"
 class="btn_wordbook btn_save"
 >단어장 저장</a
 >
 <a
 href="#none"
 name="addedToWordbook"
 data-wordid="ekw000165573"
 data-wordbookid=""
 data-wordbooktype="endic"
 class="btn_wordbook btn_save_on"
 style="display:none"
 >완료</a
 >
 </div>
 <ul class="list_search">
 <li>
 1.(<daum:word id="kew000044406">시간</daum:word>)<daum:word
 id="kew000057612"
 >이</daum:word
 >
 <daum:word id="kew000003279">걸리다</daum:word>
 </li>
 <li>
 2.<daum:word id="kew000000776">가지다</daum:word>
 </li>
 <li>
 3.<daum:word id="kew000029093">받다</daum:word>
 </li>
 <li>
 4.<daum:word id="kew000069541">찍다</daum:word>
 </li>
 <li>
 5.<daum:word id="kew000018535">데려가다</daum:word>
 </li>
 </ul>
 <div class="wrap_listen">
 
 미국 [teik]
 <a
 href="http://t1.daumcdn.net/language/4F711B870374920252"
 data-audio=""
 data-url="http://t1.daumcdn.net/language/4F711B870374920252"
 data-count="2"
 data-toggle-class="btn_voice_on"
 class="btn_voice btn_listen"
 >
 듣기
 </a>
 
 
 영국 [teik]
 <a
 href="http://t1.daumcdn.net/language/4F7141E60648140282"
 data-audio=""
 data-url="http://t1.daumcdn.net/language/4F7141E60648140282"
 data-count="2"
 data-toggle-class="btn_voice_on"
 class="btn_voice btn_listen"
 >
 듣기
 </a>
 
 </div>
 </div>
 </div>

 <div name="searchWords" class="search_box" data-initamount="3">
 <div name="searchItem" class="search_type kuek_type">
 <div class="search_word">
 
 <a
 href="/word/view.do?wordid=ekw000165614&amp;supid=eku001479556"
 class="txt_searchword"
 data-tiara-action-name="표제어 클릭"
 >taken</a
 >
 
 </div>
 <ul class="list_search">
 <li>
 <daum:word id="ekw000165573">take</daum:word
 ><daum:word id="kew000057346">의</daum:word>
 <daum:word id="kew000006957">과거</daum:word>
 <daum:word id="kew000034167">분사형</daum:word>
 </li>
 </ul>
 <div class="wrap_listen">
 
 미국
 [téik<daum:pron>ə</daum:pron>n]
 <a
 href="http://t1.daumcdn.net/language/4F711B880479C501F3"
 data-audio=""
 data-url="http://t1.daumcdn.net/language/4F711B880479C501F3"
 data-count="2"
 data-toggle-class="btn_voice_on"
 class="btn_voice btn_listen"
 >
 듣기
 </a>
 
 
 영국
 [téik<daum:pron>ə</daum:pron>n]
 <a
 href="http://t1.daumcdn.net/language/4F7141E70515EB0038"
 data-audio=""
 data-url="http://t1.daumcdn.net/language/4F7141E70515EB0038"
 data-count="2"
 data-toggle-class="btn_voice_on"
 class="btn_voice btn_listen"
 >
 듣기
 </a>
 
 </div>
 </div>
 <div name="searchItem" class="search_type kuek_type">
 <div class="search_word">
 
 <a
 href="/word/view.do?wordid=ekw000165591&amp;supid=eku010011868"
 class="txt_searchword"
 data-tiara-action-name="표제어 클릭"
 >take off</a
 >
 
 </div>
 <ul class="list_search">
 <li>
 1. (<daum:word id="kew000034917">비</daum:word
 ><daum:word id="kew000003671">격식</daum:word>)
 <daum:word id="kew000011090">급히</daum:word>
 <daum:word id="kew000021323">떠나다</daum:word>
 </li>
 <li>
 2. <daum:word id="kew000093332">이륙하다</daum:word>
 </li>
 <li>
 3. <daum:word id="kew000001818">갑자기</daum:word>
 <daum:word id="kkw000275349">팔려</daum:word
 ><daum:word id="kew000012825">나가다</daum:word>
 </li>
 <li>
 4. <daum:word id="kew000031414">벗다</daum:word>(↔<daum:word
 id="ekw000134200"
 >put</daum:word
 >
 <daum:word id="ekw000117498">on</daum:word>)
 </li>
 <li>
 5. …<daum:word id="kew000057049">을</daum:word> (<daum:word
 id="kew000042862"
 >수술</daum:word
 ><daum:word id="kew000021977">로</daum:word>)
 <daum:word id="kew000093979">절단하다</daum:word>
 </li>
 </ul>
 <div class="wrap_listen"></div>
 </div>
 <div name="searchItem" class="search_type kuek_type">
 <div class="search_word">
 
 <a
 href="/word/view.do?wordid=ekw000170800&amp;supid=eku001525840"
 class="txt_searchword"
 data-tiara-action-name="표제어 클릭"
 >took</a
 >
 
 </div>
 <ul class="list_search">
 <li>
 <daum:word id="ekw000165573">take</daum:word
 ><daum:word id="kew000057346">의</daum:word>
 <daum:word id="kkw000022005">과거형</daum:word>
 </li>
 </ul>
 <div class="wrap_listen">
 
 미국 [tuk]
 <a
 href="http://t1.daumcdn.net/language/4F711C810256680213"
 data-audio=""
 data-url="http://t1.daumcdn.net/language/4F711C810256680213"
 data-count="2"
 data-toggle-class="btn_voice_on"
 class="btn_voice btn_listen"
 >
 듣기
 </a>
 
 
 영국 [tuk]
 <a
 href="http://t1.daumcdn.net/language/4F7142E302241302BD"
 data-audio=""
 data-url="http://t1.daumcdn.net/language/4F7142E302241302BD"
 data-count="2"
 data-toggle-class="btn_voice_on"
 class="btn_voice btn_listen"
 >
 듣기
 </a>
 
 </div>
 </div>
 </div>
 <div class="search_link">
 <a
 href="/search.do?q=take&amp;dic=eng&amp;search_first=Y"
 class="link_dicmore"
 >영어사전 더보기</a>
 </div>
</div>
```

여기에서 내가 필요한 영역은 `.class=search_box`다.

```html
<div class="search_box" data-tiara-layer="box">
 주요 검색어
 <div class="cleanword_type kuek_type">
 <div class="search_cleanword">
 
 <a
 href="/word/view.do?wordid=ekw000165573"
 class="txt_cleansch"
 data-tiara-action-name="표제어 클릭"
 >take</a
 >
 

 <a
 href="#none"
 name="goDaumLogin"
 data-dic="en"
 data-wordid="ekw000165573"
 data-wordbooktype="endic"
 class="btn_wordbook btn_save"
 >단어장 저장</a
 >
 <a
 href="#none"
 name="addedToWordbook"
 data-wordid="ekw000165573"
 data-wordbookid=""
 data-wordbooktype="endic"
 class="btn_wordbook btn_save_on"
 style="display:none"
 >완료</a
 >
 </div>
 <ul class="list_search">
 <li>
 1.(<daum:word id="kew000044406">시간</daum:word>)<daum:word
 id="kew000057612"
 >이</daum:word
 >
 <daum:word id="kew000003279">걸리다</daum:word>
 </li>
 <li>
 2.<daum:word id="kew000000776">가지다</daum:word>
 </li>
 <li>
 3.<daum:word id="kew000029093">받다</daum:word>
 </li>
 <li>
 4.<daum:word id="kew000069541">찍다</daum:word>
 </li>
 <li>
 5.<daum:word id="kew000018535">데려가다</daum:word>
 </li>
 </ul>
 <div class="wrap_listen">
 
 미국 [teik]
 <a
 href="http://t1.daumcdn.net/language/4F711B870374920252"
 data-audio=""
 data-url="http://t1.daumcdn.net/language/4F711B870374920252"
 data-count="2"
 data-toggle-class="btn_voice_on"
 class="btn_voice btn_listen"
 >
 듣기
 </a>
 
 
 영국 [teik]
 <a
 href="http://t1.daumcdn.net/language/4F7141E60648140282"
 data-audio=""
 data-url="http://t1.daumcdn.net/language/4F7141E60648140282"
 data-count="2"
 data-toggle-class="btn_voice_on"
 class="btn_voice btn_listen"
 >
 듣기
 </a>
 
 </div>
 </div>
</div>
```

그리고 더 깊게 내려가서, 여기에서 결과 값은 `ul` 태그에 `li` 안에 있다.

```html
<ul class="list_search">
 <li>
 1.(<daum:word id="kew000044406">시간</daum:word>)<daum:word
 id="kew000057612"
 >이</daum:word
 >
 <daum:word id="kew000003279">걸리다</daum:word>
 </li>
 <li>
 2.<daum:word id="kew000000776">가지다</daum:word>
 </li>
 <li>
 3.<daum:word id="kew000029093">받다</daum:word>
 </li>
 <li>
 4.<daum:word id="kew000069541">찍다</daum:word>
 </li>
 <li>
 5.<daum:word id="kew000018535">데려가다</daum:word>
 </li>
</ul>
```

`<li>` 내부에 있는 것들이 하나 하나 단어 뜻을 의미하고 있음을 알 수 있다.

## 3. 파싱하기

어차피 크롬에서 쓸 거라 별도의 `fetch` 라이브러리는 설치하지 않았다.

```javascript
fetch(`https://dic.daum.net/search.do?q=${word}`).then((response) => {
 if (response.status === 200) {
 // text로 읽어온다
 response.text().then((text) => {
 const parser = new DOMParser()
 // DOMParser로 변환
 const daumDocument = parser.parseFromString(text, 'text/html')
 // searchbox 읽어오기
 const searchResults = daumDocument.querySelector('.search_box')

 // searchResults가 있다면 검색 결과가 있다는 뜻
 if (searchResults) {
 // li 태그를 일괄로 읽어온다.
 const searchLi = searchResults.getElementsByTagName('li')

 // getElementsByTagName 인 Iterable 하지 않아서
 // spread operator로 iterable하게 만들어준다.
 const results = [...searchLi].map((li) =>
 // numbering을 제외한 순수 검색 결과는 text_Search 안에 있다.
 [...li.getElementsByClassName('txt_search')]
 // <daum:word /> 류의 모든 태그를 제거
 .map((txt) => txt.innerHTML.replace(/(<([^>]+)>)/gi, ''))
 .join(''),
 )

 return results
 }
 })
 }
})
```

## 4. 결과

`window`로 검색했을 경우

> ["창문", "창", "윈도", "창구"]

[실제 검색 결과](https://dic.daum.net/search.do?q=window)

![crawling2](./images/daum-dict-crawling2.png)

사실 이거 블로그 유입 늘리려고 하는 거임

자바스크립트로 다음 사전 크롤링해보기

## Table of Contents

## 서두

```javascript
const o = { foo: 1 }
o.hasOwnProperty('foo') // true
o.hasOwnProperty('bar') // false
```

자바스크립트에 대한 모든 지식이 다 없다는 가정하에, `o`에는 분명 `hasOwnProperty`라는 속성이 없다는 것을 알 수 있다. 이를 찾기 위해서는 프로토타입 체인을 타고 올라가야 한다. `o`의 프로토타입은 `Object.prototype`이다.

`Object.prototype.hasOwnProperty`가 어떻게 작동되는지 알기 위해서, 이제 문서의 내용을 보자.

https://tc39.es/ecma262/#sec-object.prototype.hasownproperty

> When the hasOwnProperty method is called with argument V, the following steps are taken:
>
> 1. Let P be ? ToPropertyKey(V).
> 2. Let O be ? ToObject(this value).
> 3. Return ? HasOwnProperty(O, P).
>
> NOTE
> The ordering of steps 1 and 2 is chosen to ensure that any exception that would have been thrown by step 1 in previous editions of this specification will continue to be thrown even if the this value is undefined or null.

그리고 `hasOwnProperty(O, P)`를 따라가면

> The abstract operation HasOwnProperty takes arguments O (an Object) and P (a property key) and returns a completion record which, if its [[Type]] is normal, has a [[Value]] which is a Boolean. It is used to determine whether an object has an own property with the specified property key. It performs the following steps when called:

> 1. Assert: Type(O) is Object.
> 2. Assert: IsPropertyKey(P) is true.
> 3. Let desc be ? O.[[GetOwnProperty]](P).
> 4. If desc is undefined, return false.
> 5. Return true.

여기서 이제 몇가지 질문들이 생긴다.

- `abstract operation`?
- `[[]]` 안에 있는 것은 무엇일까?
- 함수 앞에 `?`는 무엇일까?
- `asserts`는 무슨 뜻일까?

## 언어 타입과 명세 타입

이 문서에는 `undefined` `true` `false`와 같이 이미 익숙한 개념들이 존재한다. 이들은 [언어 값](https://tc39.es/ecma262/#sec-ecmascript-language-types)이라고하며, 언어 타입의 값을 의미하며 이들은 명세에도 나타나 있다.

이러한 언어의 값에는 내부적으로, `true`와 `false` 같은 값이 존재한다. 반대로, 자바스크립트 엔진이 일반적으로 이해하지 못하는 값이 존재할 수 있다. 예를 들어, 자바스크립트 엔진이 C++로 작성되어 있다고 생각해본다면, C++의 `true` `false` 또한 존재할 것이다. (그리고 이들은 정확히 자바스크립트 값과 매칭되지 않는다.)

이러한 언어타입에 추가로, 명세타입이란 것이 존재한다. 이러한 명세타입은 자바스크립트 언어에는 없지만, 문서(명세)에는 존재하는 타입을 의미한다. 자바스크립트 엔진이 이러한 것들을 구현할 필요가 없다. 본 아티클에서는, 이러한 명세 타입중의 하나로 `Record`에 대해 알아볼 것이다.

## Abstract Operation

[Abstract Operation](https://tc39.es/ecma262/#sec-abstract-operations)이란 ECMA 스펙에서 정의한 함수다. 이들은 명세를 간결하게 작성할 목적으로 정의된다. 자바스크립트 엔진은 엔진 내부에 이들을 별도의 기능으로 구현할 필요가 없다. 이것들은 자바스크립트에서 직접 호출될 수 없다.

## 인터널 슬롯과 인터널 메소드

[인터널 슬롯과 인터널 메소드](https://tc39.es/ecma262/#sec-object-internal-methods-and-internal-slots)는 `[[]]`안에 있는 이름을 의미한다.

- 인터널 슬롯은 자바스크립트 객체의 데이터 멤버이거나 특정 타입을 의미한다. 이들은 객체의 상태를 저장하는데 사용된다.
- 인터널 메소드는 자바스크립트 객체의 멤버 함수다.

얘를 들어, 모든 자바스크립트 객체는 인터널 슬롯 `[[Prototype]]`을, 그리고 인터널 메소드인 `[[GetOwnProperty]]`를 가지고 있다.

인터널 슬롯과 인터널 메소드는 모두 자바스크립트에서 접근 가능한 것이 아니다. 예를 들어서 `o.[[prototype]]`이나 `o.[[GetOwnProperty]]()` 등을 할수가 없다. 자바스크립트 엔진은 자체적으로 내부 사용을 위해서 구현할 수는 있지만, 그럴 필요는 없다.

때때로, 인터널 메소드는 비슷한 이름을 가진 abstract operation에 작업을 위임하기도한다. 그 예가 바로 `[[GetOwnProperty]]`다.

> `[[GetOwnProperty]](P)`

> When the [[GetOwnProperty]] internal method of O is called with property key P, the following steps are taken:

> 1. Return ! OrdinaryGetOwnProperty(O, P).

`OrdinaryGetOwnProperty`는 어떤 객체와도 관련된 것이 아니기 때문에 인터널 메소드가 아니다. 대신, 객채는 여기에 파라미터로 넘어가서 작동을 하게 된다.

`OrdinaryGetOwnProperty`는 일반적인 객체에서 작동되기 때문에 `ordinary`라고 불리운다. ECMAScript 객체는 `ordinary`하거나 `exotic`할 수 있다. `Ordinary` 객체는 필수 인터널 메소드라고 하는 일련의 메소드들의 기본 동작을 갖추고 있어야 한다. 만약에 이러한 기본동작이 없다면, `Exotic`한 것이다.

가장 잘 알려진 `exotic` 객체가 바로 `Array`이다. array는 `length`라는 속성을 가지고 있는데, 이는 일반적인 방식으로 작동하지 않는다. `length`에 값을 부여하여 `array`의 객체를 삭제할 수가 있기 때문이다.

[필수 인터널 메소드의 목록은 다음과 같다.](https://tc39.es/ecma262/#table-5)

## Completion Records

`!`와 `?`를 사용하는 이유를 알기 위해서는, [Completion Records](https://tc39.es/ecma262/#sec-completion-record-specification-type)에 대해서 이해 해야 된다.

Completion Record는 명세 타입이다. (명세의 목적으로만 쓰인다) 자바스크립트 엔진은 이를 실행하는 인터널 데이터 타입을 가질 필요가 없다.

`Completion Record`는 정해진 필드 목록을 가진 `record`이다. 여기서 정해진 필드란 아래 세개를 의미한다.

| 이름         | 설명                                                                                             |
| ------------ | ------------------------------------------------------------------------------------------------ |
| `[[Type]]`   | `normal` `break` `continue` `return` `throw` 중 하나. `normal` 외 모든 것들은 비정상적인 종료다. |
| `[[Value]]`  | 종료로 인해 만들어진 값. 함수의 return 을 통해 나온 값이나, exception을 의미한다.                |
| `[[Target]]` | Used for directed control transfers                                                              |

모든 abstract operation은 암묵적으로 `Completion Record`를 리턴한다. 단순히 Boolean을 리턴하는 abstract operation이라고 할지라도, 암묵적으로 `Completion Record`의 `normal` 타입으로 래핑되어 있다.

만약 exception이 발생하면, `[[Type]]`이 `throw`로, `[[Value]]`로는 exception 객체가 있는 Completion Record가 리턴되었다는 것을 의미한다.

[ReturnIfAbrupt(argument)](https://tc39.es/ecma262/#sec-returnifabrupt) 란 다음 을 의미한다.

1. `argument`가 예외라면, `argment`를 리턴한다.
2. `argument`를 `argument`로 설정한다. `[[Value]]`

즉, 비정상적으로 종료되었을 경우, 즉시 리턴을 하게 된다. 그렇지 않고 정상적인 케이스의 경우에는, `Completion Record`에서 값을 추출한다.

`ReturnIfAbrupt`가 함수 호출과 비슷해보이지만, 사실은 그렇지 않다. `ReturnIfAbrupt`는 다음과 같이 사용될 수 있다.

> 1. obj가 Foo() 라고 가정하자. (obj는 `Completion Record`다.)
> 2. ReturnIfAbrupt(obj)
> 3. Bar(obj) 만약 여기까지 도달했다면, obj는 Completion Record에서 추출된 값이다.

자 이제, `?`로 돌아오자. `? Foo()`는 사실 `ReturnIfAbrupt((Foo()))` 와 동일하다. 이 말인 즉슨 매번 오류 처리 코드를 명시적으로 작성할 필요가 없다. 를 의미한다.

`Let Val be ! Foo()`은 다음을 의미한다.

1. val 은 Foo() 이다.
2. val은 비정상 종료가 아니라고 가정한다.
3. val을 `val.[[Value]]` 로 설정한다.

그래서, 결과적으로 `Object.prototype.hasOwnProperty`의 명세는 아래와 같이 해석 가능하다.

### `Object.prototype.hasOwnProperty` 명세

1. Let P be ? ToPropertyKey(V).
2. Let O be ? ToObject(this value).
3. Return ? HasOwnProperty(O, P).

### `Object.prototype.hasOwnProperty` 해석

1. P는 `ToPropertyKey(V)`다.
2. P가 비정상 종료를 한다면, 그대로 P를 리턴한다.
3. P를 `P.[[Value]]` 로 설정한다.
4. O는 `ToObject(this value)` 다.
5. O가 비정상 종료를 한다면, 그대로 O를 리턴한다.
6. O를 `O.[[Value]]`로 설정한다.
7. temp는 `HasOwnProperty(O, P)`다.
8. temp가 비정상 종료를 한다면, temp를 리턴한다.
9. temp를 `temp.[[Value]]`로 설정한다.
10. NormalCompletion(temp)를 리턴한다.

그리고 `hasOwnProperty`는 아래와 같다.

### `hasOwnProperty` 명세

1. Assert: Type(O) is Object.
2. Assert: IsPropertyKey(P) is true.
3. Let desc be ? O.[[GetOwnProperty]](P).
4. If desc is undefined, return false.
5. Return true.

### `hasOwnProperty` 해석

1. 가정: `Type(O)`는 객체다.
2. 가정: `IsPropertyKey(P)`는 참이다.
3. `desc`는 `O.[[GetOwnProperty]](P)`이다.
4. `desc`가 비정상적으로 끝나면, `desc`를 리턴한다.
5. `desc`를 `desc.[[Value]]`로 설정한다.
6. `desc`가 `undefined`면, `NormalCompletion(false)`를 리턴한다.
7. `NormalCompletion(true)`를 리턴한다.

인터널 메소드 `[[GetOwnProperty]]`를 `!` 없이 표현하면 아래와 같다.

`O.[[GetOwnProperty]]`

1. `temp`는 `OrdinaryGetOwnProperty(O, P)`다.
2. `temp`는 비정상 종료되지 않는다고 가정한다.
3. `temp`는 `temp.[[Value]]`다.
4. `NormalCompletion(temp)`를 리턴한다.

여기에서는 `temp`라고 하는 완전히 새로운 변수를 만들어서 다른 것과 충돌 되지 않도록 하였다.

또한 `return`문이 Completion Record 가 아닌 다른 것을 리턴할때, 암묵적으로 이것이 `NormalCompletion` 으로 감싸져서 리턴된다는 사실을 이용했다.

그렇다면 `Return ? Foo()`는 무엇일까?

1. `temp` 는 `Foo()`다.
2. `temp`가 비정상적으로 종료되면, temp를 리턴한다.
3. `temp`를 `temp.[[Value]]`로 설정한다.
4. `NormalCompletion(temp)`를 리턴한다.

결국 이는 `Return Foo()`와 같으며, 비정상/정상 케이스에서 모두 동일하게 작동한다.

`Return ? Foo()` 는 단순히 `Foo`가 Completion Record를 반환한다는 것을 보다 명확하게 표현하기 위한 장치일 뿐이다.

## Asserts

명세 내의 `Asserts`는 (이 문서에서는 가정이라고 번역) 알고리즘의 불변의 조건을 강조하는 것이다. 이는 오로지 명확성을 위해 추가한 것으로, 구현을 위해서 무언가 추가를 해야하는 것은 아니다. 구현상에서는 이를 확인할 필요가 없다.

## 다음으로

`abstract operation`은 밑에 그림에서 보다시피, 다른 `abstract operation` 위임하는 경우가 있다. 그러나 이 글을 바탕으로 이들이 무엇을 하는지 알아낼 수 있어야 한다. 우리는 또한 또다른 명세 유형인, `Property Descriptors`에 대해 알아볼 것이다.


가끔 문서를 볼 때 마다 도망쳤던 그 곳

yceffort

javascript

Node.js는 어떻게 동작하는가

useEffect는 라이프 사이클 메소드가 아니다.

detached window로 인한 자바스크립트 메모리 누수

자바스크립트로 다음 사전 크롤링해보기

ECMAScript 명세 읽어보기 (1)