자바스크립트 정규식으로 숫자를 찾는 방법은 보통 아래와 같다.

```javascript
const str = 'hello world, 123'
const digitRegex = /\d+/g

digitRegex.test(str) //true
```

그런데 코딩을 하던 중 한가지 이상한 일이 발생했는데, 대략 아래와 같은 모습이었다.

```javascript
const digitRegex = /\d+/g

const result1 = digitRegex.test('hello 123')
const result2 = digitRegex.test('123')
const result3 = digitRegex.test('123')

console.log(result1) // true
console.log(result2) // false ???????????
console.log(result3) // true
```

> 정규 표현식에 전역 플래그를 설정한 경우, test() 메서드는 정규 표현식의 lastIndex (en-US)를 업데이트합니다. (RegExp.prototype.exec()도 lastIndex 속성을 업데이트합니다.)
>
> test(str)을 또 호출하면 str 검색을 lastIndex부터 계속 진행합니다. lastIndex 속성은 매 번 test()가 true를 반환할 때마다 증가하게 됩니다.
>
> 참고: test()가 true를 반환하기만 하면 lastIndex는 초기화되지 않습니다. 심지어 이전과 다른 문자열을 매개변수로 제공해도 그렇습니다!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

조금더 자세히 살펴보자면, 대략 다음과 같다는 뜻이다.

```javascript
const digitRegex = /\d+/g

console.log(digitRegex.lastIndex) // 0
const result1 = digitRegex.test('hello 123')

// test로 digitRegex의 index (9) 를 찾았으므로 업데이트 함
console.log(digitRegex.lastIndex) // 9
// 9 부터 다시 찾음. 그런데 못찾았으므로 초기화가 진행됨.
const result2 = digitRegex.test('123')

console.log(digitRegex.lastIndex) // 0
// 0 부터 다시 찾아서 숫자를 찾음.
const result3 = digitRegex.test('123')
```

정확히 왜 이렇게 구현했는지에 대해서는 찾을 수 없었다. 추측건데 정규식에 전역플래그가 있다는 것은 검색하려는 대상 str도 전역으로 쓰이는 용도일 것이고, 그 때문에 검색하는 str이 아예 다른 것이 온다는 가정을 하지 않았기 때문이 아닐까? (뭐래는거야?)

어쨌든 간에, 이를 올바르게 동작하게 만들기 위해서는 `search`를 쓰면 된다. 주의할 점은 `.search`는 string에 있는 메소드라는 것.

```javascript
const digitRegex = /\d+/g

const result1 = 'hello 123'.search(digitRegex) > -1
const result2 = '123'.search(digitRegex) > -1
const result3 = '123'.search(digitRegex) > -1
const result4 = '바보'.search(digitRegex) > -1

console.log(result1) // true
console.log(result2) // true
console.log(result3) // true
console.log(result4) // false
```


정규식을 자유자재로 써야 간지인데

알쏭 달쏭한 자바스크립트 정규식

자바스크립트 정규식으로 숫자를 찾는 방법은 보통 아래와 같다.
<pre class="language-javascript"><code class="language-javascript">const str = 'hello world, 123'
const digitRegex = /\d+/g

digitRegex.test(str) //true
</code></pre>
그런데 코딩을 하던 중 한가지 이상한 일이 발생했는데, 대략 아래와 같은 모습이었다.
<pre class="language-javascript"><code class="language-javascript">const digitRegex = /\d+/g

const result1 = digitRegex.test('hello 123')
const result2 = digitRegex.test('123')
const result3 = digitRegex.test('123')

console.log(result1) // true
console.log(result2) // false ???????????
console.log(result3) // true
</code></pre>
<blockquote>
정규 표현식에 전역 플래그를 설정한 경우, test() 메서드는 정규 표현식의 lastIndex (en-US)를 업데이트합니다. (RegExp.prototype.exec()도 lastIndex 속성을 업데이트합니다.)
test(str)을 또 호출하면 str 검색을 lastIndex부터 계속 진행합니다. lastIndex 속성은 매 번 test()가 true를 반환할 때마다 증가하게 됩니다.
참고: test()가 true를 반환하기만 하면 lastIndex는 초기화되지 않습니다. 심지어 이전과 다른 문자열을 매개변수로 제공해도 그렇습니다!
</blockquote>
<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test</a>
조금더 자세히 살펴보자면, 대략 다음과 같다는 뜻이다.
<pre class="language-javascript"><code class="language-javascript">const digitRegex = /\d+/g

console.log(digitRegex.lastIndex) // 0
const result1 = digitRegex.test('hello 123')

// test로 digitRegex의 index (9) 를 찾았으므로 업데이트 함
console.log(digitRegex.lastIndex) // 9
// 9 부터 다시 찾음. 그런데 못찾았으므로 초기화가 진행됨.
const result2 = digitRegex.test('123')

console.log(digitRegex.lastIndex) // 0
// 0 부터 다시 찾아서 숫자를 찾음.
const result3 = digitRegex.test('123')
</code></pre>
정확히 왜 이렇게 구현했는지에 대해서는 찾을 수 없었다. 추측건데 정규식에 전역플래그가 있다는 것은 검색하려는 대상 str도 전역으로 쓰이는 용도일 것이고, 그 때문에 검색하는 str이 아예 다른 것이 온다는 가정을 하지 않았기 때문이 아닐까? (뭐래는거야?)
어쨌든 간에, 이를 올바르게 동작하게 만들기 위해서는 <code>search</code>를 쓰면 된다. 주의할 점은 <code>.search</code>는 string에 있는 메소드라는 것.
<pre class="language-javascript"><code class="language-javascript">const digitRegex = /\d+/g

const result1 = 'hello 123'.search(digitRegex) > -1
const result2 = '123'.search(digitRegex) > -1
const result3 = '123'.search(digitRegex) > -1
const result4 = '바보'.search(digitRegex) > -1

console.log(result1) // true
console.log(result2) // true
console.log(result3) // true
console.log(result4) // false
</code></pre>

next + react 로 서버사이드 렌더링 환경을 구축하면서 개발을 하고 있었는데 두 가지 문제에 부딪혔었다.

## 1. `window is not defined`, SSR 환경에서의 컴포넌트

먼저 원래 코드를 보자.

```javascript
import Calendar from '@toast-ui/react-calendar'

export default function Index() {
 return (
 <Calendar
 view="month"
 month={{
 narrowWeekend: true,
 }}
 onBeforeCreateSchedule={(e) => {
 setOpenCreatePopup(true)
 setSelectedDate(e.start.toDate())
 }}
 onClickSchedule={(e) => {
 console.log(e)
 }}
 scheduleView
 calendars={calendars}
 schedules={schedules}
 />
 )
}
```

```bash
Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.<anonymous>
file:///.../node_modules/tui-calendar/dist/tui-calendar.js (16:4)
```

```javascript
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("tui-code-snippet"), require("tui-date-picker"));
	else if(typeof define === 'function' && define.amd)
		define(["tui-code-snippet", "tui-date-picker"], factory);
	else if(typeof exports === 'object')
		exports["Calendar"] = factory(require("tui-code-snippet"), require("tui-date-picker"));
	else
		root["tui"] = root["tui"] || {}, root["tui"]["Calendar"] = factory((root["tui"] && root["tui"]["util"]), (root["tui"] && root["tui"]["DatePicker"]));
})(window, function(__WEBPACK_EXTERNAL_MODULE_tui_code_snippet__, __WEBPACK_EXTERNAL_MODULE_tui_date_picker__) // 여기에서 에러가 난다.
```

해당 컴포넌트는 최초 시작시에 `window` 가 필요한데, 서버사이드 렌더링 시에는 `window`가 없는 환경이기 때문에 에러가 난다.

아래 코드를 넣고, 최초 페이지 접근시에 새로고침을 하면 이 모듈이 실행되는 환경이 node 임을 알 수 있다. 

```javascript
console.log('node >> ', globalThis === global) // true
```

결론적으로 이 컴포넌트는 서버사이드 렌더링을 지원하지 않고 있으며, 이를 해결하기 위해서는 `window`가 있는 브라우저 환경에서만 import 해서 사용해야 한다. 이를 nextjs에서 처리하기 위해서는 아래와 같이 하면 된다.

```javascript
// dynamic 만으로는 부족하다. 꼭 ssr을 꺼야 한다.
import dynamic from 'next/dynamic'
const Calendar = dynamic(() => import('@toast-ui/react-calendar'), {
 ssr: false,
})
```

## 2. Next SSR 환경에서의 ref

```javascript
export default function Index() {
 const cal = useRef()

 useEffect(() => {
 console.log(cal.current) 
 }, [cal])

 return <Calendar ref={cal} />
}
```

위의 log 는 아래와 같이 찍힌다.

```bash
{retry: ƒ}
retry: ƒ ()arguments: (...)caller: (...)length: 0name: "bound retry"__proto__: ƒ ()[[TargetFunction]]: ƒ retry()[[BoundThis]]: LoadableSubscription[[BoundArgs]]: Array(0)__proto__: Object
```

> `useEffect`는 SSR에서 절대로 실행되지 않는다. 이를 해결하기 위해 [useServerEffect](https://www.npmjs.com/package/use-server-effect)라고 불리우는(?) 해괴한 effect가 있지만 , 굳이 그럴필요 없이 next의 `getServerSideProps`를 사용하면 된다.

왜 `useRef`는 정상적으로 동작하지 않는 것일까?

> `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
> 
> ...
> 
> This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.

https://reactjs.org/docs/hooks-reference.html#useref

`useRef`는 순수한 자바스크립트 객체이며, 컴포넌트가 아무리 렌더링이 된다고 해도 같은 `ref`객체를 반환한다. 그런데 현재 `ref.current`에는 `retry`만 존재한다. 이것은 무엇일까?

https://github.com/vercel/next.js/blob/f06c58911515d980e25c33874c5f18ade5ac99df/packages/next/next-server/lib/loadable.js#L219-L260

https://github.com/vercel/next.js/blob/f06c58911515d980e25c33874c5f18ade5ac99df/packages/next/next-server/lib/loadable.js#L161-L173

위 두 코드에 정답이 나와있다. `useImperativeHandle`를 통해서 `ref`를 노출하고 있기 때문에, current에는 현재 세팅되어 있는 `retry`만 보이고 있었던 것이다. `useImperativeHandle`는 [`forwardRef`](https://ko.reactjs.org/docs/react-api.html#reactforwardref)와 사용해야 한다.

> `useImperativeHandle` customizes the instance value that is exposed to parent components when using `ref`. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with `forwardRef`:

https://.reactjs.org/docs/react-api.html#reactforwardref

`forwardRef`는 전달 받은 `ref`속성을 하부트리의 다른 컴포넌트로 전달 할 수 있는 리액트 컴포넌트를 생성한다. 

```javascript
// #components/TuiCalendarWrapper
import React from "react";
import Calendar from "@toast-ui/react-calendar";

export default (props) => (
 // 3. 넘겨받은 `forwardedRef`를 진짜 컴포넌트에 넘긴다.
 <Calendar {...props} ref={props.forwardedRef} />
);
```

```javascript
const TuiCalendar = dynamic(() => import('#components/TuiCalendarWrapper'), { ssr: false });
// 2. forwardRef를 통해서 전달받은 ref를 하위 컴포넌트에 보낸다.
const CalendarWithForwardedRef = React.forwardRef((props, ref) => (
 <TuiCalendar {...props} forwardedRef={ref} />
));

export default function Index() {
 const ref = useRef()
 // 1. ref를 넘겨준다.
 return <CalendarWithForwardedRef ref={ref} />
}
```

Ref를 포워딩 하는 방법은 여기에 더 자세히 나와있다.

https://reactjs.org/docs/forwarding-refs.html

리액트 서버사이드 렌더링과 컴포넌트

어디 공부할 만 한 좋은 포스팅이 없나 찾던 중, 애플의 단축어 명령으로 내 폰에 있는 건강정보를 업로드 할 수 있다는 포스팅을 보았다. https://blog.maximeheckel.com/posts/build-personal-health-api-shortcuts-serverless 그래서 이걸 나도 해보면 어떨까 싶어서, 최근에 빠져있는 걷기+달리기에 관련되니 정보를 업로드 해보는 작업을 해보았다.

## 1. 단축어 설정

일단 아이폰에 있는 단축어 앱을 사용해서 내 건강정보를 업로드 할 수 있는 환경을 만들어야 한다.

![shortcut1](./images/shortcut1.jpeg)
![shortcut2](./images/shortcut2.jpeg)
![shortcut3](./images/shortcut3.jpeg)
![shortcut4](./images/shortcut4.jpeg)

> 추가: 자동화와 연결해서 자기전에 자동으로 업로드 하도록 했다. 그러나 아이폰이 잠겨있을 경우에는 업로드가 되지 않으므로, 아이폰 잠금을 해제해 둬야 한다. 🤪


당연히, 헤더 정보에 secret 키 등으로 접근을 하지 못하게 막아둬야 한다. (누가 여기에 업로드 할 일이 있을지는 모르겠지만,,)

## 2. Google Cloud Function 작업

```javascript
exports.health = functions.https.onRequest(async (req, res) => {
  // {'health': {'run': '28.88118937860876', 'timestamps': '2021-03-17T08:45:00+09:00', 'unit': 'km'}}
  const {
    health: { run, timestamps },
  } = req.body

  const { secret } = req.headers

  if (secret !== APPLE_HEALTH_SECRET) {
    return res.send('permission denied! 🤬')
  }

  const healthRef = db.collection('apple_health')

  const date = new Date(timestamps)
  const timeZoneFromDB = +9.0
  const tzDifference = timeZoneFromDB * 60 + date.getTimezoneOffset()
  const offsetDate = new Date(date.getTime() + tzDifference * 60 * 1000)

  const key = `${offsetDate.getFullYear()}${(offsetDate.getMonth() + 1)
    .toString()
    .padStart(2, 0)}${offsetDate.getDate()}`

  const data = (await healthRef.doc('daily').get()).data()

  healthRef.doc('daily').set({
    ...data,
    [key]: run,
  })

  // 응답을 단순 text로 쏘면 아이폰에서 알림을 내보낼 수 있다.
  res.send('성공')
})
```

## 3. 결과

![result](./images/shortcut-result.gif)

![result](./images/shortcut-result.png)

지금은 단축어 앱을 클릭해야만 업로드 되는 구조지만, 이 작업을 그대로 단축어 > 자동화에 옮기면 자동으로 처리할 수 있다. 애플 워치에서 운동이 끝난 뒤라든가, 수면 준비 시작 시간이 되면 업로드 한다든가,,

처음에 단축어 앱이 생겼을 때, 그냥 단순히 QR 체크인 꺼내는 용도로만 썼었는데 이렇게 강력한 기능이 있는지 몰랐다. 이렇게 반성하면서 🤪 이걸로 해볼만한 더 재밌는일이 있을지 고민해봐야겠다. 심박수나 달리기 정보를 strava처럼 그래프로 보여주는 것들을 하면 재밌을 것 같다.

간만에 했본 간단하고 재밌는 일

애플 단축어와 GCP로 내 건강정보 업로드하기

어디 공부할 만 한 좋은 포스팅이 없나 찾던 중, 애플의 단축어 명령으로 내 폰에 있는 건강정보를 업로드 할 수 있다는 포스팅을 보았다. <a href="https://blog.maximeheckel.com/posts/build-personal-health-api-shortcuts-serverless">https://blog.maximeheckel.com/posts/build-personal-health-api-shortcuts-serverless</a> 그래서 이걸 나도 해보면 어떨까 싶어서, 최근에 빠져있는 걷기+달리기에 관련되니 정보를 업로드 해보는 작업을 해보았다.
<h2 id="1-단축어-설정">1. 단축어 설정</h2>
일단 아이폰에 있는 단축어 앱을 사용해서 내 건강정보를 업로드 할 수 있는 환경을 만들어야 한다.
<img src="./images/shortcut1.jpeg" alt="shortcut1">
<img src="./images/shortcut2.jpeg" alt="shortcut2">
<img src="./images/shortcut3.jpeg" alt="shortcut3">
<img src="./images/shortcut4.jpeg" alt="shortcut4">
<blockquote>
추가: 자동화와 연결해서 자기전에 자동으로 업로드 하도록 했다. 그러나 아이폰이 잠겨있을 경우에는 업로드가 되지 않으므로, 아이폰 잠금을 해제해 둬야 한다. 🤪
</blockquote>
당연히, 헤더 정보에 secret 키 등으로 접근을 하지 못하게 막아둬야 한다. (누가 여기에 업로드 할 일이 있을지는 모르겠지만,,)
<h2 id="2-google-cloud-function-작업">2. Google Cloud Function 작업</h2>
<pre class="language-javascript"><code class="language-javascript">exports.health = functions.https.onRequest(async (req, res) => {
 // {'health': {'run': '28.88118937860876', 'timestamps': '2021-03-17T08:45:00+09:00', 'unit': 'km'}}
 const {
 health: { run, timestamps },
 } = req.body

 const { secret } = req.headers

 if (secret !== APPLE_HEALTH_SECRET) {
 return res.send('permission denied! 🤬')
 }

 const healthRef = db.collection('apple_health')

 const date = new Date(timestamps)
 const timeZoneFromDB = +9.0
 const tzDifference = timeZoneFromDB * 60 + date.getTimezoneOffset()
 const offsetDate = new Date(date.getTime() + tzDifference * 60 * 1000)

 const key = `${offsetDate.getFullYear()}${(offsetDate.getMonth() + 1)
 .toString()
 .padStart(2, 0)}${offsetDate.getDate()}`

 const data = (await healthRef.doc('daily').get()).data()

 healthRef.doc('daily').set({
 ...data,
 [key]: run,
 })

 // 응답을 단순 text로 쏘면 아이폰에서 알림을 내보낼 수 있다.
 res.send('성공')
})
</code></pre>
<h2 id="3-결과">3. 결과</h2>
<img src="./images/shortcut-result.gif" alt="result">
<img src="./images/shortcut-result.png" alt="result">
지금은 단축어 앱을 클릭해야만 업로드 되는 구조지만, 이 작업을 그대로 단축어 > 자동화에 옮기면 자동으로 처리할 수 있다. 애플 워치에서 운동이 끝난 뒤라든가, 수면 준비 시작 시간이 되면 업로드 한다든가,,
처음에 단축어 앱이 생겼을 때, 그냥 단순히 QR 체크인 꺼내는 용도로만 썼었는데 이렇게 강력한 기능이 있는지 몰랐다. 이렇게 반성하면서 🤪 이걸로 해볼만한 더 재밌는일이 있을지 고민해봐야겠다. 심박수나 달리기 정보를 strava처럼 그래프로 보여주는 것들을 하면 재밌을 것 같다.

ES6에서 새롭게 나온 Proxy는 요즘 많은 프레임워크에서 (요즘이라기엔 많이 지났지만,) 주목하고 있는 기능인 것 같다. 

[mobx에서도 proxy를 쓰고 있고](https://mobx.js.org/configuration.html) [2010 JSconf 에서도 관련 영상이 존재하고](https://www.youtube.com/watch?v=sClk6aB_CPk&ab_channel=JSConf) (무려 11년전,,) [vue.js](https://v3.vuejs.org/guide/reactivity.html#what-is-reactivity)에서도 reactivity 지원을 위해 Proxy를 사용하고 있다. 

## Proxy

[Proxy 객체는 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 새로운 행동을 정의할 때 사용합니다.](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 라고 되어 있다. 즉, 특정 객체의 읽기 쓰기 등 객체에 가해지는 작업을 중간에 가로채서 새로운 작업을 할 수 있는 것을 말한다. 프록시를 이해 하기 위해서는 아래의 용어에 대해 이해하고 있어야 한다.

- `target`: 기본 동작을 가로챌, 즉 감싸게 될 객체로 함수를 포함해서 모든 객체가 가능하다.
- `handler`: 동작을 가로채는 메서드인 `trap`을 가지고 있는 객체로, 여기에서 프록시를 설정한다.

먼저 트랩이 존재하지 않는 (= 동작을 가로채는 메서드가 없는) 예제를 살펴보자.

```javascript
const target = {}
const proxy = new Proxy(target, {}) // 핸들러가 없다

proxy.test = 5 // 프록시에 값을 썼는데

console.log(target.test) // 5 타겟에도 프로퍼티가 추가됐다.
console.log(proxy.test)  // 5 프록시를 통해서도 읽을 수 있다.

console.log(proxy) // Proxy {test: 5}
console.log(target) // {test: 5}
```

마치 프록시가 타겟을 감싸는 래퍼처럼 작동한다.

이제 본격적으로 트랩을 추가하기 전에, 프록시가 가로챌 수 있는 작업에는 무엇이 있는지 알아보자.

- `get`
- `set`
- `has`
- `deleteProperty`
- `apply`
- `constructor`
- `getPrototypeOf`
- `setPrototypeOf`
- `isExtensible`
- `preventExtensions`
- `getOwnPropertyDescriptor`
- `ownKeys`

이 중에서, 가장 기본적인 예제인 `get` 트랩을 만들어보자.

```javascript
const arr = new Proxy([0, 1, 2, 3], {
  get(target, prop) {
    if (prop in target) {
      return target[prop]
    } else {
      console.log(`${prop}은 존재하지 않습니다`)
      return 0
    }
  }
})

console.log(arr[0]) // 1
console.log(arr[1]) // 2
console.log(arr[100])  // 0 
// 100은 존재하지 않습니다 proxyConsoleLog.js:12 
```

프록시에서 정의한 trap이 get을 가로채서 작동하고 있음을 알 수 있다. 

이번엔 `set`트랩을 만들어보자. 다른언어의 그것 처럼, 숫자만 추가할 수 있는 배열을 만들어보자.

```javascript
const arr = new Proxy([], {
  set(target, prop, value) {    
    if (typeof value === 'number') {
      target[prop] = value
      return true
    } else {
      return false
    }
  }
})

arr.push(1)
arr.push(2)
arr.push(3)
arr.push('졸려') // VM503:1 Uncaught TypeError: 'set' on proxy: trap returned falsish for property '3'    

console.log([...arr]) // 1, 2, 3
```

성공적으로 push를 막은 것을 볼 수 있다.

## Reflect

[`Reflect`는 중간에서 가로챌 수 있는 작업에 대한 메소드를 제공한다.](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Reflect) `Reflect`는 생성자 함수가 아니므로, 인스턴스를 만들거나 `new`로 호출할 없다. 

요약해서 말하자면, `Proxy` 생성을 단순화 한 빌트인 객체라고 보면 된다. 

```javascript
const user = new Proxy({name: "John"}, {
  get(target, prop, receiver) {    
    return target[prop]
  },
  set(target, prop, val, receiver) {    
    target[prop] = value
    return true
  }
});
```

```javascript
const user = new Proxy({name: "John"}, {
  get(target, prop, receiver) {    
    return Reflect.get(target, prop, receiver) // target[prop] 를 대체 해주었다.
  },
  set(target, prop, val, receiver) {    
    return Reflect.set(target, prop, val, receiver) // target[prop] = value 를 대체해주고, true/false도 리턴해준다.
  }
});

console.log(user.name) // John
user.name = "Pete" // pete
```

## `Observable` 만들기

mobx의 그것인 observable을 만들어보자.

```javascript
// 모든 객체에 공통적으로 observe를 달아둘 심볼
// 심볼로 선언하여 모든 객체에서 동일한 방법으로 접근할 수 있도록 한다.
const handlers = Symbol.for('handlers')

// 객체를 넘겨 받아서 observable 하게 만든다.
function observable(target) {
  // observe가 들어가는 곳
  target[handlers] = []

  // observe에 함수가 들어오면, handlers에 넣어 둔다.
  target.observe = function (handler) {
    this[handlers].push(handler)
  }

  // 프록시를 리턴한다.
  return new Proxy(target, {
    set(target, property, value, receiver) {
      // Reflect.set으로 값을 설정한다.
      const result = Reflect.set(...arguments)
      if (result) {
        // 각 handler에 현재 set arguments를 넘겨준다.
        target[handlers].forEach(handler => handler({target, property, value, receiver}))
      }
      return result
    }
  })
}

const user = observable({})

user.observe(({property, value}) => {
  console.log(`'${property}' => '${value}'`)
})

user.name = '삼전주가떡상기원' // 'name' => '삼전주가떡상기원'
```

## Polyfill

바벨의 문서에는 다음과 같이 적혀있다.

https://babeljs.io/docs/en/learn/#ecmascript-2015-features-proxies

> Unsupported feature
> 
> Due to the limitations of ES5, Proxies cannot be transpiled or polyfilled. See support in various JavaScript engines.

[따라서 babel repl에서 시도해보아도, 별 소용이 없다..](https://babeljs.io/repl#?browsers=defaults%2C%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBAhgJwTAvDMBTA7jACgkADwE8AKAbQF0AaGAbwCgYYIMpSpEBzN2gBwJ9aANzgAbAK4YAlPWbMm8gJYAzGB2J8MINaMkZUKNAHIwEgLYAjDAmOzG8-ZwQ8o5ASD6VUMPVMWOCGwSCGAwUAj-jgC-MBhirPQB8kFQIWEq4qzJ0Yq50dIMQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env&prettier=false&targets=&version=7.13.10&externalPlugins=)

- https://kangax.github.io/compat-table/es6/#test-Proxy
- https://github.com/GoogleChrome/proxy-polyfill
- https://caniuse.com/proxy

아쉽게도, 완벽하게 polyfill이 지원이 되지 않는다. 구글 크롬팀에서 만든 폴리필도 몇가지 밖에 동작하지 않는다.

> Currently, the following traps are supported-
> 
> - get
> - set
> - apply
> - construct

따라서, ie 브라우저에서는 사용할 수 없다.

자바스크립트의 프록시

[이 전에 generator에 대해서 설명한 적이 있다.](https://yceffort.kr/2020/05/javascript-generator) 이번 포스팅에서는 제네레이터의 설명보다는, 이와 관련된 개념적인 이해와 제네레이터를 사용하기 위해 폴리필로 쓰이는 regeneratorRuntime에 대한 이야기를 해보려고한다.

## 블로킹 하지 않는 다는 것

아마도 '논 블로킹' 자바스크립트 코드를 짜는 것의 중요성을 들어 본적이 있을 것이다. Http 요청이나 데이터베이스 접근 같은 같은 I/O작업이 있을 경우, 일반적으로 콜백이나 프로미스를 사용하여 이를 처리한다. 블로킹이 일어나는 작업을 처리할 경우, 프로그램 전체가 마비되는 끔찍한 일을 마주할 수 있다. 만약 모든 사용자들이 시스템과 상호작용 하기 위해 자리가 빌 때 까지 대기해야 된다고 생각해보자. 🤬

또 하나 다른 이야기 해보자면, 자바스크립트 프로그램이 무한 루프에 들어가서 망해버리는 것이다. `node -e 'while(true){}` 를 실행해보자. 컴퓨터가 맛탱이가 가서 재시작이 필요할 것이다. (물론 어디까지나 개념적인 이야기 이다.)

이런 저런 배경지식들로 비춰봤을 때, 어떻게 es6의 제네레이터가 함수의 실행 중간에 호출을 '중지' 했다가 다시 미래에 '재개' 될 수 있냐는 물음이 생길 것이다. 또한 제네레이터 내에서 무한루프를 도는 코드도 멀쩡히 돌아가는 것을 볼 수 있다.

```javascript
const fibonacci = (function* () {
    let [prev, current] = [0, 1]

    while (true) {
        ;[prev, current] = [current, prev + current]
        yield current // 현재 값을 내보낸다.
    }
})()

const a = fibonacci.next()
console.log(a) // { value: 1, done: false }

const b = fibonacci.next()
console.log(b) // { value: 2, done: false }
```

>. 뭔가,, 이러나고 이씀,,,

얼핏 보면 무언가 자바스크립트의 새로운 버전이 나타나서 처리하는 것 같지만, 그렇지 않다. `regenerator`와 `babel`을 사용한다면, 일반 es5에서도 쉽게 이 코드를 사용할 수 있다.

```javascript
"use strict";

var fibonacci = /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
  var prev, current, _ref;

  return regeneratorRuntime.wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          prev = 0, current = 1;

        case 1:
          if (!true) {
            _context.next = 10;
            break;
          }

          ;
          _ref = [current, prev + current];
          prev = _ref[0];
          current = _ref[1];
          _context.next = 8;
          return current;

        case 8:
          _context.next = 1;
          break;

        case 10:
        case "end":
          return _context.stop();
      }
    }
  }, _callee);
})();
var a = fibonacci.next();
console.log(a); // { value: 1, done: false }

var b = fibonacci.next();
console.log(b); // { value: 2, done: false }
```

> 우리의 바벨과 regeneratorRuntime느님이 generator를 처리해주고 계시는 보습

![몬가 일어나고 잇음](https://mblogthumb-phinf.pstatic.net/MjAxOTA3MDFfMzAw/MDAxNTYxOTcxNzY2Mjg2.HubJEeou7vpe0OfwuPEbTCff66c4wvZJU0eMPpG9nqog.hagLHvBobHoeMq0JKRY0KVYVNbMjDE9-n1YyujKdw5kg.JPEG.ordo1194/1561971764732.jpg?type=w800)

일단, 제네레이터에 대한 설명은 아래에 자세히 나와있다.

- https://nodeschool.io/ko/
- https://yceffort.kr/2020/05/javascript-generator
- https://github.com/isRuslan/learn-generators

## 게으른 결과

간단한 예제로 시작해보자. 뭔가 내가 일련의 값들을 가지고 무언가를 해야 한다고 상상해보자. 이를 배열로 만들어서 사용하는 방법도 있을 것이다. 하지만 그 길이가 무한대라면? 배열로는 처리할 수 없다. 그러나 제네레이터로 가능하다.

```javascript
function* generateRandoms(max) {
  max = max || 1;

  while (true) {
    let newMax = yield Math.random() * max;
    if (newMax !== undefined) {
      max = newMax;
    }
  }
}
```

`function`뒤에 있는 `*`가 일반적인 함수와는 다른 제네레이터 함수임을 알려주고 있다. 다른 중요한 부분은 `yield`키워드다. 일반적인 함수는 `return`을 쓰지만, 제네레이터는 `yield`다. 제네레이터 함수는 결과를 `yield` 한 곳으로 넘겨준다.

우리는 이 함수가 의도하는 바가 *다음 값을 요청할 때마다, 0과 max 사이의 랜덤한 값을 리턴한다. 이를 프로그램이 끝날 때까지 반복한다* 라는 것을 알 수 있다. 여기서 프로그램이 끝날때란, 내 컴퓨터를 박살내거나 지구 종말이 오는 때를 의미한다. break나 return이 없는 `while(true)`란 그런 것이다.

이 처럼, 우리는 제네레이터를 통해서 값을 '요청' 할 때 딱 받을 수 있다. 이것은 매우 중요하다. 만약 그렇지 않으면, 무한히 증가하는 배열이 모든 메모리를 잡아먹을 수 있기 대문이다. 우리는 값을 `iterator`를 사용해서 얻을 수 있고, 이는 제네레이터 함수를 호출할 때 받을 수 있다.

```javascript
var iterator = generateRandoms();

console.log(iterator.next()); // {value: 0.8768122791044803, done: false}
console.log(iterator.next()); // {value: 0.06359353223017372, done: false}
```

제네레이터는 또한 양방향 커뮤니케이션을 지원한다. `let newMax = yield Math.random() * max;` 그리고 제네레이터는 누군가 사용하지 않는다면 중지된 상태로 남아있게 되며, 누군가 다음 값을 요청할 때 다시 활성화 된다. 만약 `iterator.next`를 호출해서 값을 넘기게 된다면, 그 값을 바탕으로 새로운 결과를 알려주게 된다.

```javascript
console.log(iterator.next(1000)); // {value: 368.0289602019955, done: false}
console.log(iterator.next(2000)); // {value: 21.21145723376827, done: false}
```

## es5의 제네레이터

제네레이터가 어떻게 동작하는지 알기 위해서는, es5로 어떻게 번역되는지를 살펴볼 필요가 있다. 이는 https://babeljs.io/repl 에서 쉽게 가능하다.

```javascript
"use strict";

var _marked = /*#__PURE__*/regeneratorRuntime.mark(generateRandoms);

function generateRandoms(max) {
  var newMax;
  return regeneratorRuntime.wrap(function generateRandoms$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          max = max || 1;

        case 1:
          if (!true) {
            _context.next = 8;
            break;
          }

          _context.next = 4;
          return Math.random() * max;

        case 4:
          newMax = _context.sent;

          if (newMax !== undefined) {
            max = newMax;
          }

          _context.next = 1;
          break;

        case 8:
        case "end":
          return _context.stop();
      }
    }
  }, _marked);
}
```

보시다시피, 제네레이터 함수는 `switch` 블록으로 다시 쓰여졌음을 알 수 있다. 그리고 이것이 제네레이터가 동작하는 것에 대한 힌트다. 제네레이터를 일종의 루프안에 있는 상태관리 머신으로 볼 수 있으며, 이는 우리가 어떻게 상호작용 하느냐에 따라 달라진다. `_context`는 현재 상태값을 가지고 있으며, 어떤 case 문이 실행되어야 하는지도 정해준다.

위 코드를 이해하는 쉬운방법은, `case`문을 라인넘버라 보고, `_context.next`를 `GOTO` 문으로 보는 것이다. 

- `case 0`: `max`를 초기화 하고 `case 1`로 간다.
- `case 1`: 랜덤 값을 `yield`하고, 다음번에 실행한다면 4번으로 간다. 
- `case 4`: iterator가 값을 보내줬는지 (`_context.sent`) 확인하고, 그렇다면 `max`를 갱신한다. 그리고 `GOTO 1`로 해서, 다음 랜덤 값을 생성한다.

이것이 `블로킹 하지 않는다` 라는 룰을 준수하면서, 제네레이터가 무한히 루프를 돌면서도 중지되고 재개될 수 있는지를 나타내는 원리다.

## `(!true)`?

한가지 이상한 코드가 있다.

```javascript
if (!true) {
  _context.next = 8;
  break;
}
```
여기선 무슨일이 일어나는 걸까? 이는 우리의 `while(true)`가 어떻게 다시 쓰이는지를 나타낸다. 상태 머신이 루프 할 때 마다 매번 끝이 났는지를 확인한다. 이 예제에서는 절대 그럴 수 없지만, 간혹 제네레이터에 종료절이 필요할 때가 있다. 그럴 때 제네레이터를 멈추는 것이 `case 8`이다. 즉, 제네레이터가 종료하는 경우가 생기게 된다면 `(!true)`대신 종료에 대한 조건이 생길 것이다.,

## 이터레이터의 로컬 상태

한 가지 더 흥미로운 것은, 제네레이터가 어떻게 각 이터레이터의 local state를 보관하고 있는 지다. `newMax`는 `regeneratorRuntime.wrap` 스코프 밖에서 클로져 형태로 존재하므로, `iterator.next()`가 호출되도 계속 값을 유지하고 있을 수 있다. `randomNumbers()` 호출로 새로운 이터레이터가 만들어지면, 또다른 클로져가 만들어진다. 이는 어떻게 각 이터레이터가 동일한 제네레이터를 사용하여 영향을 주지 않고 자신의 상태값을 가지고 있을 수 있는지 보여준다.

## 코드 내부

`switch` 코드 내부도 사실, `regeneratorRuntime.wrap`와 `regeneratorRuntime.mark`에 의해 래핑된 것을 볼 수 있다. 이 코드는 https://github.com/facebook/regenerator 에서 만들어진 모듈로, es5에서도 es6의 제네레이터 함수가 올바르게 동짝 할 수 있도록 도와주는 코드다.

`regeneratorRuntime`에는 많은 흥미로운 코드가 있지만, 먼저 우리는 `Suspended Start`에서 제네레이터의 수명이 시작되는 것을 볼 수 있다.

https://github.com/facebook/regenerator/blob/0c2aba1af78be03da05de96b6c69f231b85993dc/packages/regenerator-runtime/runtime.js#L243-L246

```javascript
function makeInvokeMethod(innerFn, self, context) {
  var state = GenStateSuspendedStart;

  return function invoke(method, arg)  {
    // ...
  }
}
```

여기에서는 단순히 함수를 만들고 리턴한다. 그 말인 즉, `var iterator = generateRandoms()`를 하더라도, `generatorRandoms` 내부에서는 사실 처음 값을 요청할 때 까지는 내부의 어떤 것도 실제로 실행되지 않는다.

제네레이터 함수의 `iterator.next()`를 호출하면, 아래의 코드가 실행된다.

```javascript
var record = tryCatch(innerFn, self, context);
```

https://github.com/facebook/regenerator/blob/0c2aba1af78be03da05de96b6c69f231b85993dc/packages/regenerator-runtime/runtime.js#L293

만약 결과가 `throw`가 아니고 일반적인 `return`이라면, 이 결과를 이터러블 하도록 `{value, done}`으로 감싼다. 그리고 종료 여부에 따라서 상태를 `GenStateCompleted` 나 `GenStateSuspendedYield`로 세팅해둔다. 우리 코드의 경우, 종료는 없으므로 `GenStateSuspendedYield` 상태가 될 것이다.

```javascript
  if (record.type === "normal") {
    // If an exception is thrown from innerFn, we leave state ===
    // GenStateExecuting and loop back for another invocation.
    state = context.done
      ? GenStateCompleted
      : GenStateSuspendedYield;

    if (record.arg === ContinueSentinel) {
      continue;
    }

    return {
      value: record.arg,
      done: context.done
    };
```

https://github.com/facebook/regenerator/blob/0c2aba1af78be03da05de96b6c69f231b85993dc/packages/regenerator-runtime/runtime.js#L294-L308


## 결론

우리는 간단히 제네레이터를 활용하여 잠재적으로 무한한 값의 시퀀스를 만드는 코드를 만들었고, 이는 게으르게 (원하는 때에) 사용될 수 있다. 이는 `regeneratorRuntime`을 활용한다면 구형 브라우저에서도 지금 바로 사용할 수 있는 코드다. 

아직도 자바스크립트 산을 기어 올라가는 중

yceffort

javascript

알쏭 달쏭한 자바스크립트 정규식

리액트 서버사이드 렌더링과 컴포넌트

애플 단축어와 GCP로 내 건강정보 업로드하기

자바스크립트의 프록시

자바스크립트의 제네레이터와 regeneratorRuntime