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`을 활용한다면 구형 브라우저에서도 지금 바로 사용할 수 있는 코드다. 

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

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

## 요약

| method 	| Visible 	| Accessible 	|
|------------------------------	|-----------	|------------	|
| `.sr-only` 	| X 	| O 	|
| `aria-hidden="true"` 	| O 	| X 	|
| `hidden=""` 	| X 	| X 	|
| `display: none` 	| X 	| X 	|
| `visibility: hidden` 	| X (Space) 	| X 	|
| `opacity: 0` 	| X (Space) 	| Depends? 	|
| `clip-path: circle(0)` 	| X (Space) 	| Depends? 	|
| `transform: scale(0)` 	| X (Space) 	| O 	|
| `width: 0`+`height: 0` 	| X 	| X 	|
| `content-visibility: hidden` 	| X 	| X 	|

## `.sr-only`

`.sr-only`는 페이지에서는 가리지만, 스크린 리더에서는 접근 가능하도록 하는 일종의 CSS 선언이다. [bootstrap에 이와 관련된 코드가 있다](https://getbootstrap.com/docs/4.0/utilities/screenreaders/)

```css
.sr-only {
 border: 0 !important;
 clip: rect(1px, 1px, 1px, 1px) !important;
 -webkit-clip-path: inset(50%) !important;
 clip-path: inset(50%) !important;
 height: 1px !important;
 overflow: hidden !important;
 padding: 0 !important;
 position: absolute !important;
 width: 1px !important;
 white-space: nowrap !important;
}
```

이 방법은 텍스트를 마스킹하는데만 사용해야 한다. 다시 말해, 숨겨진 요소안에 focus 가능한 엘리먼트가 있어서는 안된다. 그렇지 않으면, 보이지 않는 엘리먼트가 스크롤이 되는 등의 귀찮은 일이 있을 수 있다.

## `aria-hidden` 속성

[aria-hidden](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute)이 `true`로 설정되면, accessibility tree에서 해당 콘텐츠를 가리지만, 여전히 시각적으로는 볼수 있다. `aria-hidden="true"` 엘리먼트에 기본 스타일을 적용하는 브라우저는 없다.

주의 할 점은 , `aria-hidden="true"`가 focusable한 요소가 되어서는 안된다는 것이다. 스크린리더에는 보이지 않지만, focus가 되기 때문이다.

```html

<button aria-hidden="true">press me</button>
```

## `display: none`과 `hidden`속성

이 두가지 방법은 모두 렌더링트리와 접근성 트리에서 사라지게 한다. `hidden`은 별도의 CSS가 없이도 HTML을 통해서 완전히 마스킹할 수 있어서 편리한 점이 있다.

## `visibility :hidden` 

이 css 속성은 레이아웃에 영향을 미치지 않고 엘리먼트를 감춘다. 사라진 공간은 빈 공간으로 남으며, 리플로우가 일어나지 않는다. 접근성 관점에서 보았을 때는 위의 `display:none`과 동일하다.

## `opacity:0`, `clip-path: circle(0)`

이 두 속성은 엘리먼트의 요소를 안보이게 하지만, `visibility: hidden`과 마찬가지로 빈공간이 남아 있게 된다. 이 콘텐츠에 접근할 수 있는지 여부는 접근성 기술에 따라 다르다. 따라서 일관되게 숨시려면 이것을 사용하지 않는 것이 좋다.

## `transform: scale(0)`

시각적으로 엘리먼트를 감추지만, 위 두속성과 마찬가지로 빈공간이 남는다. 그러나 스크린 리더에서는 이 요소에 접근할 수가 있다.

## `width: 0`, `height: 0`

특정 요소의 너비와 높이를 0으로 설정하여 숨기는 방식으로, 스크린리더 또한 이 엘리먼트가 접근 가능하지 않은 것으로 간주하고 건너뛴다. 그러나 이 기술은 일종의 낚시(?ㅋㅋ)같은 수상한 기술이고, SEO 차원에서도 좋지 못하다.

## `content-visibility: hidden`

[이 속성](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility)은 크롬브라우저에서 특정 요소의 렌더링을 뷰포트내에 있기전까지는 가리는 방법으로 도입되었다. 이 속성은 `display: none`과 마찬가지로 접근성 트리에서 사라진다. 접근성차원에서 봤을 때는 그다지 좋은 기술은 아니므로 쓰지 않는 것이 좋다. 

- https://web.dev/content-visibility/
- https://wit.nts-corp.com/2020/09/11/6223

## 요약

일반적으로 말하자면, 시각적인 내용과 접근성으로 노출되는 내용간에 너무 많은 불일치가 존재해서는 안된다. 둘 모두에게 잘 동기화된 내용을 보여주어야 한다.

- 만약 화면과 접근성 모두에서 가리고 싶다면, `display:none` `hidden`을 사용하는 것이 좋다. (위젯을 토글하거나, 다이얼러그를 닫는 등)
- 접근성에서는 감추지만 시각적으로 보이고 싶을 경우에는, `aria-hidden="true"`를 사용하자. (아이콘과 같은 경우)
- 화면에서는 가리지만 접근성에서는 보이고 싶을 경우, `.sr-only`를 쓰자. (링크나 아이콘 버튼과 같이 접근성요소로 정보를 제공하고 싶은 경우)

원래 알던건 두 세가지밖에 안됨

yceffort

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

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

자바스크립트의 프록시

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

HTML과 CSS를 활용해서 콘텐츠를 숨기는 10가지 방법