From 6ee91ab64cd115523bc91e8a19c0fce9bd4ae8d9 Mon Sep 17 00:00:00 2001 From: lee juyoung Date: Sat, 5 Oct 2024 16:49:00 +0900 Subject: [PATCH] Updates --- 404.html | 2 +- _next/data/-8eDYE39v-ava91BZqEI9/index.json | 1 + .../posts/Algorithm.json | 0 ...4\353\237\260 \355\230\270\354\204\235.json" | 0 ...4\355\205\234 \354\244\215\352\270\260.json" | 0 ...54\352\261\264\353\204\210\352\270\260.json" | 0 .../posts/Javascript.json | 0 .../posts/Javascript/javascriptdeepdive09.json | 0 .../posts/Javascript/javascriptdeepdive10.json | 0 .../posts/Javascript/javascriptdeepdive11.json | 0 .../posts/React.json | 2 +- ...4\235\230 \352\260\200\354\203\201 DOM.json" | 2 +- _next/data/-8eDYE39v-ava91BZqEI9/posts/all.json | 1 + .../-8eDYE39v-ava91BZqEI9/posts/search.json | 1 + .../posts/tag/Algorithm.json | 0 .../posts/tag/Dummy.json | 0 .../posts/tag/JavaScript.json | 0 .../posts/tag/Virtual DOM.json | 2 +- .../-8eDYE39v-ava91BZqEI9/posts/tag/all.json | 1 + .../posts/tag/bfs.json | 0 .../posts/tag/deepdive.json | 2 +- .../-8eDYE39v-ava91BZqEI9/posts/tag/dfs.json | 1 + .../-8eDYE39v-ava91BZqEI9/posts/tag/gold.json | 1 + .../posts/tag/lv3.json | 0 .../-8eDYE39v-ava91BZqEI9/posts/tag/react.json | 1 + .../posts/tag/\353\260\261\354\244\200.json" | 1 + ...64\353\266\204\355\203\220\354\203\211.json" | 1 + ...70\353\236\230\353\250\270\354\212\244.json" | 0 _next/data/r3TVFGStx9-VzPRjNWTfb/index.json | 1 - _next/data/r3TVFGStx9-VzPRjNWTfb/posts/all.json | 1 - .../r3TVFGStx9-VzPRjNWTfb/posts/search.json | 1 - .../r3TVFGStx9-VzPRjNWTfb/posts/tag/all.json | 1 - .../r3TVFGStx9-VzPRjNWTfb/posts/tag/dfs.json | 1 - .../r3TVFGStx9-VzPRjNWTfb/posts/tag/gold.json | 1 - .../r3TVFGStx9-VzPRjNWTfb/posts/tag/react.json | 1 - .../posts/tag/\353\260\261\354\244\200.json" | 1 - ...64\353\266\204\355\203\220\354\203\211.json" | 1 - .../-8eDYE39v-ava91BZqEI9/_buildManifest.js | 1 + .../_ssgManifest.js | 0 ...7afb82985f4a5.js => 393-039147b2430c99aa.js} | 2 +- .../pages/[...detail]-3b4126e788667b59.js | 1 - .../pages/[...detail]-801909bc4ff4e1ea.js | 1 + ...b8548b.js => [category]-1243ede844aa0e50.js} | 2 +- ...5876d34f3407927.css => cea7fc6ccc7bac98.css} | 2 +- .../r3TVFGStx9-VzPRjNWTfb/_buildManifest.js | 1 - index.html | 2 +- posts/Algorithm.html | 2 +- ...4\353\237\260 \355\230\270\354\204\235.html" | 2 +- ...4\355\205\234 \354\244\215\352\270\260.html" | 2 +- ...54\352\261\264\353\204\210\352\270\260.html" | 2 +- posts/Javascript.html | 2 +- posts/Javascript/javascriptdeepdive09.html | 2 +- posts/Javascript/javascriptdeepdive10.html | 2 +- posts/Javascript/javascriptdeepdive11.html | 2 +- posts/React.html | 2 +- ...4\235\230 \352\260\200\354\203\201 DOM.html" | 2 +- ...64\353\262\204 \355\212\270\353\246\254.png" | Bin 0 -> 67898 bytes posts/all.html | 2 +- posts/search.html | 2 +- posts/tag/Algorithm.html | 2 +- posts/tag/Dummy.html | 2 +- posts/tag/JavaScript.html | 2 +- posts/tag/Virtual DOM.html | 2 +- posts/tag/all.html | 2 +- posts/tag/bfs.html | 2 +- posts/tag/deepdive.html | 2 +- posts/tag/dfs.html | 2 +- posts/tag/gold.html | 2 +- posts/tag/lv3.html | 2 +- posts/tag/react.html | 2 +- "posts/tag/\353\260\261\354\244\200.html" | 2 +- ...64\353\266\204\355\203\220\354\203\211.html" | 2 +- ...70\353\236\230\353\250\270\354\212\244.html" | 2 +- 73 files changed, 46 insertions(+), 46 deletions(-) create mode 100644 _next/data/-8eDYE39v-ava91BZqEI9/index.json rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/Algorithm.json (100%) rename "_next/data/r3TVFGStx9-VzPRjNWTfb/posts/Algorithm/[\353\260\261\354\244\200 gold 5] \353\271\214\353\237\260 \355\230\270\354\204\235.json" => "_next/data/-8eDYE39v-ava91BZqEI9/posts/Algorithm/[\353\260\261\354\244\200 gold 5] \353\271\214\353\237\260 \355\230\270\354\204\235.json" (100%) rename "_next/data/r3TVFGStx9-VzPRjNWTfb/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\225\204\354\235\264\355\205\234 \354\244\215\352\270\260.json" => "_next/data/-8eDYE39v-ava91BZqEI9/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\225\204\354\235\264\355\205\234 \354\244\215\352\270\260.json" (100%) rename "_next/data/r3TVFGStx9-VzPRjNWTfb/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\247\225\352\262\200\353\213\244\353\246\254\352\261\264\353\204\210\352\270\260.json" => "_next/data/-8eDYE39v-ava91BZqEI9/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\247\225\352\262\200\353\213\244\353\246\254\352\261\264\353\204\210\352\270\260.json" (100%) rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/Javascript.json (100%) rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/Javascript/javascriptdeepdive09.json (100%) rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/Javascript/javascriptdeepdive10.json (100%) rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/Javascript/javascriptdeepdive11.json (100%) rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/React.json (73%) rename "_next/data/r3TVFGStx9-VzPRjNWTfb/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.json" => "_next/data/-8eDYE39v-ava91BZqEI9/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.json" (71%) create mode 100644 _next/data/-8eDYE39v-ava91BZqEI9/posts/all.json create mode 100644 _next/data/-8eDYE39v-ava91BZqEI9/posts/search.json rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/tag/Algorithm.json (100%) rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/tag/Dummy.json (100%) rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/tag/JavaScript.json (100%) rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/tag/Virtual DOM.json (73%) create mode 100644 _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/all.json rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/tag/bfs.json (100%) rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/tag/deepdive.json (73%) create mode 100644 _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/dfs.json create mode 100644 _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/gold.json rename _next/data/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/posts/tag/lv3.json (100%) create mode 100644 _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/react.json create mode 100644 "_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/\353\260\261\354\244\200.json" create mode 100644 "_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.json" rename "_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json" => "_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json" (100%) delete mode 100644 _next/data/r3TVFGStx9-VzPRjNWTfb/index.json delete mode 100644 _next/data/r3TVFGStx9-VzPRjNWTfb/posts/all.json delete mode 100644 _next/data/r3TVFGStx9-VzPRjNWTfb/posts/search.json delete mode 100644 _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/all.json delete mode 100644 _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/dfs.json delete mode 100644 _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/gold.json delete mode 100644 _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/react.json delete mode 100644 "_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/\353\260\261\354\244\200.json" delete mode 100644 "_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.json" create mode 100644 _next/static/-8eDYE39v-ava91BZqEI9/_buildManifest.js rename _next/static/{r3TVFGStx9-VzPRjNWTfb => -8eDYE39v-ava91BZqEI9}/_ssgManifest.js (100%) rename _next/static/chunks/{393-7217afb82985f4a5.js => 393-039147b2430c99aa.js} (99%) delete mode 100644 _next/static/chunks/pages/[...detail]-3b4126e788667b59.js create mode 100644 _next/static/chunks/pages/[...detail]-801909bc4ff4e1ea.js rename _next/static/chunks/pages/posts/{[category]-fa20e1e8deb8548b.js => [category]-1243ede844aa0e50.js} (97%) rename _next/static/css/{55876d34f3407927.css => cea7fc6ccc7bac98.css} (58%) delete mode 100644 _next/static/r3TVFGStx9-VzPRjNWTfb/_buildManifest.js create mode 100644 "posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM/\355\214\214\354\235\264\353\262\204 \355\212\270\353\246\254.png" diff --git a/404.html b/404.html index 9c9963e..aebb460 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -404: This page could not be found

404

This page could not be found.

\ No newline at end of file +404: This page could not be found

404

This page could not be found.

\ No newline at end of file diff --git a/_next/data/-8eDYE39v-ava91BZqEI9/index.json b/_next/data/-8eDYE39v-ava91BZqEI9/index.json new file mode 100644 index 0000000..d5edb36 --- /dev/null +++ b/_next/data/-8eDYE39v-ava91BZqEI9/index.json @@ -0,0 +1 @@ +{"pageProps":{"posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n### 파이버 트리\r\n파이버 트리는 하나는 **현재 모습을 담은** 파이버 트리, 다른 하나는 작업 중인 상태를 나타내는 **workInProgress** 트리다. 작업이 끝나면, 리액트는 **단순히 포인터만 변경**해 workInProgress 트리를 **현재 트리**로 바꿔버린다. 이러한 기술을 **더블 버퍼링**이라고 한다.\r\n\"트리를\r\n\r\n리액트에서는 미처 다 그리지 못한 모습을 노출시키지 않기 위해 (불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는데, 이러한 더블 버퍼링을 위해 트리가 두 개 존재하며, 이 더블 버퍼링은 커밋 단계에서 수행된다.\r\n\r\n- 먼저 현재 UI 렌더링을 위해 존재 하는 **current**를 기준으로 모든 작업이 시작된다.\r\n- 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터로 새로운 **workInProgress** 트리를 빌드하기 시작한다.\r\n- 빌드하는 작업이 끝나면 다음 렌더링에 이 트리를 사용한다.\r\n- 빌드된 workInProgress 트리가 UI에 최종적으로 렌더링되어 반영이 완료되면 **current가 이 workProgress로 변경된다**.\r\n\r\n### 파이버의 작업 순서\r\n일반적인 파이버 노드의 생성흐름은 다음과 같다.\r\n1. 리액트는 `beginWork()` 함수를 실행해 파이버 작업을 수행하고, 더 이상 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작된다.\r\n2. 1번의 작업이 끝나면 `completeWork( )` 함수를 실행해 파이버 작업을 완료한다.\r\n3. 형제가 있다면 형제로 넘어간다.\r\n4. 2,3번이 끝난다면 `return`으로 돌아가 자신의 작업이 완료되었음을 알린다.\r\n\r\n이러한 작업으로 트리가 생성이 되었는데, setState 등으로 업데이트가 발생하면 어떻게 될까? 이미 앞서 만든 current트리가 존재하고, setState로 업데이트 요청을 받아 workInProgress트리를 다시 빌드하기 시작한다. \r\n\r\n최초 렌더링 시에는 모든 파이버를 새로 만들어야 했지만 이제는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고, **기존 파이버에서 업데이트 된 props를 받아 파이버 내부에서 처리한다**.\r\n\r\n이처럼, 재조정 작업 때마다 새롭게 파이버 자바스크립트 객체를 만드는 것 이 아닌, 기존의 객체를 재활용하기 위해 내부 속성값만 초기화하거나 바꾸는 형태로 트리를 업데이트한다.\r\n\r\n과거에는 이 작업을 동기식으로 처리했고, 트리 업데이트 과정 및 새로운 트리를 만드는 작업은 동기식이고 중단될 수 없다. 그러나 현재는 우선순위가 높은 다른 업데이트가 오면 현재 업데이트 작업을 일시 중단하거나 새로 만들거나 폐기할 수 있으며 작업 단위를 파이버 단위로 나누어 우선순위를 할당하는 것 역시 가능하다.\r\n\r\n### 파이버와 가상 DOM\r\n리액트 컴포넌트에 대한 정보를 **1:1로 가지고 있는 것**이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 **비동기**로 이뤄진다. 이와 달리 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 이뤄져야 하기에, 메모리 상에서 이 작업을 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용하는 것이다.\r\n\r\n> 사실 가상 DOM은 오직 웹 어플리케이션에서만 통용되는 개념이고, 리액트 파이버는 리액트 네이티브와 같은 브라우저가 아닌 환경에서도 사용할 수 있기에 엄밀히 하면 파이버와 가상 DOM은 동일한 개념이 아니다. \r\n\r\n### 정리\r\n결국 가상 DOM과 리액트의 핵심은 **브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는 것**이다. \r\n\r\n화면에 표시되는 UI를 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다."},{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nrectangle\r\ncharacterX\r\ncharacterY\r\nitemX\r\nitemY\r\nresult\r\n\r\n\r\n \r\n[[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]]\r\n1\r\n3\r\n7\r\n8\r\n17\r\n\r\n\r\n[[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]]\r\n9\r\n7\r\n6\r\n1\r\n11\r\n\r\n\r\n[[1,1,5,7]]\r\n1\r\n1\r\n4\r\n7\r\n9\r\n\r\n\r\n[[2,1,7,5],[6,4,10,10]]\r\n3\r\n1\r\n7\r\n10\r\n15\r\n\r\n\r\n[[2,2,5,5],[1,3,6,4],[3,1,4,6]]\r\n1\r\n4\r\n6\r\n3\r\n10\r\n\r\n\r\n \r\n\r\n##### 입출력 예 설명\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/87694.%E2%80%85%EC%95%84%EC%9D%B4%ED%85%9C%E2%80%85%EC%A4%8D%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88-%EC%84%A4%EB%AA%85)\r\n\r\n입출력 예 #1\r\n\r\n![rect_5.png](6.png)\r\n\r\n캐릭터 위치는 (1, 3)이며, 아이템 위치는 (7, 8)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #2\r\n\r\n![rect_7.png](7.png)\r\n\r\n캐릭터 위치는 (9, 7)이며, 아이템 위치는 (6, 1)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #3\r\n\r\n[![rect_8.png](8.png)]\r\n\r\n캐릭터 위치는 (1, 1)이며, 아이템 위치는 (4, 7)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n## 구현 방법\r\n### 전체 직사각형들을 합친 것의 바깥쪽 테두리만 돌게하려면 어떻게 하는가?\r\n- rectangle을 순회하면서 범위 중 직사각형 내부는 0으로 테두리는 1로 board값을 갱신한다.\r\n- 이 때, 만일 `다른 직사각형의 내부안에 현재 직사각형의 테두리가 있지 않을 경우`에만 board를 1로 갱신한다. \r\n### 예외 사항\r\n![exception.png](exception.png)\r\n좌표가 인접한 경우 위와 같이 의도하지 않은 경우를 초래할 수도 있다.\r\n\r\n따라서 이를 해결하기 위해 모든 좌표의 값을 **2배**씩 해주어야 한다.\r\n\r\n이를 모두 반영하여 board 테이블을 만들면,\r\n\r\n```python\r\nboard = [[-1 for _ in range(102)] for _ in range(102)];\r\nfor r in rectangle:\r\n\t# map 객체를 통해 모든 좌표값에 2배\r\n\tx1,y1,x2,y2 = map(lambda x: x*2,r);\r\n for i in range(x1,x2+1):\r\n for j in range(y1,y2+1):\r\n\t # 직사각형 내부의 경우 0으로 개신\r\n if x1 **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n"}],"categorys":["Algorithm","Javascript","React"],"currentCategory":"React"},"__N_SSG":true} \ No newline at end of file +{"pageProps":{"posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n### 파이버 트리\r\n파이버 트리는 하나는 **현재 모습을 담은** 파이버 트리, 다른 하나는 작업 중인 상태를 나타내는 **workInProgress** 트리다. 작업이 끝나면, 리액트는 **단순히 포인터만 변경**해 workInProgress 트리를 **현재 트리**로 바꿔버린다. 이러한 기술을 **더블 버퍼링**이라고 한다.\r\n\"트리를\r\n\r\n리액트에서는 미처 다 그리지 못한 모습을 노출시키지 않기 위해 (불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는데, 이러한 더블 버퍼링을 위해 트리가 두 개 존재하며, 이 더블 버퍼링은 커밋 단계에서 수행된다.\r\n\r\n- 먼저 현재 UI 렌더링을 위해 존재 하는 **current**를 기준으로 모든 작업이 시작된다.\r\n- 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터로 새로운 **workInProgress** 트리를 빌드하기 시작한다.\r\n- 빌드하는 작업이 끝나면 다음 렌더링에 이 트리를 사용한다.\r\n- 빌드된 workInProgress 트리가 UI에 최종적으로 렌더링되어 반영이 완료되면 **current가 이 workProgress로 변경된다**.\r\n\r\n### 파이버의 작업 순서\r\n일반적인 파이버 노드의 생성흐름은 다음과 같다.\r\n1. 리액트는 `beginWork()` 함수를 실행해 파이버 작업을 수행하고, 더 이상 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작된다.\r\n2. 1번의 작업이 끝나면 `completeWork( )` 함수를 실행해 파이버 작업을 완료한다.\r\n3. 형제가 있다면 형제로 넘어간다.\r\n4. 2,3번이 끝난다면 `return`으로 돌아가 자신의 작업이 완료되었음을 알린다.\r\n\r\n이러한 작업으로 트리가 생성이 되었는데, setState 등으로 업데이트가 발생하면 어떻게 될까? 이미 앞서 만든 current트리가 존재하고, setState로 업데이트 요청을 받아 workInProgress트리를 다시 빌드하기 시작한다. \r\n\r\n최초 렌더링 시에는 모든 파이버를 새로 만들어야 했지만 이제는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고, **기존 파이버에서 업데이트 된 props를 받아 파이버 내부에서 처리한다**.\r\n\r\n이처럼, 재조정 작업 때마다 새롭게 파이버 자바스크립트 객체를 만드는 것 이 아닌, 기존의 객체를 재활용하기 위해 내부 속성값만 초기화하거나 바꾸는 형태로 트리를 업데이트한다.\r\n\r\n과거에는 이 작업을 동기식으로 처리했고, 트리 업데이트 과정 및 새로운 트리를 만드는 작업은 동기식이고 중단될 수 없다. 그러나 현재는 우선순위가 높은 다른 업데이트가 오면 현재 업데이트 작업을 일시 중단하거나 새로 만들거나 폐기할 수 있으며 작업 단위를 파이버 단위로 나누어 우선순위를 할당하는 것 역시 가능하다.\r\n\r\n### 파이버와 가상 DOM\r\n리액트 컴포넌트에 대한 정보를 **1:1로 가지고 있는 것**이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 **비동기**로 이뤄진다. 이와 달리 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 이뤄져야 하기에, 메모리 상에서 이 작업을 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용하는 것이다.\r\n\r\n> 사실 가상 DOM은 오직 웹 어플리케이션에서만 통용되는 개념이고, 리액트 파이버는 리액트 네이티브와 같은 브라우저가 아닌 환경에서도 사용할 수 있기에 엄밀히 하면 파이버와 가상 DOM은 동일한 개념이 아니다. \r\n\r\n### 정리\r\n결국 가상 DOM과 리액트의 핵심은 **브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는 것**이다. \r\n\r\n화면에 표시되는 UI를 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다."}],"categorys":["Algorithm","Javascript","React"],"currentCategory":"React"},"__N_SSG":true} \ No newline at end of file diff --git "a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.json" "b/_next/data/-8eDYE39v-ava91BZqEI9/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.json" similarity index 71% rename from "_next/data/r3TVFGStx9-VzPRjNWTfb/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.json" rename to "_next/data/-8eDYE39v-ava91BZqEI9/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.json" index 45c2077..8c651f2 100644 --- "a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.json" +++ "b/_next/data/-8eDYE39v-ava91BZqEI9/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.json" @@ -1 +1 @@ -{"pageProps":{"post":{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n","readingMinutes":15},"category":"React","prevData":{"title":"[백준 gold 5] 빌런 호석","slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다."},"nextData":{"title":"자바스크립트 딥다이브: 09.타입 변환과 단축평가","slug":"posts/Javascript/javascriptdeepdive09","summary":"자바스크립트 딥다이브 책 내용 중 '타입 변환과 단축평가'의 정리 내용입니다."}},"__N_SSG":true} \ No newline at end of file +{"pageProps":{"post":{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n### 파이버 트리\r\n파이버 트리는 하나는 **현재 모습을 담은** 파이버 트리, 다른 하나는 작업 중인 상태를 나타내는 **workInProgress** 트리다. 작업이 끝나면, 리액트는 **단순히 포인터만 변경**해 workInProgress 트리를 **현재 트리**로 바꿔버린다. 이러한 기술을 **더블 버퍼링**이라고 한다.\r\n\"트리를\r\n\r\n리액트에서는 미처 다 그리지 못한 모습을 노출시키지 않기 위해 (불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는데, 이러한 더블 버퍼링을 위해 트리가 두 개 존재하며, 이 더블 버퍼링은 커밋 단계에서 수행된다.\r\n\r\n- 먼저 현재 UI 렌더링을 위해 존재 하는 **current**를 기준으로 모든 작업이 시작된다.\r\n- 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터로 새로운 **workInProgress** 트리를 빌드하기 시작한다.\r\n- 빌드하는 작업이 끝나면 다음 렌더링에 이 트리를 사용한다.\r\n- 빌드된 workInProgress 트리가 UI에 최종적으로 렌더링되어 반영이 완료되면 **current가 이 workProgress로 변경된다**.\r\n\r\n### 파이버의 작업 순서\r\n일반적인 파이버 노드의 생성흐름은 다음과 같다.\r\n1. 리액트는 `beginWork()` 함수를 실행해 파이버 작업을 수행하고, 더 이상 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작된다.\r\n2. 1번의 작업이 끝나면 `completeWork( )` 함수를 실행해 파이버 작업을 완료한다.\r\n3. 형제가 있다면 형제로 넘어간다.\r\n4. 2,3번이 끝난다면 `return`으로 돌아가 자신의 작업이 완료되었음을 알린다.\r\n\r\n이러한 작업으로 트리가 생성이 되었는데, setState 등으로 업데이트가 발생하면 어떻게 될까? 이미 앞서 만든 current트리가 존재하고, setState로 업데이트 요청을 받아 workInProgress트리를 다시 빌드하기 시작한다. \r\n\r\n최초 렌더링 시에는 모든 파이버를 새로 만들어야 했지만 이제는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고, **기존 파이버에서 업데이트 된 props를 받아 파이버 내부에서 처리한다**.\r\n\r\n이처럼, 재조정 작업 때마다 새롭게 파이버 자바스크립트 객체를 만드는 것 이 아닌, 기존의 객체를 재활용하기 위해 내부 속성값만 초기화하거나 바꾸는 형태로 트리를 업데이트한다.\r\n\r\n과거에는 이 작업을 동기식으로 처리했고, 트리 업데이트 과정 및 새로운 트리를 만드는 작업은 동기식이고 중단될 수 없다. 그러나 현재는 우선순위가 높은 다른 업데이트가 오면 현재 업데이트 작업을 일시 중단하거나 새로 만들거나 폐기할 수 있으며 작업 단위를 파이버 단위로 나누어 우선순위를 할당하는 것 역시 가능하다.\r\n\r\n### 파이버와 가상 DOM\r\n리액트 컴포넌트에 대한 정보를 **1:1로 가지고 있는 것**이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 **비동기**로 이뤄진다. 이와 달리 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 이뤄져야 하기에, 메모리 상에서 이 작업을 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용하는 것이다.\r\n\r\n> 사실 가상 DOM은 오직 웹 어플리케이션에서만 통용되는 개념이고, 리액트 파이버는 리액트 네이티브와 같은 브라우저가 아닌 환경에서도 사용할 수 있기에 엄밀히 하면 파이버와 가상 DOM은 동일한 개념이 아니다. \r\n\r\n### 정리\r\n결국 가상 DOM과 리액트의 핵심은 **브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는 것**이다. \r\n\r\n화면에 표시되는 UI를 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다.","readingMinutes":21},"category":"React","prevData":{"title":"[백준 gold 5] 빌런 호석","slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다."},"nextData":{"title":"자바스크립트 딥다이브: 09.타입 변환과 단축평가","slug":"posts/Javascript/javascriptdeepdive09","summary":"자바스크립트 딥다이브 책 내용 중 '타입 변환과 단축평가'의 정리 내용입니다."}},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/-8eDYE39v-ava91BZqEI9/posts/all.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/all.json new file mode 100644 index 0000000..1d7d167 --- /dev/null +++ b/_next/data/-8eDYE39v-ava91BZqEI9/posts/all.json @@ -0,0 +1 @@ +{"pageProps":{"posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n### 파이버 트리\r\n파이버 트리는 하나는 **현재 모습을 담은** 파이버 트리, 다른 하나는 작업 중인 상태를 나타내는 **workInProgress** 트리다. 작업이 끝나면, 리액트는 **단순히 포인터만 변경**해 workInProgress 트리를 **현재 트리**로 바꿔버린다. 이러한 기술을 **더블 버퍼링**이라고 한다.\r\n\"트리를\r\n\r\n리액트에서는 미처 다 그리지 못한 모습을 노출시키지 않기 위해 (불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는데, 이러한 더블 버퍼링을 위해 트리가 두 개 존재하며, 이 더블 버퍼링은 커밋 단계에서 수행된다.\r\n\r\n- 먼저 현재 UI 렌더링을 위해 존재 하는 **current**를 기준으로 모든 작업이 시작된다.\r\n- 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터로 새로운 **workInProgress** 트리를 빌드하기 시작한다.\r\n- 빌드하는 작업이 끝나면 다음 렌더링에 이 트리를 사용한다.\r\n- 빌드된 workInProgress 트리가 UI에 최종적으로 렌더링되어 반영이 완료되면 **current가 이 workProgress로 변경된다**.\r\n\r\n### 파이버의 작업 순서\r\n일반적인 파이버 노드의 생성흐름은 다음과 같다.\r\n1. 리액트는 `beginWork()` 함수를 실행해 파이버 작업을 수행하고, 더 이상 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작된다.\r\n2. 1번의 작업이 끝나면 `completeWork( )` 함수를 실행해 파이버 작업을 완료한다.\r\n3. 형제가 있다면 형제로 넘어간다.\r\n4. 2,3번이 끝난다면 `return`으로 돌아가 자신의 작업이 완료되었음을 알린다.\r\n\r\n이러한 작업으로 트리가 생성이 되었는데, setState 등으로 업데이트가 발생하면 어떻게 될까? 이미 앞서 만든 current트리가 존재하고, setState로 업데이트 요청을 받아 workInProgress트리를 다시 빌드하기 시작한다. \r\n\r\n최초 렌더링 시에는 모든 파이버를 새로 만들어야 했지만 이제는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고, **기존 파이버에서 업데이트 된 props를 받아 파이버 내부에서 처리한다**.\r\n\r\n이처럼, 재조정 작업 때마다 새롭게 파이버 자바스크립트 객체를 만드는 것 이 아닌, 기존의 객체를 재활용하기 위해 내부 속성값만 초기화하거나 바꾸는 형태로 트리를 업데이트한다.\r\n\r\n과거에는 이 작업을 동기식으로 처리했고, 트리 업데이트 과정 및 새로운 트리를 만드는 작업은 동기식이고 중단될 수 없다. 그러나 현재는 우선순위가 높은 다른 업데이트가 오면 현재 업데이트 작업을 일시 중단하거나 새로 만들거나 폐기할 수 있으며 작업 단위를 파이버 단위로 나누어 우선순위를 할당하는 것 역시 가능하다.\r\n\r\n### 파이버와 가상 DOM\r\n리액트 컴포넌트에 대한 정보를 **1:1로 가지고 있는 것**이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 **비동기**로 이뤄진다. 이와 달리 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 이뤄져야 하기에, 메모리 상에서 이 작업을 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용하는 것이다.\r\n\r\n> 사실 가상 DOM은 오직 웹 어플리케이션에서만 통용되는 개념이고, 리액트 파이버는 리액트 네이티브와 같은 브라우저가 아닌 환경에서도 사용할 수 있기에 엄밀히 하면 파이버와 가상 DOM은 동일한 개념이 아니다. \r\n\r\n### 정리\r\n결국 가상 DOM과 리액트의 핵심은 **브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는 것**이다. \r\n\r\n화면에 표시되는 UI를 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다."},{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nrectangle\r\ncharacterX\r\ncharacterY\r\nitemX\r\nitemY\r\nresult\r\n\r\n\r\n \r\n[[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]]\r\n1\r\n3\r\n7\r\n8\r\n17\r\n\r\n\r\n[[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]]\r\n9\r\n7\r\n6\r\n1\r\n11\r\n\r\n\r\n[[1,1,5,7]]\r\n1\r\n1\r\n4\r\n7\r\n9\r\n\r\n\r\n[[2,1,7,5],[6,4,10,10]]\r\n3\r\n1\r\n7\r\n10\r\n15\r\n\r\n\r\n[[2,2,5,5],[1,3,6,4],[3,1,4,6]]\r\n1\r\n4\r\n6\r\n3\r\n10\r\n\r\n\r\n \r\n\r\n##### 입출력 예 설명\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/87694.%E2%80%85%EC%95%84%EC%9D%B4%ED%85%9C%E2%80%85%EC%A4%8D%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88-%EC%84%A4%EB%AA%85)\r\n\r\n입출력 예 #1\r\n\r\n![rect_5.png](6.png)\r\n\r\n캐릭터 위치는 (1, 3)이며, 아이템 위치는 (7, 8)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #2\r\n\r\n![rect_7.png](7.png)\r\n\r\n캐릭터 위치는 (9, 7)이며, 아이템 위치는 (6, 1)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #3\r\n\r\n[![rect_8.png](8.png)]\r\n\r\n캐릭터 위치는 (1, 1)이며, 아이템 위치는 (4, 7)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n## 구현 방법\r\n### 전체 직사각형들을 합친 것의 바깥쪽 테두리만 돌게하려면 어떻게 하는가?\r\n- rectangle을 순회하면서 범위 중 직사각형 내부는 0으로 테두리는 1로 board값을 갱신한다.\r\n- 이 때, 만일 `다른 직사각형의 내부안에 현재 직사각형의 테두리가 있지 않을 경우`에만 board를 1로 갱신한다. \r\n### 예외 사항\r\n![exception.png](exception.png)\r\n좌표가 인접한 경우 위와 같이 의도하지 않은 경우를 초래할 수도 있다.\r\n\r\n따라서 이를 해결하기 위해 모든 좌표의 값을 **2배**씩 해주어야 한다.\r\n\r\n이를 모두 반영하여 board 테이블을 만들면,\r\n\r\n```python\r\nboard = [[-1 for _ in range(102)] for _ in range(102)];\r\nfor r in rectangle:\r\n\t# map 객체를 통해 모든 좌표값에 2배\r\n\tx1,y1,x2,y2 = map(lambda x: x*2,r);\r\n for i in range(x1,x2+1):\r\n for j in range(y1,y2+1):\r\n\t # 직사각형 내부의 경우 0으로 개신\r\n if x1\r\n \r\nstones\r\nk\r\nresult\r\n\r\n\r\n \r\n[2, 4, 5, 3, 2, 1, 4, 2, 5, 1]\r\n3\r\n3\r\n\r\n\r\n \r\n\r\n##### **입출력 예에 대한 설명**\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/64062.%E2%80%85%EC%A7%95%EA%B2%80%EB%8B%A4%EB%A6%AC%E2%80%85%EA%B1%B4%EB%84%88%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88%EC%97%90-%EB%8C%80%ED%95%9C-%EC%84%A4%EB%AA%85)\r\n\r\n----------\r\n\r\n**입출력 예 #1**\r\n\r\n첫 번째 친구는 다음과 같이 징검다리를 건널 수 있습니다. \r\n![1.png](1.png)\r\n\r\n첫 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n두 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![2.png](2.png)\r\n\r\n두 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n세 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![3.png](3.png)\r\n\r\n세 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n네 번째 친구가 징검다리를 건너려면, 세 번째 디딤돌에서 일곱 번째 디딤돌로 네 칸을 건너뛰어야 합니다. 하지만 k = 3 이므로 건너뛸 수 없습니다. \r\n![4.png](4.png)\r\n\r\n따라서 최대 3명이 디딤돌을 모두 건널 수 있습니다.\r\n\r\n## 접근 방법\r\n브루트 포스로 1명씩 건너기에는, stones 배열의 크기가 최대 200,000이고, stones 배열의 각 원소들의 값 역시 최대 200,000,000이기 때문에, 시간 초과가 날 확률이 높다고 생각했고(사실 그렇게 쉬우면 lv3 일리가 없지), 아니나 다를까 시간초과가 났다. \r\n\r\n고민하다가 도저히 해결책이 안나와서 찾아보니 `이분탐색`을 사용하여 풀 수 있었다.\r\n\r\n- 건널 수 있는 인원의 최소는 1명, 최대는 max(stones)명이다. 모든 돌들의 합이 같거나, 다르다 하더라도 건널수 없는 곳이 k이하면 건널 수 있기 때문이다. \r\n- 따라서 start = 1 end = max(stones)로 이분탐색을 시작할 수 있다.\r\n\r\nmid 값만큼의 사람이 건널 수 있는지 확인하기 위한 check함수는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n\t # 밟을 수 없으므로 건너뛰어야하는 횟수를 늘린다.\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n # 밟을 수 있으므로 최대 건너뛰는 횟수를 초기화시킨다.\r\n else:\r\n cnt = 0;\r\n # 건너뛰는 횟수가 k보다 크거나 같으면 안되므로 False 리턴 \r\n if cnt>=k:\r\n return False;\r\n return True;\r\n```\r\n건널 수 있다면 mid보다 큰 범위에서 값을 찾아야하므로 start를 mid+1로 갱신하고, 반대라면, mid보다 작은 범위에서 값을 찾아야하므로 end를 mid-1로 갱신한다.\r\n \r\ncheck 시간 복잡도는 O(N)이고 이분탐색을 했을 때 O(logN)의 시간복잡도가 나오므로, 총 O(NlogN)의 시간 복잡도가 나오므로, 시간초과가 나지 않는다.\r\n\r\n전체 코드는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n else:\r\n cnt = 0;\r\n if cnt>=k:\r\n return False;\r\n return True;\r\n\r\ndef solution(stones, k):\r\n start,end = 1,max(stones);\r\n answer = 0;\r\n while start<=end:\r\n mid = (start + end) // 2;\r\n if check(stones, mid,k):\r\n start = mid+1;\r\n else:\r\n answer = mid;\r\n end = mid-1; \r\n return answer;\r\n```\r\n\r\n## 느낀 점\r\n이분탐색 문제를 많이는 아니더라도 어느정도는 풀어봤다고 생각했는데, 이 문제에서 이분탐색으로 푸는 아이디어를 떠올리지 못해서 아쉽다. \r\n\r\n또한 처음에 위에 코드의 6번째줄에서 else문을 쓰지않고, 이러한 코드로 제출하여서 시간초과가 났다.\r\n```python\r\nif (stone - mid) <= 0:\r\n\tcnt += 1;\r\nif (stone - mid)>0:\r\n\tcnt = 0;\r\n```\r\nㅎㅎ.. 사실 위와 같은 경우에서 if else문을 쓰는 것이 기본인데, 그래도 시간초과가 날 수 있는 직접적인 원인까지는 되지 않을 거라고 안일하게 생각해서 코드를 짠 게 화근이었다. 기본을 지키자!"},{"slug":"posts/Javascript/javascriptdeepdive10","title":"객체 리터럴","date":"2024-04-29T15:33:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '객체 리터럴'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n\r\n# 객체 리터럴\r\n\r\n## 객체란?\r\n\r\n> 자바스크립트는 `객체`기반의 프로그래밍 언어이며 자바스크립트를 구성하는 거의 `모든 것`이 객체이다.\r\n\r\n- 원시타입의 값, 원시 값은 변경 불가능 한 값이지만, 객체 타입의 값, 즉 객체는 변경가능한 값이다.\r\n\r\n- 객체는 0개 이상의 `프로퍼티`로 구성된 집합, 프로퍼티는 `키(key): 값(value)`로 구성(**함수도 프로퍼티 값으로 사용 가능!**)\r\n- - 프로퍼티: 객체의 상태를 나타내는 값(data)\r\n\t\r\n - 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작\r\n\r\n객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 `객체지향 프로그래밍` 이라고 함.\r\n\r\n## 객체리터럴에 의한 객체 생성\r\n```\r\n 인스턴스: 클래스에 의해 생성되어 메모리에 저장된 실체, 객체는 클래스와 인스턴스를 포함한 개념, 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다.\r\n ```\r\n자바스크립트는 **프로토타입 객체지향 언어** 로서, 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다.\r\n\r\n- 객체 리터럴\r\n- Object 생성자 함수\r\n- 생성자 함수\r\n- Object.create 메서드\r\n- 클래스(ES6)\r\n\r\n객체 리터럴은 **중괄호**( `{ ... }` ) 내에 0개 이상의 프로퍼티를 정의한다. **변수에 할당되는 시점**에 자바스크립트 엔진은 **객체 리터럴을 해석**해 객체를 생성한다.\r\n```js\r\nvar person = {\r\n name: \"Wi\",\r\n sayHello: function () {\r\n console.log(`Hello My name is ${this.name}`);\r\n },\r\n};\r\n\r\nconsole.log(typeof person); // object\r\nconsole.log(person); // { name: 'Wi', sayHello: [Function: sayHello] }\r\n```\r\n중괄호 내에 프로퍼티 정의하지 않으면 **빈 객체** 생성\r\n\r\n## 프로퍼티\r\n**객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.**\r\n```js\r\nvar person = {\r\n name: \"LEE\", // 프로퍼티 키는 name, 프로퍼티 값은 \"LEE\"\r\n age: 26, // 프로퍼티 키는 age, 프로퍼티 값은 26\r\n};\r\n```\r\n- `프로퍼티 키(key)` : 빈 문자열( `''` ) 을 포함하는 모든 `문자열(string)` 또는 `심벌(symbol) 값`\r\n- `프로퍼티 값(value)` : 자바스크립트에서 사용할 수 있는 모든 값\r\n
\r\n\r\n**식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다** (규칙 준수하면 사용안해도 ㄱㅊ)\r\n```js\r\nvar person = {\r\n\tfirstName: 'Joo-young', // 식별자 네이밍 규칙을 준수한 프로퍼티 키\r\n\t'last-name': 'Lee', // 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용해 문자열 형태 유지 )\r\n last-name: 'Lee' // SyntaxError: Unexpected token ( 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키\r\n};\r\nconsole.log(person) // {firstName: 'Joo-young', last-name: 'Lee'}\r\n```\r\n
\r\n\r\n프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면 **암묵적 타입 변환** 을 통해 문자열이 된다.\r\n```js\r\nvar foo = {\r\n 0: 1,\r\n 1: 2,\r\n 2: 3,\r\n};\r\n\r\nconsole.log(foo); // { 0: 1, 1: 2, 2: 3 } <- 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다. \r\n```\r\n
\r\n이미 존재하는 프로퍼티 중복 선언시 나중에 선언한 프로퍼티가 덮어씌워진다. (에러가 발생하지 않는 것 주의하자)\r\n
\r\n\r\n```js\r\nvar foo = {\r\nname: 'Lee',\r\nname: 'Kim',\r\n}\r\nconsole.log(foo); // {name: 'Kim'}\r\n```\r\n\r\n## 메서드\r\n자바스크립트에서 사용할 수 있는 모든 값은 **프로퍼티 값**으로 사용 가능, 자바스크립트의 함수는 객체(일급 객체) 이다. 따라서 함수는 값으로 취급할 수 있기 때문에 **프로퍼티 값으로 사용할 수 있다.** \r\n\r\n프로퍼티 값이 함수인 경우, 일반 함수와 구분하기 위해, `메서드`라고 부른다. 즉 메서드는 객체에 묶여있는 함수를 의미한다.\r\n\r\n```js\r\nvar circle= {\r\n // 프로퍼티\r\n radius: 5,\r\n\r\n // 메서드\r\n getDiameter: function () {\r\n return 2 * this.radius;\r\n },\r\n};\r\n\r\nconsole.log(person.getDiameter()); // 10\r\n```\r\n## 프로퍼티 접근\r\n- 마침표 프로퍼티 접근 연산자(.)로 사용하는 **마침표 표기법**\r\n- 대괄호 프로퍼티 접근 연산자([...]) 사용하는 **대괄호 표기법**\r\n\r\n\t```js\r\n\tvar person = {\r\n\t\tname: 'Lee'\r\n\t};\r\n\r\n\t// 마침표 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(person.name); // Lee\r\n\r\n\t// 대괄호 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(persone['name']); // Lee\r\n\t```\r\n- 대괄호 표기법을 사용하는 경우 **접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열**이어야 한다.\r\n
\r\n- 대괄호 프로퍼티 접근 연산자 내에 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 **식별자로 해석**한다.\r\n- 객체에 존재하지 않는 프로퍼티에 접근하면 **undefined**를 반환한다.\r\n\r\n\t```js\r\n\t// 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석함\r\n\tconsole.log(person[name]); // ReferenceError: name is not defined\r\n\t// 객체에 존재하지 않는 프로퍼티에 접근하면 undefined반환\r\n\tconsole.log(person.age); // undefined\r\n\t```\r\n\r\n## 프로퍼티 동적 생성 & 삭제\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n// person 객체에 age는 존재x\r\n// 따라서 person객체에 age프로퍼티가 동적으로 생성되고 값이 할당된다.\r\nperson.age = 20; // { age: 20 } \r\nconsole.log(person); // { name: 'Lee', age: 20 }\r\n\r\ndelete person.age; // age 라는 프로퍼티 키가 존재하므로 해당 프로퍼티가 삭제된다.\r\ndelete person.address; // address이라는 프로퍼티 키는 없으므로 삭제 할 수 없지만, 에러는 발생하지 않는다.\r\n\r\nconsole.log(person); // { name: 'Lee' }\r\n```\r\n## ES6에서 추가된 객체 리터럴의 확장 기능\r\n\r\n\r\n### 프로퍼티 축약 표현\r\n```js\r\n// ES5\r\nvar x = 1, y=2;\r\n\r\nvar obj = {\r\n\tx:x,\r\n\ty:y\r\n};\r\nconsole.log(obj); // {x:1, y:2}\r\n\r\n// ES6(프로퍼티 축약 표현)\r\nlet x = 1, y = 2;\r\nconst obj = {x,y};\r\nconsole.log(obj);\r\n```\r\n### 계산된 프로퍼티 이름\r\n`ES5`\r\n```js\r\nvar prefix = \"prop\";\r\nvar i = 0;\r\n\r\nvar obj = {};\r\n\r\n// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성\r\n// '객체 외부'에서만 가능\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n`ES6`\r\n```js\r\nconst prefix = \"prop\";\r\nlet i = 0;\r\n\r\n// '객체 리터럴 내부'에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성\r\nconst obj = {\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n};\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n\r\n### 메서드 축약 표현\r\n`ES5`\r\n```js\r\nvar obj = {\r\n\tname: \"Lee\",\r\n\tsayHi: function () {\r\n\t\tconsole.log('Hi!' + this.name);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! Lee\r\n```\r\n`ES6`\r\n```js\r\nconst obj = {\r\n\tname: \"JY\",\r\n\t // 메서드 축약 표현\r\n\tsayHi() {\r\n\t\tconsole.log(`Hi! ${this.name}`);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! JY\r\n```\r\n메서드 축약 표현 으로 정의한 메서드는 프로퍼티에 할당한 함수 와 다르게 동작한다.\r\n(이후 자세히 살펴볼 예정)"},{"slug":"posts/Javascript/javascriptdeepdive11","title":"원시 값과 객체의 비교","date":"2024-04-26T14:30:51.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '원시 값과 객체의 비교'의 정리 내용입니다.","tags":["Dummy","JavaScript"],"content":"\r\n# 원시 값과 객체의 비교\r\n\r\n\r\n## 원시 타입 vs 객체 타입\r\n- 원시 타입의 값, 즉 `원시 값`은 **변경 불가능한 값(immutable value)** vs `객체(참조) 타입의 값`, 즉 객체는 **변경 가능한 값(mutable value)**이다.\r\n- `원시 값`을 변수에 할당하면 변수(확보된 메모리 공간)에는 **실제 값이 저장** vs `객체` 를 변수에 할당하면 변수(확보된 메모리 공간)에는 **참조 값이 저장**\r\n- `원시 값을 갖는 변수`를 다른 변수에 할당하면 원본의 **원시 값이 복사되어 전달**(**값에 의한 전달**) vs `객체를 가리키는 변수`를 다른 변수에 할당하면 **원본의 참조 값이 복사되어 전달**(**참조에 의한 전달**)\r\n\r\n## 원시 값\r\n\r\n**원시 값: 원시 타입의 값, 원시 값은 변경 불가능한 값**(`읽기 전용의 값(readonly)`)\r\n\r\n**❗ 변수와 값은 엄연히 다른것!**\r\n- `변수`는 하나의 값을 저장하기 위해 확보한 **메모리 공간 자체** 또는 그 **메모리 공간을 식별하기 위해 붙인 이름**\r\n- `값`은 변수에 저장된 **데이터 표현식이 평가되어 생성된 결과**\r\n- 변경 불가능한 것은 **값에 대한 진술**, 변수는 재할당을 통해, 변수 값을 변경(교체) 가능\r\n\r\n** 변수vs상수 **\r\n+ 변수는 언제든지 `재할당`을 통해 변수 값을 변경(교체)할 수 있다. 그래서 \"변수\"다.\r\n+ 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 `변수`라고 할 수 있다.\r\n+ 하지만, 상수는 단 한 번만 할당이 허용하므로 변수 값을 변경할 수 없다. (이를 변경 불가능한 값으로 동일시하면 안됨 상수는 **재할당이 금지된 변수**)\r\n\r\n### 불변성\r\n변경 불가능한 값인 **원시 값**은 값을 변경하는 것이 아닌, 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 값의 이러한 특성을 `불변성` 이라고 한다. \r\n\r\n**`불변성` 을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법**이 없다.\r\n\r\n### 문자열과 불변성\r\n자바스크립트는 개발자의 편의를 위해 문자열 타입을 원시 타입으로 제공한다.\r\n\r\n문자열은 유사 배열객체이면서 이터러블이므로 **배열과 유사하게 각 문자에 접근**할 수 있다.\r\n\r\n**유사 배열 객체란?**\r\n\r\n- 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있으며, length 프로퍼티를 갖는 객체\r\n- length 프로퍼티를 갖기 때문에 유사 배열 객체 이며, for 문으로 순회도 할 수 있다.\r\n\t```js\r\n\tvar str = 'string';\r\n\t// 유사배열이므로, 배열과 유사하게 인덱스를 사용해 각 문자로 접근\r\n\tconsole.log(str[0]);\r\n\t// 원시 값인 문자열이 객체처럼 동작\r\n\tconsole.log(str.length); //6\r\n\tconsole.log(str.toUpperCase()); //STRING\r\n\t```\r\n```js\r\nvar str = 'string'\r\n// 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근\r\n// 하지만 문자열은 원시 값이므로 변경할 수 없다. 이때 에러는 발생 x\r\nstr[0] = 'S'\r\nconsole.log(str)// string\r\n```\r\n이는 데이터의 신뢰성을 보장한다. 변수에 새로운 문자열을 재할당하는 것은 물론 가능\r\n\r\n### 값에 의한 전달\r\n```js\r\nvar score = 80;\r\nvar copy = score;\r\n\r\nscore = 100;\r\n\r\nconsole.log(score); // 100 (원본 값)\r\nconsole.log(copy); // 80 (복사한 값)\r\n```\r\nscore는 변수 값 80으로 평가 되므로, copy 변수에도 80이 할당된다. 이때 새로운 숫자 값 80이 생성되어 copy변수에 할당된다\r\n\r\n변수(copy)에는 할당되는 변수(score)의 **원시 값이 복사되어 전달**된다. \r\n 이를, `값에 의한 전달`이라고 한다.\r\n\r\ncopy와 score는 별개의 값으로써, 서로의 변수의 값에 어떠한 영향도 주지않음.\r\n\r\n또한,\r\n엄격하게 말하자면, 변수에는 값이 전달되는 것이 아니라, **메모리 주소가 전달되는 것이다.**\r\n이는 변수와 같은 식별자는 값이 아니라 **메모리 주소를 기억**하기 때문이다.\r\n> 이처럼 \"값에 의한 전달\"도 사실은 값을 전달하는 것이 아니라, 메모리 주소를 전달한다. 단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.\r\n\r\n하지만 중요한 것은,\r\n\r\n❗ **결국 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.**\r\n\r\n## 객체\r\n> 자바스크립트는 다른 객체지향 언어와는 달리, 클래스 없이 객체 생성가능하며, 객체가 생성된 이후라도 동적으로 프로퍼티와 메서드 추가가 가능하다. V8 엔진에서는 **히든 클래스**라는 방식을 사용한다.\r\n\r\n### 변경 가능한 값\r\n**객체(참조)타입의 값, 즉 객체는 변경 가능한 값**\r\n\r\n원시 값과 다르게, 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 **참조 값**에 접근한다!\r\n- `참조 값`: 생성된 객체가 저장된 메모리 공간의 주소, 그 자체\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n\r\n// person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다.\r\nconsole.log(person) //{name: \"Lee\"}\r\n```\r\n객체를 할당한 변수의 경우 \"변수는 객체를 가리키고(참조하고)있다\" 라고 표현한다.\r\n```person 변수는 {name: 'Lee'}를 가리키고(참조하고) 있다.```\r\n객체를 할당한 변수는 원시 값과 달리, 재할당 없이 객체를 직접 변경할 수 있다.\r\n즉, 재할당 없이 **프로퍼티를 동적으로 추가, 프로퍼티 값을 갱신, 프로퍼티 자체를 삭제도 가능**\r\n\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// 프로퍼티 값 갱신\r\nperson.name = \"Kim\";\r\n\r\n// 프로퍼티 값 동적 추가\r\nperson.address = \"Seoul\";\r\n\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n원시 값과는 다르게 **여러개의 식별자가 하나의 객체를 공유할 수 있다**라는 부작용이 있다.\r\n\r\n### 얕은 복사와 깊은 복사\r\n객체를 프로퍼티의 값으로 갖는 객체의 경우 \r\n- `얕은 복사`는 **한단계만 복사**하는 것을 말하며, 객체의 중첩되어있는 객체의 경우 참조 값을 복사한다.\r\n- `깊은 복사`는 **객체에 중첩되어 있는 객체까지 모두 복사**하며, **원시 값처럼 완전한 복사본을 만든다.**\r\n\r\n### 참조에 의한 전달\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n// 참조 값을 복사(얕은 복사)\r\nvar copy = person;\r\n```\r\nperson을 다른 변수(사본, copy)에 할당하면 **원본의 참조 값이 복사되어 전달**된다. 이를 **참조에 의한 전달** 이라고 한다.\r\n원본 person과 사본 copy는 동일한 참조 값을 가진다. 즉, 둘 모두 동일한 객체를 가리킨다. 이것은 **두 개의 식별자가 하나의 객체를 공유한다는 것을 의미**\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// \"참조 값\"을 \r\n복사, copy와 person이 동일한 참조 값을 갖는다.\r\nvar copy = person;\r\n// 동일한 객체 참조하므로\r\nconsole.log(copy === person); // true\r\n\r\n// copy를 통해 객체의 name 프로퍼티를 변경한다.\r\ncopy.name = \"Kim\";\r\n\r\n// person을 통해 객체의 address 프로퍼티를 동적 생성한다.\r\nperson.address = \"Seoul\";\r\n\r\n// copy와 person은 동일한 객체를 가리키므로 서로 영향을 주고받음\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\nconsole.log(copy); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n\"값에 의한 전달\"과 \"참조에 의한 전달\"은 **식별자가 기억하는 메모리 공간에 저장되어 있는 값을 전달한다는 면에서 동일**하다. 따라서 **\"참조에 의한 전달\"은 존재하지 않고 \"값에 의한 전달\"만이 존재한다고 할 수 있다.**"},{"slug":"posts/Javascript/javascriptdeepdive09","title":"자바스크립트 딥다이브: 09.타입 변환과 단축평가","date":"2024-04-22T12:00:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '타입 변환과 단축평가'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n# 타입 변환과 단축 평가\r\n개발자가 의도적으로 값의 타입을 변환하는 것: `명시적 타입 변환` or `타입캐스팅`\r\n\r\n개발자의 의도와는 상관없이 표현식을 평가하는 도중에 **자바스크립트 엔진에 의해 암묵적으로 타입이 변환**되는 것: `암묵적 타입 변환` or `타입강제 변환`\r\n\r\n## 암묵적 타입 변환\r\n> 자바스크립트 엔진이 표현식을 평가할 때 개발자의 의도와는 상관없이 `코드의 문맥을 고려해 암묵적으로` 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 있다.\r\n\r\n암묵적 타입 변환은 문자, 숫자, 불리언 같은 **원시 타입**중 하나로 타입을 자동 변환한다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// 숫자 타입 \r\n0+'' // '0'\r\nNaN + '' // 'NaN'\r\nInfinity + '' // 'Infinity'\r\n\r\n// 불리언 타입\r\ntrue + '' // 'true'\r\n\r\n// null 타입\r\nnull + '' // 'null'\r\n\r\n// undefined 타입\r\nundefined + ''; // \"undefined\"\r\n\r\n// 심벌 타입\r\n(Symbol()) + ''; // TypeError: Cannot convert a Symbol value to a string\r\n\r\n// 객체 타입\r\n({}) + ''; // \"[object Object]\"\r\nMath + ''; // \"[object Math]\"\r\n[] + ''; // \"\"\r\n[10, 20] + ''; // \"10,20\"\r\n(function(){}_ + ''; // \"function(){}\"\r\nArray + ''; // \"function Array() { [native code] }\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// 문자열 타입(+ 단항연산자는 피연산자가 숫자타입이 아니면 숫자 타입으로 암묵적 타입 변환 수행)\r\n+'' // -> 0\r\n+'0' // 0\r\n+'string' // -> NaN\r\n\r\n// 불리언 타입\r\n+true // -> 1\r\n\r\n// null 타입\r\n+null // -> 0\r\n\r\n//undefined 타입\r\n+undefined // -> NaN\r\n\r\n// 심벌 타입\r\n+Symbol(); // TypeError: Cannot convert a Symbol value to a number\r\n\r\n// 객체 타입\r\n+{}; // -> NaN\r\n+[]; // -> 0\r\n+[10, 20]; // NaN\r\n+function () {}; // NaN\r\n```\r\n**빈 문자열 (''), 빈 배열([]), null, false**는 **0**으로, **true**는 **1**로 변환된다. **객체와 빈 배열이 아닌 배열,undefined**는 변환되지 않아 **NaN**이 된다는 것에 주의하자\r\n\r\n### 불리언 타입으로 변환\r\nif문, for문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가 되어야 하는 표현식이다.\r\n```js\r\n// 모두 코드 블록 실행됨\r\nif(!false) console.log(false + ' is falsy value')\r\nif(!undefined) console.log(undefined + 'is falsy value')\r\nif(!NaN) console.log(NaN + 'is falsy value');\r\nif(!null) console.log(null + 'is falsy value');\r\n```\r\n자바스크립트 엔진은 불리언 타입이 아닌 값을 `Truthy 값(참으로 평가되는 값)` or `Falsy 값(거짓으로 평가되는 값)` 으로 구분한다.\r\n\r\n**자바스크립트 엔진이 Falsy 값으로 판단하는 값**\r\n+ false\r\n+ undefined\r\n+ null\r\n+ 0, -0\r\n+ NaN\r\n+ ''(빈 문자열)\r\n\r\n## 명시적 타입 변환\r\n**개발자의 의도에 따라 명시적으로 타입을 변환하는 것** \r\n\r\n**표준 빌트인 함수(String,Number,Boolean)**을 new연산자 없이 호출하는 방법과 **빌트인 메서드를 사용하는 방법**, 그리고 **암묵적 타입 변환**을 이용하는 방법이 있다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// String 생성자 함수를 new 연산 없이 호출\r\nString(1); // -> \"1\"\r\nString(NaN); // -> \"NaN\"\r\nString(Infinity); // -> \"Infinity\"\r\nString(false); // -> \"false\"\r\n\r\n// Object.prototype.toString 메서드를 사용하는 방법\r\n(NaN).toString() // -> 'NaN'\r\n(true).toString() // -> 'true'\r\n\r\n// 문자열 연결 연산자\r\nNaN + '' // -> \"NaN\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// Number 생성자 함수를 new 연산자 없이 호출하는 방법\r\nNumber('0') // -> 0\r\nNumber(10.53) // -> 10.53\r\n\r\n// parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)\r\nparseInt('0') // -> 0\r\nparseFloat('10.53') // -> 10.53\r\n\r\n// + 단항 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n+'0'\r\n+'-1'\r\n// 불리언 타입 => 숫자 타입\r\n+true; //->1\r\n\r\n// * 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n'0' * 1;\r\n'-1' * 1; //1\r\n// 불리언 타입 => 숫자 타입\r\ntrue * 1; //->1\r\n```\r\n\r\n### 불리언 타입으로 변환\r\n```js\r\n// 1. Boolean 생성자 함수를 new 키워드 없이 호출하는 방법\r\nBoolean('x'); // true\r\n\r\nBoolean(0) // false\r\nBoolean(NaN) // false\r\nBoolean(Infinity) // true\r\n\r\nBoolean(null) // false\r\nBoolean(undefined) // false\r\n\r\nBoolean({}) //True\r\n\r\n//2. !(부정 논리 연산자) 두 번 사용\r\n!!'x'; // true ( !(!'x') === !(false) -> true )\r\n```\r\n\r\n## 단축 평가\r\n> `단축 평가` : 논리 연산의 결과를 결정하는 피연산자를 `타입 변환하지 않고 그대로 반환`\r\n- 단축 평가는 표현식을 평가하는 도중에 평가결과가 확정 경우 → 나머지 평가 과정을 생략한다.\r\n단축 평가 표현식\r\n\r\n| 단축 평가 표현식 | 평가 결과 |\r\n|--|--|\r\n|true ll anything | true |\r\n|false ll anything | anything |\r\n| true && anything | anything|\r\n| false && anything | false |\r\n\r\n### 논리 연산자를 단축 평가\r\n`논리곱(&&)` 에서 논리 연산의 결과를 결정하는 것은 **두 번째 피연산자**\r\n```js\r\n'Cat' && 'Dog'; // Dog\r\n```\r\n\r\n`논리곱(&&) 연산자` 는 두 개의 피연산자가 `모두 true로 평가될 때 true를 반환`, `좌항 -> 우항으로 평가가 진행` \r\n\r\n\r\n`논리합(||)` 에서 논리 연산의 결과를 결정하는 것은 **첫 번째 피연산자** 그러므로 첫 번째 연산자 그대로 반환\r\n```js\r\n'Cat' || 'Dog' // Cat\r\n```\r\n\r\n`논리합 (||) 연산자` 는 `두 개의 피연자 중 하나만 true로 평가되어도 true로 반환`하며, 역시 `좌항에서 우항으로 평가가 진행`\r\n\r\n ```js\r\n // 논리합(||) 연산\r\n\"Cat\" || \"Dog\"; // \"Cat\"\r\nfalse || \"Dog\"; // \"Dog\"\r\n\"Cat\" || false; // \"Cat\"\r\n\r\n// 논리곱(&&) 연산\r\n\"Cat\" && \"Dog\"; // \"Dog\"\r\nfalse && \"Dog\"; // \"false\"\r\n\"Cat\" && false; // \"false\"\r\n ```\r\n **단축평가 사용 예시**\r\n - **if 문대체**\r\n논리 연산자 단축평가를 통해서 if문도 대체할 수 있으며, 값 할당시 보다 더 깔끔할 수 있다.\r\n\t```js\r\n\tvar done = false;\r\n\tvar message = \"\";\r\n\r\n\t// 조건문으로 값 할당\r\n\tif (!done) message = \"미완료\";\r\n\r\n\tmeessage = done || \"미완료\";\r\n\tconsole.log(message) // 미완료\r\n\t```\r\n- **객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null또는 undefined일 경우** \r\n\r\n\t이러한 경우 타입 에러가 발생한다. 하지만, 단축평가를 사용하면 에러 발생 x\r\n\t```js\r\n\t// elem이 null 또는 undefined같은 Falsy값이면 elem으로 평가\r\n\t// elem이 Truthy값이면 elem.value 값으로 평가\r\n\tvar elem = null;\r\n\tvar value = elem && elem.value // null\r\n\t```\r\n- **함수 매개변수에 기본값을 설정**\r\n함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 단축평가 사용해 매개변수에 기본값을 설정한다면 에러 방지 가능\r\n\t```js\r\n\t// 단축 평가를 사용한 매개변수의 기본값 설정\r\n\tfunction getStringLength(str) {\r\n\t str = str || \"\";\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\tgetStringLength('hi'); //2\r\n\t// Es6의 매개변수 default parameter 설정\r\n\tfunction getStringLength(str = \"\") {\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\t```\r\n\r\n## 옵셔널 체이닝 연산자\r\n`?` : 좌항의 피 연산자가 null 또는 undefined인 경우 `undefined 반환`, 그렇지않으면 `우항의 포로퍼티 참조`\r\n```js\r\nvar elem = null;\r\nvar value = elem?.value; // undefined\r\n```\r\n- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 안전하게 참조할 때 유용\r\n- 옵셔널 체이닝 도입 이전에는 `논리곱(&&)을 사용한 단축 평가`를 통해 변수가 null 또는 undefined 인지 확인했음\r\n```js\r\n// 좌항이 Falsy라면 좌항 그대로 반환(0이나 ''반환 할 때도)\r\nvar str = \"\"; //\r\nvar length = str && str.length; // ''\r\n\r\n// 좌항 피연산자가 Falsy값이라도 null 또는 undefined 만 아니면, 우항의 프로퍼티를 참조한다.\r\nvar str = \"\";\r\nvar length = str?.length; // 0\r\n```\r\n\r\n## null 병합 연산자 \r\n`??` : 좌항의 피연산자가 **null또는 undefined인 경우** `우항의 피연산자 반환` 그렇지 않으면 `좌항 피연산자 반환`한다.\r\n```js\r\nvar foo = null ?? \"default string\"; // \"default string\"\r\n```\r\n- 변수에 기본값을 설정할 때 유용하며, 그전에는 논리합(||)을 사용한 단축평가로 변수에 기본값 설정\r\n\t```js\r\n\t// 좌항의 피연산자가 Falsy값이면, 우항의 피연산자를 반환 \r\n\t//(Falsy 값인 0 이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생한다.)\r\n\tvar foo = \"\" || \"default string\"; // \"default string\"\r\n\r\n\t// 좌항의 피연산자가 Falsy값이라도 null 또는 undefined 가 아니면, 좌항의 피연산자를 그대로 반환한다.\r\n\tvar foo = \"\" ?? \"default string\"; // ''\r\n\t```"}],"categorys":["Algorithm","Javascript","React"],"currentCategory":"all"},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/-8eDYE39v-ava91BZqEI9/posts/search.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/search.json new file mode 100644 index 0000000..7deed7b --- /dev/null +++ b/_next/data/-8eDYE39v-ava91BZqEI9/posts/search.json @@ -0,0 +1 @@ +{"pageProps":{"posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n### 파이버 트리\r\n파이버 트리는 하나는 **현재 모습을 담은** 파이버 트리, 다른 하나는 작업 중인 상태를 나타내는 **workInProgress** 트리다. 작업이 끝나면, 리액트는 **단순히 포인터만 변경**해 workInProgress 트리를 **현재 트리**로 바꿔버린다. 이러한 기술을 **더블 버퍼링**이라고 한다.\r\n\"트리를\r\n\r\n리액트에서는 미처 다 그리지 못한 모습을 노출시키지 않기 위해 (불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는데, 이러한 더블 버퍼링을 위해 트리가 두 개 존재하며, 이 더블 버퍼링은 커밋 단계에서 수행된다.\r\n\r\n- 먼저 현재 UI 렌더링을 위해 존재 하는 **current**를 기준으로 모든 작업이 시작된다.\r\n- 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터로 새로운 **workInProgress** 트리를 빌드하기 시작한다.\r\n- 빌드하는 작업이 끝나면 다음 렌더링에 이 트리를 사용한다.\r\n- 빌드된 workInProgress 트리가 UI에 최종적으로 렌더링되어 반영이 완료되면 **current가 이 workProgress로 변경된다**.\r\n\r\n### 파이버의 작업 순서\r\n일반적인 파이버 노드의 생성흐름은 다음과 같다.\r\n1. 리액트는 `beginWork()` 함수를 실행해 파이버 작업을 수행하고, 더 이상 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작된다.\r\n2. 1번의 작업이 끝나면 `completeWork( )` 함수를 실행해 파이버 작업을 완료한다.\r\n3. 형제가 있다면 형제로 넘어간다.\r\n4. 2,3번이 끝난다면 `return`으로 돌아가 자신의 작업이 완료되었음을 알린다.\r\n\r\n이러한 작업으로 트리가 생성이 되었는데, setState 등으로 업데이트가 발생하면 어떻게 될까? 이미 앞서 만든 current트리가 존재하고, setState로 업데이트 요청을 받아 workInProgress트리를 다시 빌드하기 시작한다. \r\n\r\n최초 렌더링 시에는 모든 파이버를 새로 만들어야 했지만 이제는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고, **기존 파이버에서 업데이트 된 props를 받아 파이버 내부에서 처리한다**.\r\n\r\n이처럼, 재조정 작업 때마다 새롭게 파이버 자바스크립트 객체를 만드는 것 이 아닌, 기존의 객체를 재활용하기 위해 내부 속성값만 초기화하거나 바꾸는 형태로 트리를 업데이트한다.\r\n\r\n과거에는 이 작업을 동기식으로 처리했고, 트리 업데이트 과정 및 새로운 트리를 만드는 작업은 동기식이고 중단될 수 없다. 그러나 현재는 우선순위가 높은 다른 업데이트가 오면 현재 업데이트 작업을 일시 중단하거나 새로 만들거나 폐기할 수 있으며 작업 단위를 파이버 단위로 나누어 우선순위를 할당하는 것 역시 가능하다.\r\n\r\n### 파이버와 가상 DOM\r\n리액트 컴포넌트에 대한 정보를 **1:1로 가지고 있는 것**이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 **비동기**로 이뤄진다. 이와 달리 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 이뤄져야 하기에, 메모리 상에서 이 작업을 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용하는 것이다.\r\n\r\n> 사실 가상 DOM은 오직 웹 어플리케이션에서만 통용되는 개념이고, 리액트 파이버는 리액트 네이티브와 같은 브라우저가 아닌 환경에서도 사용할 수 있기에 엄밀히 하면 파이버와 가상 DOM은 동일한 개념이 아니다. \r\n\r\n### 정리\r\n결국 가상 DOM과 리액트의 핵심은 **브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는 것**이다. \r\n\r\n화면에 표시되는 UI를 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다."},{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nrectangle\r\ncharacterX\r\ncharacterY\r\nitemX\r\nitemY\r\nresult\r\n\r\n\r\n \r\n[[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]]\r\n1\r\n3\r\n7\r\n8\r\n17\r\n\r\n\r\n[[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]]\r\n9\r\n7\r\n6\r\n1\r\n11\r\n\r\n\r\n[[1,1,5,7]]\r\n1\r\n1\r\n4\r\n7\r\n9\r\n\r\n\r\n[[2,1,7,5],[6,4,10,10]]\r\n3\r\n1\r\n7\r\n10\r\n15\r\n\r\n\r\n[[2,2,5,5],[1,3,6,4],[3,1,4,6]]\r\n1\r\n4\r\n6\r\n3\r\n10\r\n\r\n\r\n \r\n\r\n##### 입출력 예 설명\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/87694.%E2%80%85%EC%95%84%EC%9D%B4%ED%85%9C%E2%80%85%EC%A4%8D%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88-%EC%84%A4%EB%AA%85)\r\n\r\n입출력 예 #1\r\n\r\n![rect_5.png](6.png)\r\n\r\n캐릭터 위치는 (1, 3)이며, 아이템 위치는 (7, 8)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #2\r\n\r\n![rect_7.png](7.png)\r\n\r\n캐릭터 위치는 (9, 7)이며, 아이템 위치는 (6, 1)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #3\r\n\r\n[![rect_8.png](8.png)]\r\n\r\n캐릭터 위치는 (1, 1)이며, 아이템 위치는 (4, 7)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n## 구현 방법\r\n### 전체 직사각형들을 합친 것의 바깥쪽 테두리만 돌게하려면 어떻게 하는가?\r\n- rectangle을 순회하면서 범위 중 직사각형 내부는 0으로 테두리는 1로 board값을 갱신한다.\r\n- 이 때, 만일 `다른 직사각형의 내부안에 현재 직사각형의 테두리가 있지 않을 경우`에만 board를 1로 갱신한다. \r\n### 예외 사항\r\n![exception.png](exception.png)\r\n좌표가 인접한 경우 위와 같이 의도하지 않은 경우를 초래할 수도 있다.\r\n\r\n따라서 이를 해결하기 위해 모든 좌표의 값을 **2배**씩 해주어야 한다.\r\n\r\n이를 모두 반영하여 board 테이블을 만들면,\r\n\r\n```python\r\nboard = [[-1 for _ in range(102)] for _ in range(102)];\r\nfor r in rectangle:\r\n\t# map 객체를 통해 모든 좌표값에 2배\r\n\tx1,y1,x2,y2 = map(lambda x: x*2,r);\r\n for i in range(x1,x2+1):\r\n for j in range(y1,y2+1):\r\n\t # 직사각형 내부의 경우 0으로 개신\r\n if x1\r\n \r\nstones\r\nk\r\nresult\r\n\r\n\r\n \r\n[2, 4, 5, 3, 2, 1, 4, 2, 5, 1]\r\n3\r\n3\r\n\r\n\r\n \r\n\r\n##### **입출력 예에 대한 설명**\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/64062.%E2%80%85%EC%A7%95%EA%B2%80%EB%8B%A4%EB%A6%AC%E2%80%85%EA%B1%B4%EB%84%88%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88%EC%97%90-%EB%8C%80%ED%95%9C-%EC%84%A4%EB%AA%85)\r\n\r\n----------\r\n\r\n**입출력 예 #1**\r\n\r\n첫 번째 친구는 다음과 같이 징검다리를 건널 수 있습니다. \r\n![1.png](1.png)\r\n\r\n첫 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n두 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![2.png](2.png)\r\n\r\n두 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n세 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![3.png](3.png)\r\n\r\n세 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n네 번째 친구가 징검다리를 건너려면, 세 번째 디딤돌에서 일곱 번째 디딤돌로 네 칸을 건너뛰어야 합니다. 하지만 k = 3 이므로 건너뛸 수 없습니다. \r\n![4.png](4.png)\r\n\r\n따라서 최대 3명이 디딤돌을 모두 건널 수 있습니다.\r\n\r\n## 접근 방법\r\n브루트 포스로 1명씩 건너기에는, stones 배열의 크기가 최대 200,000이고, stones 배열의 각 원소들의 값 역시 최대 200,000,000이기 때문에, 시간 초과가 날 확률이 높다고 생각했고(사실 그렇게 쉬우면 lv3 일리가 없지), 아니나 다를까 시간초과가 났다. \r\n\r\n고민하다가 도저히 해결책이 안나와서 찾아보니 `이분탐색`을 사용하여 풀 수 있었다.\r\n\r\n- 건널 수 있는 인원의 최소는 1명, 최대는 max(stones)명이다. 모든 돌들의 합이 같거나, 다르다 하더라도 건널수 없는 곳이 k이하면 건널 수 있기 때문이다. \r\n- 따라서 start = 1 end = max(stones)로 이분탐색을 시작할 수 있다.\r\n\r\nmid 값만큼의 사람이 건널 수 있는지 확인하기 위한 check함수는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n\t # 밟을 수 없으므로 건너뛰어야하는 횟수를 늘린다.\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n # 밟을 수 있으므로 최대 건너뛰는 횟수를 초기화시킨다.\r\n else:\r\n cnt = 0;\r\n # 건너뛰는 횟수가 k보다 크거나 같으면 안되므로 False 리턴 \r\n if cnt>=k:\r\n return False;\r\n return True;\r\n```\r\n건널 수 있다면 mid보다 큰 범위에서 값을 찾아야하므로 start를 mid+1로 갱신하고, 반대라면, mid보다 작은 범위에서 값을 찾아야하므로 end를 mid-1로 갱신한다.\r\n \r\ncheck 시간 복잡도는 O(N)이고 이분탐색을 했을 때 O(logN)의 시간복잡도가 나오므로, 총 O(NlogN)의 시간 복잡도가 나오므로, 시간초과가 나지 않는다.\r\n\r\n전체 코드는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n else:\r\n cnt = 0;\r\n if cnt>=k:\r\n return False;\r\n return True;\r\n\r\ndef solution(stones, k):\r\n start,end = 1,max(stones);\r\n answer = 0;\r\n while start<=end:\r\n mid = (start + end) // 2;\r\n if check(stones, mid,k):\r\n start = mid+1;\r\n else:\r\n answer = mid;\r\n end = mid-1; \r\n return answer;\r\n```\r\n\r\n## 느낀 점\r\n이분탐색 문제를 많이는 아니더라도 어느정도는 풀어봤다고 생각했는데, 이 문제에서 이분탐색으로 푸는 아이디어를 떠올리지 못해서 아쉽다. \r\n\r\n또한 처음에 위에 코드의 6번째줄에서 else문을 쓰지않고, 이러한 코드로 제출하여서 시간초과가 났다.\r\n```python\r\nif (stone - mid) <= 0:\r\n\tcnt += 1;\r\nif (stone - mid)>0:\r\n\tcnt = 0;\r\n```\r\nㅎㅎ.. 사실 위와 같은 경우에서 if else문을 쓰는 것이 기본인데, 그래도 시간초과가 날 수 있는 직접적인 원인까지는 되지 않을 거라고 안일하게 생각해서 코드를 짠 게 화근이었다. 기본을 지키자!"},{"slug":"posts/Javascript/javascriptdeepdive10","title":"객체 리터럴","date":"2024-04-29T15:33:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '객체 리터럴'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n\r\n# 객체 리터럴\r\n\r\n## 객체란?\r\n\r\n> 자바스크립트는 `객체`기반의 프로그래밍 언어이며 자바스크립트를 구성하는 거의 `모든 것`이 객체이다.\r\n\r\n- 원시타입의 값, 원시 값은 변경 불가능 한 값이지만, 객체 타입의 값, 즉 객체는 변경가능한 값이다.\r\n\r\n- 객체는 0개 이상의 `프로퍼티`로 구성된 집합, 프로퍼티는 `키(key): 값(value)`로 구성(**함수도 프로퍼티 값으로 사용 가능!**)\r\n- - 프로퍼티: 객체의 상태를 나타내는 값(data)\r\n\t\r\n - 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작\r\n\r\n객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 `객체지향 프로그래밍` 이라고 함.\r\n\r\n## 객체리터럴에 의한 객체 생성\r\n```\r\n 인스턴스: 클래스에 의해 생성되어 메모리에 저장된 실체, 객체는 클래스와 인스턴스를 포함한 개념, 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다.\r\n ```\r\n자바스크립트는 **프로토타입 객체지향 언어** 로서, 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다.\r\n\r\n- 객체 리터럴\r\n- Object 생성자 함수\r\n- 생성자 함수\r\n- Object.create 메서드\r\n- 클래스(ES6)\r\n\r\n객체 리터럴은 **중괄호**( `{ ... }` ) 내에 0개 이상의 프로퍼티를 정의한다. **변수에 할당되는 시점**에 자바스크립트 엔진은 **객체 리터럴을 해석**해 객체를 생성한다.\r\n```js\r\nvar person = {\r\n name: \"Wi\",\r\n sayHello: function () {\r\n console.log(`Hello My name is ${this.name}`);\r\n },\r\n};\r\n\r\nconsole.log(typeof person); // object\r\nconsole.log(person); // { name: 'Wi', sayHello: [Function: sayHello] }\r\n```\r\n중괄호 내에 프로퍼티 정의하지 않으면 **빈 객체** 생성\r\n\r\n## 프로퍼티\r\n**객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.**\r\n```js\r\nvar person = {\r\n name: \"LEE\", // 프로퍼티 키는 name, 프로퍼티 값은 \"LEE\"\r\n age: 26, // 프로퍼티 키는 age, 프로퍼티 값은 26\r\n};\r\n```\r\n- `프로퍼티 키(key)` : 빈 문자열( `''` ) 을 포함하는 모든 `문자열(string)` 또는 `심벌(symbol) 값`\r\n- `프로퍼티 값(value)` : 자바스크립트에서 사용할 수 있는 모든 값\r\n
\r\n\r\n**식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다** (규칙 준수하면 사용안해도 ㄱㅊ)\r\n```js\r\nvar person = {\r\n\tfirstName: 'Joo-young', // 식별자 네이밍 규칙을 준수한 프로퍼티 키\r\n\t'last-name': 'Lee', // 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용해 문자열 형태 유지 )\r\n last-name: 'Lee' // SyntaxError: Unexpected token ( 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키\r\n};\r\nconsole.log(person) // {firstName: 'Joo-young', last-name: 'Lee'}\r\n```\r\n
\r\n\r\n프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면 **암묵적 타입 변환** 을 통해 문자열이 된다.\r\n```js\r\nvar foo = {\r\n 0: 1,\r\n 1: 2,\r\n 2: 3,\r\n};\r\n\r\nconsole.log(foo); // { 0: 1, 1: 2, 2: 3 } <- 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다. \r\n```\r\n
\r\n이미 존재하는 프로퍼티 중복 선언시 나중에 선언한 프로퍼티가 덮어씌워진다. (에러가 발생하지 않는 것 주의하자)\r\n
\r\n\r\n```js\r\nvar foo = {\r\nname: 'Lee',\r\nname: 'Kim',\r\n}\r\nconsole.log(foo); // {name: 'Kim'}\r\n```\r\n\r\n## 메서드\r\n자바스크립트에서 사용할 수 있는 모든 값은 **프로퍼티 값**으로 사용 가능, 자바스크립트의 함수는 객체(일급 객체) 이다. 따라서 함수는 값으로 취급할 수 있기 때문에 **프로퍼티 값으로 사용할 수 있다.** \r\n\r\n프로퍼티 값이 함수인 경우, 일반 함수와 구분하기 위해, `메서드`라고 부른다. 즉 메서드는 객체에 묶여있는 함수를 의미한다.\r\n\r\n```js\r\nvar circle= {\r\n // 프로퍼티\r\n radius: 5,\r\n\r\n // 메서드\r\n getDiameter: function () {\r\n return 2 * this.radius;\r\n },\r\n};\r\n\r\nconsole.log(person.getDiameter()); // 10\r\n```\r\n## 프로퍼티 접근\r\n- 마침표 프로퍼티 접근 연산자(.)로 사용하는 **마침표 표기법**\r\n- 대괄호 프로퍼티 접근 연산자([...]) 사용하는 **대괄호 표기법**\r\n\r\n\t```js\r\n\tvar person = {\r\n\t\tname: 'Lee'\r\n\t};\r\n\r\n\t// 마침표 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(person.name); // Lee\r\n\r\n\t// 대괄호 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(persone['name']); // Lee\r\n\t```\r\n- 대괄호 표기법을 사용하는 경우 **접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열**이어야 한다.\r\n
\r\n- 대괄호 프로퍼티 접근 연산자 내에 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 **식별자로 해석**한다.\r\n- 객체에 존재하지 않는 프로퍼티에 접근하면 **undefined**를 반환한다.\r\n\r\n\t```js\r\n\t// 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석함\r\n\tconsole.log(person[name]); // ReferenceError: name is not defined\r\n\t// 객체에 존재하지 않는 프로퍼티에 접근하면 undefined반환\r\n\tconsole.log(person.age); // undefined\r\n\t```\r\n\r\n## 프로퍼티 동적 생성 & 삭제\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n// person 객체에 age는 존재x\r\n// 따라서 person객체에 age프로퍼티가 동적으로 생성되고 값이 할당된다.\r\nperson.age = 20; // { age: 20 } \r\nconsole.log(person); // { name: 'Lee', age: 20 }\r\n\r\ndelete person.age; // age 라는 프로퍼티 키가 존재하므로 해당 프로퍼티가 삭제된다.\r\ndelete person.address; // address이라는 프로퍼티 키는 없으므로 삭제 할 수 없지만, 에러는 발생하지 않는다.\r\n\r\nconsole.log(person); // { name: 'Lee' }\r\n```\r\n## ES6에서 추가된 객체 리터럴의 확장 기능\r\n\r\n\r\n### 프로퍼티 축약 표현\r\n```js\r\n// ES5\r\nvar x = 1, y=2;\r\n\r\nvar obj = {\r\n\tx:x,\r\n\ty:y\r\n};\r\nconsole.log(obj); // {x:1, y:2}\r\n\r\n// ES6(프로퍼티 축약 표현)\r\nlet x = 1, y = 2;\r\nconst obj = {x,y};\r\nconsole.log(obj);\r\n```\r\n### 계산된 프로퍼티 이름\r\n`ES5`\r\n```js\r\nvar prefix = \"prop\";\r\nvar i = 0;\r\n\r\nvar obj = {};\r\n\r\n// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성\r\n// '객체 외부'에서만 가능\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n`ES6`\r\n```js\r\nconst prefix = \"prop\";\r\nlet i = 0;\r\n\r\n// '객체 리터럴 내부'에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성\r\nconst obj = {\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n};\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n\r\n### 메서드 축약 표현\r\n`ES5`\r\n```js\r\nvar obj = {\r\n\tname: \"Lee\",\r\n\tsayHi: function () {\r\n\t\tconsole.log('Hi!' + this.name);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! Lee\r\n```\r\n`ES6`\r\n```js\r\nconst obj = {\r\n\tname: \"JY\",\r\n\t // 메서드 축약 표현\r\n\tsayHi() {\r\n\t\tconsole.log(`Hi! ${this.name}`);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! JY\r\n```\r\n메서드 축약 표현 으로 정의한 메서드는 프로퍼티에 할당한 함수 와 다르게 동작한다.\r\n(이후 자세히 살펴볼 예정)"},{"slug":"posts/Javascript/javascriptdeepdive11","title":"원시 값과 객체의 비교","date":"2024-04-26T14:30:51.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '원시 값과 객체의 비교'의 정리 내용입니다.","tags":["Dummy","JavaScript"],"content":"\r\n# 원시 값과 객체의 비교\r\n\r\n\r\n## 원시 타입 vs 객체 타입\r\n- 원시 타입의 값, 즉 `원시 값`은 **변경 불가능한 값(immutable value)** vs `객체(참조) 타입의 값`, 즉 객체는 **변경 가능한 값(mutable value)**이다.\r\n- `원시 값`을 변수에 할당하면 변수(확보된 메모리 공간)에는 **실제 값이 저장** vs `객체` 를 변수에 할당하면 변수(확보된 메모리 공간)에는 **참조 값이 저장**\r\n- `원시 값을 갖는 변수`를 다른 변수에 할당하면 원본의 **원시 값이 복사되어 전달**(**값에 의한 전달**) vs `객체를 가리키는 변수`를 다른 변수에 할당하면 **원본의 참조 값이 복사되어 전달**(**참조에 의한 전달**)\r\n\r\n## 원시 값\r\n\r\n**원시 값: 원시 타입의 값, 원시 값은 변경 불가능한 값**(`읽기 전용의 값(readonly)`)\r\n\r\n**❗ 변수와 값은 엄연히 다른것!**\r\n- `변수`는 하나의 값을 저장하기 위해 확보한 **메모리 공간 자체** 또는 그 **메모리 공간을 식별하기 위해 붙인 이름**\r\n- `값`은 변수에 저장된 **데이터 표현식이 평가되어 생성된 결과**\r\n- 변경 불가능한 것은 **값에 대한 진술**, 변수는 재할당을 통해, 변수 값을 변경(교체) 가능\r\n\r\n** 변수vs상수 **\r\n+ 변수는 언제든지 `재할당`을 통해 변수 값을 변경(교체)할 수 있다. 그래서 \"변수\"다.\r\n+ 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 `변수`라고 할 수 있다.\r\n+ 하지만, 상수는 단 한 번만 할당이 허용하므로 변수 값을 변경할 수 없다. (이를 변경 불가능한 값으로 동일시하면 안됨 상수는 **재할당이 금지된 변수**)\r\n\r\n### 불변성\r\n변경 불가능한 값인 **원시 값**은 값을 변경하는 것이 아닌, 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 값의 이러한 특성을 `불변성` 이라고 한다. \r\n\r\n**`불변성` 을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법**이 없다.\r\n\r\n### 문자열과 불변성\r\n자바스크립트는 개발자의 편의를 위해 문자열 타입을 원시 타입으로 제공한다.\r\n\r\n문자열은 유사 배열객체이면서 이터러블이므로 **배열과 유사하게 각 문자에 접근**할 수 있다.\r\n\r\n**유사 배열 객체란?**\r\n\r\n- 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있으며, length 프로퍼티를 갖는 객체\r\n- length 프로퍼티를 갖기 때문에 유사 배열 객체 이며, for 문으로 순회도 할 수 있다.\r\n\t```js\r\n\tvar str = 'string';\r\n\t// 유사배열이므로, 배열과 유사하게 인덱스를 사용해 각 문자로 접근\r\n\tconsole.log(str[0]);\r\n\t// 원시 값인 문자열이 객체처럼 동작\r\n\tconsole.log(str.length); //6\r\n\tconsole.log(str.toUpperCase()); //STRING\r\n\t```\r\n```js\r\nvar str = 'string'\r\n// 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근\r\n// 하지만 문자열은 원시 값이므로 변경할 수 없다. 이때 에러는 발생 x\r\nstr[0] = 'S'\r\nconsole.log(str)// string\r\n```\r\n이는 데이터의 신뢰성을 보장한다. 변수에 새로운 문자열을 재할당하는 것은 물론 가능\r\n\r\n### 값에 의한 전달\r\n```js\r\nvar score = 80;\r\nvar copy = score;\r\n\r\nscore = 100;\r\n\r\nconsole.log(score); // 100 (원본 값)\r\nconsole.log(copy); // 80 (복사한 값)\r\n```\r\nscore는 변수 값 80으로 평가 되므로, copy 변수에도 80이 할당된다. 이때 새로운 숫자 값 80이 생성되어 copy변수에 할당된다\r\n\r\n변수(copy)에는 할당되는 변수(score)의 **원시 값이 복사되어 전달**된다. \r\n 이를, `값에 의한 전달`이라고 한다.\r\n\r\ncopy와 score는 별개의 값으로써, 서로의 변수의 값에 어떠한 영향도 주지않음.\r\n\r\n또한,\r\n엄격하게 말하자면, 변수에는 값이 전달되는 것이 아니라, **메모리 주소가 전달되는 것이다.**\r\n이는 변수와 같은 식별자는 값이 아니라 **메모리 주소를 기억**하기 때문이다.\r\n> 이처럼 \"값에 의한 전달\"도 사실은 값을 전달하는 것이 아니라, 메모리 주소를 전달한다. 단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.\r\n\r\n하지만 중요한 것은,\r\n\r\n❗ **결국 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.**\r\n\r\n## 객체\r\n> 자바스크립트는 다른 객체지향 언어와는 달리, 클래스 없이 객체 생성가능하며, 객체가 생성된 이후라도 동적으로 프로퍼티와 메서드 추가가 가능하다. V8 엔진에서는 **히든 클래스**라는 방식을 사용한다.\r\n\r\n### 변경 가능한 값\r\n**객체(참조)타입의 값, 즉 객체는 변경 가능한 값**\r\n\r\n원시 값과 다르게, 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 **참조 값**에 접근한다!\r\n- `참조 값`: 생성된 객체가 저장된 메모리 공간의 주소, 그 자체\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n\r\n// person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다.\r\nconsole.log(person) //{name: \"Lee\"}\r\n```\r\n객체를 할당한 변수의 경우 \"변수는 객체를 가리키고(참조하고)있다\" 라고 표현한다.\r\n```person 변수는 {name: 'Lee'}를 가리키고(참조하고) 있다.```\r\n객체를 할당한 변수는 원시 값과 달리, 재할당 없이 객체를 직접 변경할 수 있다.\r\n즉, 재할당 없이 **프로퍼티를 동적으로 추가, 프로퍼티 값을 갱신, 프로퍼티 자체를 삭제도 가능**\r\n\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// 프로퍼티 값 갱신\r\nperson.name = \"Kim\";\r\n\r\n// 프로퍼티 값 동적 추가\r\nperson.address = \"Seoul\";\r\n\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n원시 값과는 다르게 **여러개의 식별자가 하나의 객체를 공유할 수 있다**라는 부작용이 있다.\r\n\r\n### 얕은 복사와 깊은 복사\r\n객체를 프로퍼티의 값으로 갖는 객체의 경우 \r\n- `얕은 복사`는 **한단계만 복사**하는 것을 말하며, 객체의 중첩되어있는 객체의 경우 참조 값을 복사한다.\r\n- `깊은 복사`는 **객체에 중첩되어 있는 객체까지 모두 복사**하며, **원시 값처럼 완전한 복사본을 만든다.**\r\n\r\n### 참조에 의한 전달\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n// 참조 값을 복사(얕은 복사)\r\nvar copy = person;\r\n```\r\nperson을 다른 변수(사본, copy)에 할당하면 **원본의 참조 값이 복사되어 전달**된다. 이를 **참조에 의한 전달** 이라고 한다.\r\n원본 person과 사본 copy는 동일한 참조 값을 가진다. 즉, 둘 모두 동일한 객체를 가리킨다. 이것은 **두 개의 식별자가 하나의 객체를 공유한다는 것을 의미**\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// \"참조 값\"을 \r\n복사, copy와 person이 동일한 참조 값을 갖는다.\r\nvar copy = person;\r\n// 동일한 객체 참조하므로\r\nconsole.log(copy === person); // true\r\n\r\n// copy를 통해 객체의 name 프로퍼티를 변경한다.\r\ncopy.name = \"Kim\";\r\n\r\n// person을 통해 객체의 address 프로퍼티를 동적 생성한다.\r\nperson.address = \"Seoul\";\r\n\r\n// copy와 person은 동일한 객체를 가리키므로 서로 영향을 주고받음\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\nconsole.log(copy); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n\"값에 의한 전달\"과 \"참조에 의한 전달\"은 **식별자가 기억하는 메모리 공간에 저장되어 있는 값을 전달한다는 면에서 동일**하다. 따라서 **\"참조에 의한 전달\"은 존재하지 않고 \"값에 의한 전달\"만이 존재한다고 할 수 있다.**"},{"slug":"posts/Javascript/javascriptdeepdive09","title":"자바스크립트 딥다이브: 09.타입 변환과 단축평가","date":"2024-04-22T12:00:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '타입 변환과 단축평가'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n# 타입 변환과 단축 평가\r\n개발자가 의도적으로 값의 타입을 변환하는 것: `명시적 타입 변환` or `타입캐스팅`\r\n\r\n개발자의 의도와는 상관없이 표현식을 평가하는 도중에 **자바스크립트 엔진에 의해 암묵적으로 타입이 변환**되는 것: `암묵적 타입 변환` or `타입강제 변환`\r\n\r\n## 암묵적 타입 변환\r\n> 자바스크립트 엔진이 표현식을 평가할 때 개발자의 의도와는 상관없이 `코드의 문맥을 고려해 암묵적으로` 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 있다.\r\n\r\n암묵적 타입 변환은 문자, 숫자, 불리언 같은 **원시 타입**중 하나로 타입을 자동 변환한다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// 숫자 타입 \r\n0+'' // '0'\r\nNaN + '' // 'NaN'\r\nInfinity + '' // 'Infinity'\r\n\r\n// 불리언 타입\r\ntrue + '' // 'true'\r\n\r\n// null 타입\r\nnull + '' // 'null'\r\n\r\n// undefined 타입\r\nundefined + ''; // \"undefined\"\r\n\r\n// 심벌 타입\r\n(Symbol()) + ''; // TypeError: Cannot convert a Symbol value to a string\r\n\r\n// 객체 타입\r\n({}) + ''; // \"[object Object]\"\r\nMath + ''; // \"[object Math]\"\r\n[] + ''; // \"\"\r\n[10, 20] + ''; // \"10,20\"\r\n(function(){}_ + ''; // \"function(){}\"\r\nArray + ''; // \"function Array() { [native code] }\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// 문자열 타입(+ 단항연산자는 피연산자가 숫자타입이 아니면 숫자 타입으로 암묵적 타입 변환 수행)\r\n+'' // -> 0\r\n+'0' // 0\r\n+'string' // -> NaN\r\n\r\n// 불리언 타입\r\n+true // -> 1\r\n\r\n// null 타입\r\n+null // -> 0\r\n\r\n//undefined 타입\r\n+undefined // -> NaN\r\n\r\n// 심벌 타입\r\n+Symbol(); // TypeError: Cannot convert a Symbol value to a number\r\n\r\n// 객체 타입\r\n+{}; // -> NaN\r\n+[]; // -> 0\r\n+[10, 20]; // NaN\r\n+function () {}; // NaN\r\n```\r\n**빈 문자열 (''), 빈 배열([]), null, false**는 **0**으로, **true**는 **1**로 변환된다. **객체와 빈 배열이 아닌 배열,undefined**는 변환되지 않아 **NaN**이 된다는 것에 주의하자\r\n\r\n### 불리언 타입으로 변환\r\nif문, for문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가 되어야 하는 표현식이다.\r\n```js\r\n// 모두 코드 블록 실행됨\r\nif(!false) console.log(false + ' is falsy value')\r\nif(!undefined) console.log(undefined + 'is falsy value')\r\nif(!NaN) console.log(NaN + 'is falsy value');\r\nif(!null) console.log(null + 'is falsy value');\r\n```\r\n자바스크립트 엔진은 불리언 타입이 아닌 값을 `Truthy 값(참으로 평가되는 값)` or `Falsy 값(거짓으로 평가되는 값)` 으로 구분한다.\r\n\r\n**자바스크립트 엔진이 Falsy 값으로 판단하는 값**\r\n+ false\r\n+ undefined\r\n+ null\r\n+ 0, -0\r\n+ NaN\r\n+ ''(빈 문자열)\r\n\r\n## 명시적 타입 변환\r\n**개발자의 의도에 따라 명시적으로 타입을 변환하는 것** \r\n\r\n**표준 빌트인 함수(String,Number,Boolean)**을 new연산자 없이 호출하는 방법과 **빌트인 메서드를 사용하는 방법**, 그리고 **암묵적 타입 변환**을 이용하는 방법이 있다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// String 생성자 함수를 new 연산 없이 호출\r\nString(1); // -> \"1\"\r\nString(NaN); // -> \"NaN\"\r\nString(Infinity); // -> \"Infinity\"\r\nString(false); // -> \"false\"\r\n\r\n// Object.prototype.toString 메서드를 사용하는 방법\r\n(NaN).toString() // -> 'NaN'\r\n(true).toString() // -> 'true'\r\n\r\n// 문자열 연결 연산자\r\nNaN + '' // -> \"NaN\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// Number 생성자 함수를 new 연산자 없이 호출하는 방법\r\nNumber('0') // -> 0\r\nNumber(10.53) // -> 10.53\r\n\r\n// parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)\r\nparseInt('0') // -> 0\r\nparseFloat('10.53') // -> 10.53\r\n\r\n// + 단항 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n+'0'\r\n+'-1'\r\n// 불리언 타입 => 숫자 타입\r\n+true; //->1\r\n\r\n// * 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n'0' * 1;\r\n'-1' * 1; //1\r\n// 불리언 타입 => 숫자 타입\r\ntrue * 1; //->1\r\n```\r\n\r\n### 불리언 타입으로 변환\r\n```js\r\n// 1. Boolean 생성자 함수를 new 키워드 없이 호출하는 방법\r\nBoolean('x'); // true\r\n\r\nBoolean(0) // false\r\nBoolean(NaN) // false\r\nBoolean(Infinity) // true\r\n\r\nBoolean(null) // false\r\nBoolean(undefined) // false\r\n\r\nBoolean({}) //True\r\n\r\n//2. !(부정 논리 연산자) 두 번 사용\r\n!!'x'; // true ( !(!'x') === !(false) -> true )\r\n```\r\n\r\n## 단축 평가\r\n> `단축 평가` : 논리 연산의 결과를 결정하는 피연산자를 `타입 변환하지 않고 그대로 반환`\r\n- 단축 평가는 표현식을 평가하는 도중에 평가결과가 확정 경우 → 나머지 평가 과정을 생략한다.\r\n단축 평가 표현식\r\n\r\n| 단축 평가 표현식 | 평가 결과 |\r\n|--|--|\r\n|true ll anything | true |\r\n|false ll anything | anything |\r\n| true && anything | anything|\r\n| false && anything | false |\r\n\r\n### 논리 연산자를 단축 평가\r\n`논리곱(&&)` 에서 논리 연산의 결과를 결정하는 것은 **두 번째 피연산자**\r\n```js\r\n'Cat' && 'Dog'; // Dog\r\n```\r\n\r\n`논리곱(&&) 연산자` 는 두 개의 피연산자가 `모두 true로 평가될 때 true를 반환`, `좌항 -> 우항으로 평가가 진행` \r\n\r\n\r\n`논리합(||)` 에서 논리 연산의 결과를 결정하는 것은 **첫 번째 피연산자** 그러므로 첫 번째 연산자 그대로 반환\r\n```js\r\n'Cat' || 'Dog' // Cat\r\n```\r\n\r\n`논리합 (||) 연산자` 는 `두 개의 피연자 중 하나만 true로 평가되어도 true로 반환`하며, 역시 `좌항에서 우항으로 평가가 진행`\r\n\r\n ```js\r\n // 논리합(||) 연산\r\n\"Cat\" || \"Dog\"; // \"Cat\"\r\nfalse || \"Dog\"; // \"Dog\"\r\n\"Cat\" || false; // \"Cat\"\r\n\r\n// 논리곱(&&) 연산\r\n\"Cat\" && \"Dog\"; // \"Dog\"\r\nfalse && \"Dog\"; // \"false\"\r\n\"Cat\" && false; // \"false\"\r\n ```\r\n **단축평가 사용 예시**\r\n - **if 문대체**\r\n논리 연산자 단축평가를 통해서 if문도 대체할 수 있으며, 값 할당시 보다 더 깔끔할 수 있다.\r\n\t```js\r\n\tvar done = false;\r\n\tvar message = \"\";\r\n\r\n\t// 조건문으로 값 할당\r\n\tif (!done) message = \"미완료\";\r\n\r\n\tmeessage = done || \"미완료\";\r\n\tconsole.log(message) // 미완료\r\n\t```\r\n- **객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null또는 undefined일 경우** \r\n\r\n\t이러한 경우 타입 에러가 발생한다. 하지만, 단축평가를 사용하면 에러 발생 x\r\n\t```js\r\n\t// elem이 null 또는 undefined같은 Falsy값이면 elem으로 평가\r\n\t// elem이 Truthy값이면 elem.value 값으로 평가\r\n\tvar elem = null;\r\n\tvar value = elem && elem.value // null\r\n\t```\r\n- **함수 매개변수에 기본값을 설정**\r\n함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 단축평가 사용해 매개변수에 기본값을 설정한다면 에러 방지 가능\r\n\t```js\r\n\t// 단축 평가를 사용한 매개변수의 기본값 설정\r\n\tfunction getStringLength(str) {\r\n\t str = str || \"\";\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\tgetStringLength('hi'); //2\r\n\t// Es6의 매개변수 default parameter 설정\r\n\tfunction getStringLength(str = \"\") {\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\t```\r\n\r\n## 옵셔널 체이닝 연산자\r\n`?` : 좌항의 피 연산자가 null 또는 undefined인 경우 `undefined 반환`, 그렇지않으면 `우항의 포로퍼티 참조`\r\n```js\r\nvar elem = null;\r\nvar value = elem?.value; // undefined\r\n```\r\n- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 안전하게 참조할 때 유용\r\n- 옵셔널 체이닝 도입 이전에는 `논리곱(&&)을 사용한 단축 평가`를 통해 변수가 null 또는 undefined 인지 확인했음\r\n```js\r\n// 좌항이 Falsy라면 좌항 그대로 반환(0이나 ''반환 할 때도)\r\nvar str = \"\"; //\r\nvar length = str && str.length; // ''\r\n\r\n// 좌항 피연산자가 Falsy값이라도 null 또는 undefined 만 아니면, 우항의 프로퍼티를 참조한다.\r\nvar str = \"\";\r\nvar length = str?.length; // 0\r\n```\r\n\r\n## null 병합 연산자 \r\n`??` : 좌항의 피연산자가 **null또는 undefined인 경우** `우항의 피연산자 반환` 그렇지 않으면 `좌항 피연산자 반환`한다.\r\n```js\r\nvar foo = null ?? \"default string\"; // \"default string\"\r\n```\r\n- 변수에 기본값을 설정할 때 유용하며, 그전에는 논리합(||)을 사용한 단축평가로 변수에 기본값 설정\r\n\t```js\r\n\t// 좌항의 피연산자가 Falsy값이면, 우항의 피연산자를 반환 \r\n\t//(Falsy 값인 0 이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생한다.)\r\n\tvar foo = \"\" || \"default string\"; // \"default string\"\r\n\r\n\t// 좌항의 피연산자가 Falsy값이라도 null 또는 undefined 가 아니면, 좌항의 피연산자를 그대로 반환한다.\r\n\tvar foo = \"\" ?? \"default string\"; // ''\r\n\t```"}]},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/Algorithm.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/Algorithm.json similarity index 100% rename from _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/Algorithm.json rename to _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/Algorithm.json diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/Dummy.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/Dummy.json similarity index 100% rename from _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/Dummy.json rename to _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/Dummy.json diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/JavaScript.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/JavaScript.json similarity index 100% rename from _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/JavaScript.json rename to _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/JavaScript.json diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/Virtual DOM.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/Virtual DOM.json similarity index 73% rename from _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/Virtual DOM.json rename to _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/Virtual DOM.json index e066665..33289d9 100644 --- a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/Virtual DOM.json +++ b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/Virtual DOM.json @@ -1 +1 @@ -{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy"],"currentTag":"Virtual DOM","posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n"}]},"__N_SSG":true} \ No newline at end of file +{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy"],"currentTag":"Virtual DOM","posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n### 파이버 트리\r\n파이버 트리는 하나는 **현재 모습을 담은** 파이버 트리, 다른 하나는 작업 중인 상태를 나타내는 **workInProgress** 트리다. 작업이 끝나면, 리액트는 **단순히 포인터만 변경**해 workInProgress 트리를 **현재 트리**로 바꿔버린다. 이러한 기술을 **더블 버퍼링**이라고 한다.\r\n\"트리를\r\n\r\n리액트에서는 미처 다 그리지 못한 모습을 노출시키지 않기 위해 (불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는데, 이러한 더블 버퍼링을 위해 트리가 두 개 존재하며, 이 더블 버퍼링은 커밋 단계에서 수행된다.\r\n\r\n- 먼저 현재 UI 렌더링을 위해 존재 하는 **current**를 기준으로 모든 작업이 시작된다.\r\n- 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터로 새로운 **workInProgress** 트리를 빌드하기 시작한다.\r\n- 빌드하는 작업이 끝나면 다음 렌더링에 이 트리를 사용한다.\r\n- 빌드된 workInProgress 트리가 UI에 최종적으로 렌더링되어 반영이 완료되면 **current가 이 workProgress로 변경된다**.\r\n\r\n### 파이버의 작업 순서\r\n일반적인 파이버 노드의 생성흐름은 다음과 같다.\r\n1. 리액트는 `beginWork()` 함수를 실행해 파이버 작업을 수행하고, 더 이상 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작된다.\r\n2. 1번의 작업이 끝나면 `completeWork( )` 함수를 실행해 파이버 작업을 완료한다.\r\n3. 형제가 있다면 형제로 넘어간다.\r\n4. 2,3번이 끝난다면 `return`으로 돌아가 자신의 작업이 완료되었음을 알린다.\r\n\r\n이러한 작업으로 트리가 생성이 되었는데, setState 등으로 업데이트가 발생하면 어떻게 될까? 이미 앞서 만든 current트리가 존재하고, setState로 업데이트 요청을 받아 workInProgress트리를 다시 빌드하기 시작한다. \r\n\r\n최초 렌더링 시에는 모든 파이버를 새로 만들어야 했지만 이제는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고, **기존 파이버에서 업데이트 된 props를 받아 파이버 내부에서 처리한다**.\r\n\r\n이처럼, 재조정 작업 때마다 새롭게 파이버 자바스크립트 객체를 만드는 것 이 아닌, 기존의 객체를 재활용하기 위해 내부 속성값만 초기화하거나 바꾸는 형태로 트리를 업데이트한다.\r\n\r\n과거에는 이 작업을 동기식으로 처리했고, 트리 업데이트 과정 및 새로운 트리를 만드는 작업은 동기식이고 중단될 수 없다. 그러나 현재는 우선순위가 높은 다른 업데이트가 오면 현재 업데이트 작업을 일시 중단하거나 새로 만들거나 폐기할 수 있으며 작업 단위를 파이버 단위로 나누어 우선순위를 할당하는 것 역시 가능하다.\r\n\r\n### 파이버와 가상 DOM\r\n리액트 컴포넌트에 대한 정보를 **1:1로 가지고 있는 것**이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 **비동기**로 이뤄진다. 이와 달리 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 이뤄져야 하기에, 메모리 상에서 이 작업을 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용하는 것이다.\r\n\r\n> 사실 가상 DOM은 오직 웹 어플리케이션에서만 통용되는 개념이고, 리액트 파이버는 리액트 네이티브와 같은 브라우저가 아닌 환경에서도 사용할 수 있기에 엄밀히 하면 파이버와 가상 DOM은 동일한 개념이 아니다. \r\n\r\n### 정리\r\n결국 가상 DOM과 리액트의 핵심은 **브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는 것**이다. \r\n\r\n화면에 표시되는 UI를 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다."}]},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/all.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/all.json new file mode 100644 index 0000000..a297671 --- /dev/null +++ b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/all.json @@ -0,0 +1 @@ +{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy"],"currentTag":"all","posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n### 파이버 트리\r\n파이버 트리는 하나는 **현재 모습을 담은** 파이버 트리, 다른 하나는 작업 중인 상태를 나타내는 **workInProgress** 트리다. 작업이 끝나면, 리액트는 **단순히 포인터만 변경**해 workInProgress 트리를 **현재 트리**로 바꿔버린다. 이러한 기술을 **더블 버퍼링**이라고 한다.\r\n\"트리를\r\n\r\n리액트에서는 미처 다 그리지 못한 모습을 노출시키지 않기 위해 (불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는데, 이러한 더블 버퍼링을 위해 트리가 두 개 존재하며, 이 더블 버퍼링은 커밋 단계에서 수행된다.\r\n\r\n- 먼저 현재 UI 렌더링을 위해 존재 하는 **current**를 기준으로 모든 작업이 시작된다.\r\n- 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터로 새로운 **workInProgress** 트리를 빌드하기 시작한다.\r\n- 빌드하는 작업이 끝나면 다음 렌더링에 이 트리를 사용한다.\r\n- 빌드된 workInProgress 트리가 UI에 최종적으로 렌더링되어 반영이 완료되면 **current가 이 workProgress로 변경된다**.\r\n\r\n### 파이버의 작업 순서\r\n일반적인 파이버 노드의 생성흐름은 다음과 같다.\r\n1. 리액트는 `beginWork()` 함수를 실행해 파이버 작업을 수행하고, 더 이상 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작된다.\r\n2. 1번의 작업이 끝나면 `completeWork( )` 함수를 실행해 파이버 작업을 완료한다.\r\n3. 형제가 있다면 형제로 넘어간다.\r\n4. 2,3번이 끝난다면 `return`으로 돌아가 자신의 작업이 완료되었음을 알린다.\r\n\r\n이러한 작업으로 트리가 생성이 되었는데, setState 등으로 업데이트가 발생하면 어떻게 될까? 이미 앞서 만든 current트리가 존재하고, setState로 업데이트 요청을 받아 workInProgress트리를 다시 빌드하기 시작한다. \r\n\r\n최초 렌더링 시에는 모든 파이버를 새로 만들어야 했지만 이제는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고, **기존 파이버에서 업데이트 된 props를 받아 파이버 내부에서 처리한다**.\r\n\r\n이처럼, 재조정 작업 때마다 새롭게 파이버 자바스크립트 객체를 만드는 것 이 아닌, 기존의 객체를 재활용하기 위해 내부 속성값만 초기화하거나 바꾸는 형태로 트리를 업데이트한다.\r\n\r\n과거에는 이 작업을 동기식으로 처리했고, 트리 업데이트 과정 및 새로운 트리를 만드는 작업은 동기식이고 중단될 수 없다. 그러나 현재는 우선순위가 높은 다른 업데이트가 오면 현재 업데이트 작업을 일시 중단하거나 새로 만들거나 폐기할 수 있으며 작업 단위를 파이버 단위로 나누어 우선순위를 할당하는 것 역시 가능하다.\r\n\r\n### 파이버와 가상 DOM\r\n리액트 컴포넌트에 대한 정보를 **1:1로 가지고 있는 것**이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 **비동기**로 이뤄진다. 이와 달리 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 이뤄져야 하기에, 메모리 상에서 이 작업을 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용하는 것이다.\r\n\r\n> 사실 가상 DOM은 오직 웹 어플리케이션에서만 통용되는 개념이고, 리액트 파이버는 리액트 네이티브와 같은 브라우저가 아닌 환경에서도 사용할 수 있기에 엄밀히 하면 파이버와 가상 DOM은 동일한 개념이 아니다. \r\n\r\n### 정리\r\n결국 가상 DOM과 리액트의 핵심은 **브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는 것**이다. \r\n\r\n화면에 표시되는 UI를 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다."},{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nrectangle\r\ncharacterX\r\ncharacterY\r\nitemX\r\nitemY\r\nresult\r\n\r\n\r\n \r\n[[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]]\r\n1\r\n3\r\n7\r\n8\r\n17\r\n\r\n\r\n[[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]]\r\n9\r\n7\r\n6\r\n1\r\n11\r\n\r\n\r\n[[1,1,5,7]]\r\n1\r\n1\r\n4\r\n7\r\n9\r\n\r\n\r\n[[2,1,7,5],[6,4,10,10]]\r\n3\r\n1\r\n7\r\n10\r\n15\r\n\r\n\r\n[[2,2,5,5],[1,3,6,4],[3,1,4,6]]\r\n1\r\n4\r\n6\r\n3\r\n10\r\n\r\n\r\n \r\n\r\n##### 입출력 예 설명\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/87694.%E2%80%85%EC%95%84%EC%9D%B4%ED%85%9C%E2%80%85%EC%A4%8D%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88-%EC%84%A4%EB%AA%85)\r\n\r\n입출력 예 #1\r\n\r\n![rect_5.png](6.png)\r\n\r\n캐릭터 위치는 (1, 3)이며, 아이템 위치는 (7, 8)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #2\r\n\r\n![rect_7.png](7.png)\r\n\r\n캐릭터 위치는 (9, 7)이며, 아이템 위치는 (6, 1)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #3\r\n\r\n[![rect_8.png](8.png)]\r\n\r\n캐릭터 위치는 (1, 1)이며, 아이템 위치는 (4, 7)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n## 구현 방법\r\n### 전체 직사각형들을 합친 것의 바깥쪽 테두리만 돌게하려면 어떻게 하는가?\r\n- rectangle을 순회하면서 범위 중 직사각형 내부는 0으로 테두리는 1로 board값을 갱신한다.\r\n- 이 때, 만일 `다른 직사각형의 내부안에 현재 직사각형의 테두리가 있지 않을 경우`에만 board를 1로 갱신한다. \r\n### 예외 사항\r\n![exception.png](exception.png)\r\n좌표가 인접한 경우 위와 같이 의도하지 않은 경우를 초래할 수도 있다.\r\n\r\n따라서 이를 해결하기 위해 모든 좌표의 값을 **2배**씩 해주어야 한다.\r\n\r\n이를 모두 반영하여 board 테이블을 만들면,\r\n\r\n```python\r\nboard = [[-1 for _ in range(102)] for _ in range(102)];\r\nfor r in rectangle:\r\n\t# map 객체를 통해 모든 좌표값에 2배\r\n\tx1,y1,x2,y2 = map(lambda x: x*2,r);\r\n for i in range(x1,x2+1):\r\n for j in range(y1,y2+1):\r\n\t # 직사각형 내부의 경우 0으로 개신\r\n if x1\r\n \r\nstones\r\nk\r\nresult\r\n\r\n\r\n \r\n[2, 4, 5, 3, 2, 1, 4, 2, 5, 1]\r\n3\r\n3\r\n\r\n\r\n \r\n\r\n##### **입출력 예에 대한 설명**\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/64062.%E2%80%85%EC%A7%95%EA%B2%80%EB%8B%A4%EB%A6%AC%E2%80%85%EA%B1%B4%EB%84%88%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88%EC%97%90-%EB%8C%80%ED%95%9C-%EC%84%A4%EB%AA%85)\r\n\r\n----------\r\n\r\n**입출력 예 #1**\r\n\r\n첫 번째 친구는 다음과 같이 징검다리를 건널 수 있습니다. \r\n![1.png](1.png)\r\n\r\n첫 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n두 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![2.png](2.png)\r\n\r\n두 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n세 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![3.png](3.png)\r\n\r\n세 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n네 번째 친구가 징검다리를 건너려면, 세 번째 디딤돌에서 일곱 번째 디딤돌로 네 칸을 건너뛰어야 합니다. 하지만 k = 3 이므로 건너뛸 수 없습니다. \r\n![4.png](4.png)\r\n\r\n따라서 최대 3명이 디딤돌을 모두 건널 수 있습니다.\r\n\r\n## 접근 방법\r\n브루트 포스로 1명씩 건너기에는, stones 배열의 크기가 최대 200,000이고, stones 배열의 각 원소들의 값 역시 최대 200,000,000이기 때문에, 시간 초과가 날 확률이 높다고 생각했고(사실 그렇게 쉬우면 lv3 일리가 없지), 아니나 다를까 시간초과가 났다. \r\n\r\n고민하다가 도저히 해결책이 안나와서 찾아보니 `이분탐색`을 사용하여 풀 수 있었다.\r\n\r\n- 건널 수 있는 인원의 최소는 1명, 최대는 max(stones)명이다. 모든 돌들의 합이 같거나, 다르다 하더라도 건널수 없는 곳이 k이하면 건널 수 있기 때문이다. \r\n- 따라서 start = 1 end = max(stones)로 이분탐색을 시작할 수 있다.\r\n\r\nmid 값만큼의 사람이 건널 수 있는지 확인하기 위한 check함수는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n\t # 밟을 수 없으므로 건너뛰어야하는 횟수를 늘린다.\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n # 밟을 수 있으므로 최대 건너뛰는 횟수를 초기화시킨다.\r\n else:\r\n cnt = 0;\r\n # 건너뛰는 횟수가 k보다 크거나 같으면 안되므로 False 리턴 \r\n if cnt>=k:\r\n return False;\r\n return True;\r\n```\r\n건널 수 있다면 mid보다 큰 범위에서 값을 찾아야하므로 start를 mid+1로 갱신하고, 반대라면, mid보다 작은 범위에서 값을 찾아야하므로 end를 mid-1로 갱신한다.\r\n \r\ncheck 시간 복잡도는 O(N)이고 이분탐색을 했을 때 O(logN)의 시간복잡도가 나오므로, 총 O(NlogN)의 시간 복잡도가 나오므로, 시간초과가 나지 않는다.\r\n\r\n전체 코드는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n else:\r\n cnt = 0;\r\n if cnt>=k:\r\n return False;\r\n return True;\r\n\r\ndef solution(stones, k):\r\n start,end = 1,max(stones);\r\n answer = 0;\r\n while start<=end:\r\n mid = (start + end) // 2;\r\n if check(stones, mid,k):\r\n start = mid+1;\r\n else:\r\n answer = mid;\r\n end = mid-1; \r\n return answer;\r\n```\r\n\r\n## 느낀 점\r\n이분탐색 문제를 많이는 아니더라도 어느정도는 풀어봤다고 생각했는데, 이 문제에서 이분탐색으로 푸는 아이디어를 떠올리지 못해서 아쉽다. \r\n\r\n또한 처음에 위에 코드의 6번째줄에서 else문을 쓰지않고, 이러한 코드로 제출하여서 시간초과가 났다.\r\n```python\r\nif (stone - mid) <= 0:\r\n\tcnt += 1;\r\nif (stone - mid)>0:\r\n\tcnt = 0;\r\n```\r\nㅎㅎ.. 사실 위와 같은 경우에서 if else문을 쓰는 것이 기본인데, 그래도 시간초과가 날 수 있는 직접적인 원인까지는 되지 않을 거라고 안일하게 생각해서 코드를 짠 게 화근이었다. 기본을 지키자!"},{"slug":"posts/Javascript/javascriptdeepdive10","title":"객체 리터럴","date":"2024-04-29T15:33:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '객체 리터럴'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n\r\n# 객체 리터럴\r\n\r\n## 객체란?\r\n\r\n> 자바스크립트는 `객체`기반의 프로그래밍 언어이며 자바스크립트를 구성하는 거의 `모든 것`이 객체이다.\r\n\r\n- 원시타입의 값, 원시 값은 변경 불가능 한 값이지만, 객체 타입의 값, 즉 객체는 변경가능한 값이다.\r\n\r\n- 객체는 0개 이상의 `프로퍼티`로 구성된 집합, 프로퍼티는 `키(key): 값(value)`로 구성(**함수도 프로퍼티 값으로 사용 가능!**)\r\n- - 프로퍼티: 객체의 상태를 나타내는 값(data)\r\n\t\r\n - 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작\r\n\r\n객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 `객체지향 프로그래밍` 이라고 함.\r\n\r\n## 객체리터럴에 의한 객체 생성\r\n```\r\n 인스턴스: 클래스에 의해 생성되어 메모리에 저장된 실체, 객체는 클래스와 인스턴스를 포함한 개념, 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다.\r\n ```\r\n자바스크립트는 **프로토타입 객체지향 언어** 로서, 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다.\r\n\r\n- 객체 리터럴\r\n- Object 생성자 함수\r\n- 생성자 함수\r\n- Object.create 메서드\r\n- 클래스(ES6)\r\n\r\n객체 리터럴은 **중괄호**( `{ ... }` ) 내에 0개 이상의 프로퍼티를 정의한다. **변수에 할당되는 시점**에 자바스크립트 엔진은 **객체 리터럴을 해석**해 객체를 생성한다.\r\n```js\r\nvar person = {\r\n name: \"Wi\",\r\n sayHello: function () {\r\n console.log(`Hello My name is ${this.name}`);\r\n },\r\n};\r\n\r\nconsole.log(typeof person); // object\r\nconsole.log(person); // { name: 'Wi', sayHello: [Function: sayHello] }\r\n```\r\n중괄호 내에 프로퍼티 정의하지 않으면 **빈 객체** 생성\r\n\r\n## 프로퍼티\r\n**객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.**\r\n```js\r\nvar person = {\r\n name: \"LEE\", // 프로퍼티 키는 name, 프로퍼티 값은 \"LEE\"\r\n age: 26, // 프로퍼티 키는 age, 프로퍼티 값은 26\r\n};\r\n```\r\n- `프로퍼티 키(key)` : 빈 문자열( `''` ) 을 포함하는 모든 `문자열(string)` 또는 `심벌(symbol) 값`\r\n- `프로퍼티 값(value)` : 자바스크립트에서 사용할 수 있는 모든 값\r\n
\r\n\r\n**식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다** (규칙 준수하면 사용안해도 ㄱㅊ)\r\n```js\r\nvar person = {\r\n\tfirstName: 'Joo-young', // 식별자 네이밍 규칙을 준수한 프로퍼티 키\r\n\t'last-name': 'Lee', // 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용해 문자열 형태 유지 )\r\n last-name: 'Lee' // SyntaxError: Unexpected token ( 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키\r\n};\r\nconsole.log(person) // {firstName: 'Joo-young', last-name: 'Lee'}\r\n```\r\n
\r\n\r\n프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면 **암묵적 타입 변환** 을 통해 문자열이 된다.\r\n```js\r\nvar foo = {\r\n 0: 1,\r\n 1: 2,\r\n 2: 3,\r\n};\r\n\r\nconsole.log(foo); // { 0: 1, 1: 2, 2: 3 } <- 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다. \r\n```\r\n
\r\n이미 존재하는 프로퍼티 중복 선언시 나중에 선언한 프로퍼티가 덮어씌워진다. (에러가 발생하지 않는 것 주의하자)\r\n
\r\n\r\n```js\r\nvar foo = {\r\nname: 'Lee',\r\nname: 'Kim',\r\n}\r\nconsole.log(foo); // {name: 'Kim'}\r\n```\r\n\r\n## 메서드\r\n자바스크립트에서 사용할 수 있는 모든 값은 **프로퍼티 값**으로 사용 가능, 자바스크립트의 함수는 객체(일급 객체) 이다. 따라서 함수는 값으로 취급할 수 있기 때문에 **프로퍼티 값으로 사용할 수 있다.** \r\n\r\n프로퍼티 값이 함수인 경우, 일반 함수와 구분하기 위해, `메서드`라고 부른다. 즉 메서드는 객체에 묶여있는 함수를 의미한다.\r\n\r\n```js\r\nvar circle= {\r\n // 프로퍼티\r\n radius: 5,\r\n\r\n // 메서드\r\n getDiameter: function () {\r\n return 2 * this.radius;\r\n },\r\n};\r\n\r\nconsole.log(person.getDiameter()); // 10\r\n```\r\n## 프로퍼티 접근\r\n- 마침표 프로퍼티 접근 연산자(.)로 사용하는 **마침표 표기법**\r\n- 대괄호 프로퍼티 접근 연산자([...]) 사용하는 **대괄호 표기법**\r\n\r\n\t```js\r\n\tvar person = {\r\n\t\tname: 'Lee'\r\n\t};\r\n\r\n\t// 마침표 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(person.name); // Lee\r\n\r\n\t// 대괄호 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(persone['name']); // Lee\r\n\t```\r\n- 대괄호 표기법을 사용하는 경우 **접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열**이어야 한다.\r\n
\r\n- 대괄호 프로퍼티 접근 연산자 내에 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 **식별자로 해석**한다.\r\n- 객체에 존재하지 않는 프로퍼티에 접근하면 **undefined**를 반환한다.\r\n\r\n\t```js\r\n\t// 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석함\r\n\tconsole.log(person[name]); // ReferenceError: name is not defined\r\n\t// 객체에 존재하지 않는 프로퍼티에 접근하면 undefined반환\r\n\tconsole.log(person.age); // undefined\r\n\t```\r\n\r\n## 프로퍼티 동적 생성 & 삭제\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n// person 객체에 age는 존재x\r\n// 따라서 person객체에 age프로퍼티가 동적으로 생성되고 값이 할당된다.\r\nperson.age = 20; // { age: 20 } \r\nconsole.log(person); // { name: 'Lee', age: 20 }\r\n\r\ndelete person.age; // age 라는 프로퍼티 키가 존재하므로 해당 프로퍼티가 삭제된다.\r\ndelete person.address; // address이라는 프로퍼티 키는 없으므로 삭제 할 수 없지만, 에러는 발생하지 않는다.\r\n\r\nconsole.log(person); // { name: 'Lee' }\r\n```\r\n## ES6에서 추가된 객체 리터럴의 확장 기능\r\n\r\n\r\n### 프로퍼티 축약 표현\r\n```js\r\n// ES5\r\nvar x = 1, y=2;\r\n\r\nvar obj = {\r\n\tx:x,\r\n\ty:y\r\n};\r\nconsole.log(obj); // {x:1, y:2}\r\n\r\n// ES6(프로퍼티 축약 표현)\r\nlet x = 1, y = 2;\r\nconst obj = {x,y};\r\nconsole.log(obj);\r\n```\r\n### 계산된 프로퍼티 이름\r\n`ES5`\r\n```js\r\nvar prefix = \"prop\";\r\nvar i = 0;\r\n\r\nvar obj = {};\r\n\r\n// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성\r\n// '객체 외부'에서만 가능\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n`ES6`\r\n```js\r\nconst prefix = \"prop\";\r\nlet i = 0;\r\n\r\n// '객체 리터럴 내부'에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성\r\nconst obj = {\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n};\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n\r\n### 메서드 축약 표현\r\n`ES5`\r\n```js\r\nvar obj = {\r\n\tname: \"Lee\",\r\n\tsayHi: function () {\r\n\t\tconsole.log('Hi!' + this.name);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! Lee\r\n```\r\n`ES6`\r\n```js\r\nconst obj = {\r\n\tname: \"JY\",\r\n\t // 메서드 축약 표현\r\n\tsayHi() {\r\n\t\tconsole.log(`Hi! ${this.name}`);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! JY\r\n```\r\n메서드 축약 표현 으로 정의한 메서드는 프로퍼티에 할당한 함수 와 다르게 동작한다.\r\n(이후 자세히 살펴볼 예정)"},{"slug":"posts/Javascript/javascriptdeepdive11","title":"원시 값과 객체의 비교","date":"2024-04-26T14:30:51.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '원시 값과 객체의 비교'의 정리 내용입니다.","tags":["Dummy","JavaScript"],"content":"\r\n# 원시 값과 객체의 비교\r\n\r\n\r\n## 원시 타입 vs 객체 타입\r\n- 원시 타입의 값, 즉 `원시 값`은 **변경 불가능한 값(immutable value)** vs `객체(참조) 타입의 값`, 즉 객체는 **변경 가능한 값(mutable value)**이다.\r\n- `원시 값`을 변수에 할당하면 변수(확보된 메모리 공간)에는 **실제 값이 저장** vs `객체` 를 변수에 할당하면 변수(확보된 메모리 공간)에는 **참조 값이 저장**\r\n- `원시 값을 갖는 변수`를 다른 변수에 할당하면 원본의 **원시 값이 복사되어 전달**(**값에 의한 전달**) vs `객체를 가리키는 변수`를 다른 변수에 할당하면 **원본의 참조 값이 복사되어 전달**(**참조에 의한 전달**)\r\n\r\n## 원시 값\r\n\r\n**원시 값: 원시 타입의 값, 원시 값은 변경 불가능한 값**(`읽기 전용의 값(readonly)`)\r\n\r\n**❗ 변수와 값은 엄연히 다른것!**\r\n- `변수`는 하나의 값을 저장하기 위해 확보한 **메모리 공간 자체** 또는 그 **메모리 공간을 식별하기 위해 붙인 이름**\r\n- `값`은 변수에 저장된 **데이터 표현식이 평가되어 생성된 결과**\r\n- 변경 불가능한 것은 **값에 대한 진술**, 변수는 재할당을 통해, 변수 값을 변경(교체) 가능\r\n\r\n** 변수vs상수 **\r\n+ 변수는 언제든지 `재할당`을 통해 변수 값을 변경(교체)할 수 있다. 그래서 \"변수\"다.\r\n+ 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 `변수`라고 할 수 있다.\r\n+ 하지만, 상수는 단 한 번만 할당이 허용하므로 변수 값을 변경할 수 없다. (이를 변경 불가능한 값으로 동일시하면 안됨 상수는 **재할당이 금지된 변수**)\r\n\r\n### 불변성\r\n변경 불가능한 값인 **원시 값**은 값을 변경하는 것이 아닌, 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 값의 이러한 특성을 `불변성` 이라고 한다. \r\n\r\n**`불변성` 을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법**이 없다.\r\n\r\n### 문자열과 불변성\r\n자바스크립트는 개발자의 편의를 위해 문자열 타입을 원시 타입으로 제공한다.\r\n\r\n문자열은 유사 배열객체이면서 이터러블이므로 **배열과 유사하게 각 문자에 접근**할 수 있다.\r\n\r\n**유사 배열 객체란?**\r\n\r\n- 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있으며, length 프로퍼티를 갖는 객체\r\n- length 프로퍼티를 갖기 때문에 유사 배열 객체 이며, for 문으로 순회도 할 수 있다.\r\n\t```js\r\n\tvar str = 'string';\r\n\t// 유사배열이므로, 배열과 유사하게 인덱스를 사용해 각 문자로 접근\r\n\tconsole.log(str[0]);\r\n\t// 원시 값인 문자열이 객체처럼 동작\r\n\tconsole.log(str.length); //6\r\n\tconsole.log(str.toUpperCase()); //STRING\r\n\t```\r\n```js\r\nvar str = 'string'\r\n// 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근\r\n// 하지만 문자열은 원시 값이므로 변경할 수 없다. 이때 에러는 발생 x\r\nstr[0] = 'S'\r\nconsole.log(str)// string\r\n```\r\n이는 데이터의 신뢰성을 보장한다. 변수에 새로운 문자열을 재할당하는 것은 물론 가능\r\n\r\n### 값에 의한 전달\r\n```js\r\nvar score = 80;\r\nvar copy = score;\r\n\r\nscore = 100;\r\n\r\nconsole.log(score); // 100 (원본 값)\r\nconsole.log(copy); // 80 (복사한 값)\r\n```\r\nscore는 변수 값 80으로 평가 되므로, copy 변수에도 80이 할당된다. 이때 새로운 숫자 값 80이 생성되어 copy변수에 할당된다\r\n\r\n변수(copy)에는 할당되는 변수(score)의 **원시 값이 복사되어 전달**된다. \r\n 이를, `값에 의한 전달`이라고 한다.\r\n\r\ncopy와 score는 별개의 값으로써, 서로의 변수의 값에 어떠한 영향도 주지않음.\r\n\r\n또한,\r\n엄격하게 말하자면, 변수에는 값이 전달되는 것이 아니라, **메모리 주소가 전달되는 것이다.**\r\n이는 변수와 같은 식별자는 값이 아니라 **메모리 주소를 기억**하기 때문이다.\r\n> 이처럼 \"값에 의한 전달\"도 사실은 값을 전달하는 것이 아니라, 메모리 주소를 전달한다. 단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.\r\n\r\n하지만 중요한 것은,\r\n\r\n❗ **결국 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.**\r\n\r\n## 객체\r\n> 자바스크립트는 다른 객체지향 언어와는 달리, 클래스 없이 객체 생성가능하며, 객체가 생성된 이후라도 동적으로 프로퍼티와 메서드 추가가 가능하다. V8 엔진에서는 **히든 클래스**라는 방식을 사용한다.\r\n\r\n### 변경 가능한 값\r\n**객체(참조)타입의 값, 즉 객체는 변경 가능한 값**\r\n\r\n원시 값과 다르게, 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 **참조 값**에 접근한다!\r\n- `참조 값`: 생성된 객체가 저장된 메모리 공간의 주소, 그 자체\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n\r\n// person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다.\r\nconsole.log(person) //{name: \"Lee\"}\r\n```\r\n객체를 할당한 변수의 경우 \"변수는 객체를 가리키고(참조하고)있다\" 라고 표현한다.\r\n```person 변수는 {name: 'Lee'}를 가리키고(참조하고) 있다.```\r\n객체를 할당한 변수는 원시 값과 달리, 재할당 없이 객체를 직접 변경할 수 있다.\r\n즉, 재할당 없이 **프로퍼티를 동적으로 추가, 프로퍼티 값을 갱신, 프로퍼티 자체를 삭제도 가능**\r\n\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// 프로퍼티 값 갱신\r\nperson.name = \"Kim\";\r\n\r\n// 프로퍼티 값 동적 추가\r\nperson.address = \"Seoul\";\r\n\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n원시 값과는 다르게 **여러개의 식별자가 하나의 객체를 공유할 수 있다**라는 부작용이 있다.\r\n\r\n### 얕은 복사와 깊은 복사\r\n객체를 프로퍼티의 값으로 갖는 객체의 경우 \r\n- `얕은 복사`는 **한단계만 복사**하는 것을 말하며, 객체의 중첩되어있는 객체의 경우 참조 값을 복사한다.\r\n- `깊은 복사`는 **객체에 중첩되어 있는 객체까지 모두 복사**하며, **원시 값처럼 완전한 복사본을 만든다.**\r\n\r\n### 참조에 의한 전달\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n// 참조 값을 복사(얕은 복사)\r\nvar copy = person;\r\n```\r\nperson을 다른 변수(사본, copy)에 할당하면 **원본의 참조 값이 복사되어 전달**된다. 이를 **참조에 의한 전달** 이라고 한다.\r\n원본 person과 사본 copy는 동일한 참조 값을 가진다. 즉, 둘 모두 동일한 객체를 가리킨다. 이것은 **두 개의 식별자가 하나의 객체를 공유한다는 것을 의미**\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// \"참조 값\"을 \r\n복사, copy와 person이 동일한 참조 값을 갖는다.\r\nvar copy = person;\r\n// 동일한 객체 참조하므로\r\nconsole.log(copy === person); // true\r\n\r\n// copy를 통해 객체의 name 프로퍼티를 변경한다.\r\ncopy.name = \"Kim\";\r\n\r\n// person을 통해 객체의 address 프로퍼티를 동적 생성한다.\r\nperson.address = \"Seoul\";\r\n\r\n// copy와 person은 동일한 객체를 가리키므로 서로 영향을 주고받음\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\nconsole.log(copy); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n\"값에 의한 전달\"과 \"참조에 의한 전달\"은 **식별자가 기억하는 메모리 공간에 저장되어 있는 값을 전달한다는 면에서 동일**하다. 따라서 **\"참조에 의한 전달\"은 존재하지 않고 \"값에 의한 전달\"만이 존재한다고 할 수 있다.**"},{"slug":"posts/Javascript/javascriptdeepdive09","title":"자바스크립트 딥다이브: 09.타입 변환과 단축평가","date":"2024-04-22T12:00:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '타입 변환과 단축평가'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n# 타입 변환과 단축 평가\r\n개발자가 의도적으로 값의 타입을 변환하는 것: `명시적 타입 변환` or `타입캐스팅`\r\n\r\n개발자의 의도와는 상관없이 표현식을 평가하는 도중에 **자바스크립트 엔진에 의해 암묵적으로 타입이 변환**되는 것: `암묵적 타입 변환` or `타입강제 변환`\r\n\r\n## 암묵적 타입 변환\r\n> 자바스크립트 엔진이 표현식을 평가할 때 개발자의 의도와는 상관없이 `코드의 문맥을 고려해 암묵적으로` 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 있다.\r\n\r\n암묵적 타입 변환은 문자, 숫자, 불리언 같은 **원시 타입**중 하나로 타입을 자동 변환한다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// 숫자 타입 \r\n0+'' // '0'\r\nNaN + '' // 'NaN'\r\nInfinity + '' // 'Infinity'\r\n\r\n// 불리언 타입\r\ntrue + '' // 'true'\r\n\r\n// null 타입\r\nnull + '' // 'null'\r\n\r\n// undefined 타입\r\nundefined + ''; // \"undefined\"\r\n\r\n// 심벌 타입\r\n(Symbol()) + ''; // TypeError: Cannot convert a Symbol value to a string\r\n\r\n// 객체 타입\r\n({}) + ''; // \"[object Object]\"\r\nMath + ''; // \"[object Math]\"\r\n[] + ''; // \"\"\r\n[10, 20] + ''; // \"10,20\"\r\n(function(){}_ + ''; // \"function(){}\"\r\nArray + ''; // \"function Array() { [native code] }\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// 문자열 타입(+ 단항연산자는 피연산자가 숫자타입이 아니면 숫자 타입으로 암묵적 타입 변환 수행)\r\n+'' // -> 0\r\n+'0' // 0\r\n+'string' // -> NaN\r\n\r\n// 불리언 타입\r\n+true // -> 1\r\n\r\n// null 타입\r\n+null // -> 0\r\n\r\n//undefined 타입\r\n+undefined // -> NaN\r\n\r\n// 심벌 타입\r\n+Symbol(); // TypeError: Cannot convert a Symbol value to a number\r\n\r\n// 객체 타입\r\n+{}; // -> NaN\r\n+[]; // -> 0\r\n+[10, 20]; // NaN\r\n+function () {}; // NaN\r\n```\r\n**빈 문자열 (''), 빈 배열([]), null, false**는 **0**으로, **true**는 **1**로 변환된다. **객체와 빈 배열이 아닌 배열,undefined**는 변환되지 않아 **NaN**이 된다는 것에 주의하자\r\n\r\n### 불리언 타입으로 변환\r\nif문, for문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가 되어야 하는 표현식이다.\r\n```js\r\n// 모두 코드 블록 실행됨\r\nif(!false) console.log(false + ' is falsy value')\r\nif(!undefined) console.log(undefined + 'is falsy value')\r\nif(!NaN) console.log(NaN + 'is falsy value');\r\nif(!null) console.log(null + 'is falsy value');\r\n```\r\n자바스크립트 엔진은 불리언 타입이 아닌 값을 `Truthy 값(참으로 평가되는 값)` or `Falsy 값(거짓으로 평가되는 값)` 으로 구분한다.\r\n\r\n**자바스크립트 엔진이 Falsy 값으로 판단하는 값**\r\n+ false\r\n+ undefined\r\n+ null\r\n+ 0, -0\r\n+ NaN\r\n+ ''(빈 문자열)\r\n\r\n## 명시적 타입 변환\r\n**개발자의 의도에 따라 명시적으로 타입을 변환하는 것** \r\n\r\n**표준 빌트인 함수(String,Number,Boolean)**을 new연산자 없이 호출하는 방법과 **빌트인 메서드를 사용하는 방법**, 그리고 **암묵적 타입 변환**을 이용하는 방법이 있다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// String 생성자 함수를 new 연산 없이 호출\r\nString(1); // -> \"1\"\r\nString(NaN); // -> \"NaN\"\r\nString(Infinity); // -> \"Infinity\"\r\nString(false); // -> \"false\"\r\n\r\n// Object.prototype.toString 메서드를 사용하는 방법\r\n(NaN).toString() // -> 'NaN'\r\n(true).toString() // -> 'true'\r\n\r\n// 문자열 연결 연산자\r\nNaN + '' // -> \"NaN\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// Number 생성자 함수를 new 연산자 없이 호출하는 방법\r\nNumber('0') // -> 0\r\nNumber(10.53) // -> 10.53\r\n\r\n// parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)\r\nparseInt('0') // -> 0\r\nparseFloat('10.53') // -> 10.53\r\n\r\n// + 단항 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n+'0'\r\n+'-1'\r\n// 불리언 타입 => 숫자 타입\r\n+true; //->1\r\n\r\n// * 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n'0' * 1;\r\n'-1' * 1; //1\r\n// 불리언 타입 => 숫자 타입\r\ntrue * 1; //->1\r\n```\r\n\r\n### 불리언 타입으로 변환\r\n```js\r\n// 1. Boolean 생성자 함수를 new 키워드 없이 호출하는 방법\r\nBoolean('x'); // true\r\n\r\nBoolean(0) // false\r\nBoolean(NaN) // false\r\nBoolean(Infinity) // true\r\n\r\nBoolean(null) // false\r\nBoolean(undefined) // false\r\n\r\nBoolean({}) //True\r\n\r\n//2. !(부정 논리 연산자) 두 번 사용\r\n!!'x'; // true ( !(!'x') === !(false) -> true )\r\n```\r\n\r\n## 단축 평가\r\n> `단축 평가` : 논리 연산의 결과를 결정하는 피연산자를 `타입 변환하지 않고 그대로 반환`\r\n- 단축 평가는 표현식을 평가하는 도중에 평가결과가 확정 경우 → 나머지 평가 과정을 생략한다.\r\n단축 평가 표현식\r\n\r\n| 단축 평가 표현식 | 평가 결과 |\r\n|--|--|\r\n|true ll anything | true |\r\n|false ll anything | anything |\r\n| true && anything | anything|\r\n| false && anything | false |\r\n\r\n### 논리 연산자를 단축 평가\r\n`논리곱(&&)` 에서 논리 연산의 결과를 결정하는 것은 **두 번째 피연산자**\r\n```js\r\n'Cat' && 'Dog'; // Dog\r\n```\r\n\r\n`논리곱(&&) 연산자` 는 두 개의 피연산자가 `모두 true로 평가될 때 true를 반환`, `좌항 -> 우항으로 평가가 진행` \r\n\r\n\r\n`논리합(||)` 에서 논리 연산의 결과를 결정하는 것은 **첫 번째 피연산자** 그러므로 첫 번째 연산자 그대로 반환\r\n```js\r\n'Cat' || 'Dog' // Cat\r\n```\r\n\r\n`논리합 (||) 연산자` 는 `두 개의 피연자 중 하나만 true로 평가되어도 true로 반환`하며, 역시 `좌항에서 우항으로 평가가 진행`\r\n\r\n ```js\r\n // 논리합(||) 연산\r\n\"Cat\" || \"Dog\"; // \"Cat\"\r\nfalse || \"Dog\"; // \"Dog\"\r\n\"Cat\" || false; // \"Cat\"\r\n\r\n// 논리곱(&&) 연산\r\n\"Cat\" && \"Dog\"; // \"Dog\"\r\nfalse && \"Dog\"; // \"false\"\r\n\"Cat\" && false; // \"false\"\r\n ```\r\n **단축평가 사용 예시**\r\n - **if 문대체**\r\n논리 연산자 단축평가를 통해서 if문도 대체할 수 있으며, 값 할당시 보다 더 깔끔할 수 있다.\r\n\t```js\r\n\tvar done = false;\r\n\tvar message = \"\";\r\n\r\n\t// 조건문으로 값 할당\r\n\tif (!done) message = \"미완료\";\r\n\r\n\tmeessage = done || \"미완료\";\r\n\tconsole.log(message) // 미완료\r\n\t```\r\n- **객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null또는 undefined일 경우** \r\n\r\n\t이러한 경우 타입 에러가 발생한다. 하지만, 단축평가를 사용하면 에러 발생 x\r\n\t```js\r\n\t// elem이 null 또는 undefined같은 Falsy값이면 elem으로 평가\r\n\t// elem이 Truthy값이면 elem.value 값으로 평가\r\n\tvar elem = null;\r\n\tvar value = elem && elem.value // null\r\n\t```\r\n- **함수 매개변수에 기본값을 설정**\r\n함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 단축평가 사용해 매개변수에 기본값을 설정한다면 에러 방지 가능\r\n\t```js\r\n\t// 단축 평가를 사용한 매개변수의 기본값 설정\r\n\tfunction getStringLength(str) {\r\n\t str = str || \"\";\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\tgetStringLength('hi'); //2\r\n\t// Es6의 매개변수 default parameter 설정\r\n\tfunction getStringLength(str = \"\") {\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\t```\r\n\r\n## 옵셔널 체이닝 연산자\r\n`?` : 좌항의 피 연산자가 null 또는 undefined인 경우 `undefined 반환`, 그렇지않으면 `우항의 포로퍼티 참조`\r\n```js\r\nvar elem = null;\r\nvar value = elem?.value; // undefined\r\n```\r\n- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 안전하게 참조할 때 유용\r\n- 옵셔널 체이닝 도입 이전에는 `논리곱(&&)을 사용한 단축 평가`를 통해 변수가 null 또는 undefined 인지 확인했음\r\n```js\r\n// 좌항이 Falsy라면 좌항 그대로 반환(0이나 ''반환 할 때도)\r\nvar str = \"\"; //\r\nvar length = str && str.length; // ''\r\n\r\n// 좌항 피연산자가 Falsy값이라도 null 또는 undefined 만 아니면, 우항의 프로퍼티를 참조한다.\r\nvar str = \"\";\r\nvar length = str?.length; // 0\r\n```\r\n\r\n## null 병합 연산자 \r\n`??` : 좌항의 피연산자가 **null또는 undefined인 경우** `우항의 피연산자 반환` 그렇지 않으면 `좌항 피연산자 반환`한다.\r\n```js\r\nvar foo = null ?? \"default string\"; // \"default string\"\r\n```\r\n- 변수에 기본값을 설정할 때 유용하며, 그전에는 논리합(||)을 사용한 단축평가로 변수에 기본값 설정\r\n\t```js\r\n\t// 좌항의 피연산자가 Falsy값이면, 우항의 피연산자를 반환 \r\n\t//(Falsy 값인 0 이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생한다.)\r\n\tvar foo = \"\" || \"default string\"; // \"default string\"\r\n\r\n\t// 좌항의 피연산자가 Falsy값이라도 null 또는 undefined 가 아니면, 좌항의 피연산자를 그대로 반환한다.\r\n\tvar foo = \"\" ?? \"default string\"; // ''\r\n\t```"}]},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/bfs.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/bfs.json similarity index 100% rename from _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/bfs.json rename to _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/bfs.json diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/deepdive.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/deepdive.json similarity index 73% rename from _next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/deepdive.json rename to _next/data/-8eDYE39v-ava91BZqEI9/posts/tag/deepdive.json index 675f145..483871a 100644 --- a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/deepdive.json +++ b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/deepdive.json @@ -1 +1 @@ -{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy"],"currentTag":"deepdive","posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n"}]},"__N_SSG":true} \ No newline at end of file +{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy"],"currentTag":"deepdive","posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n### 파이버 트리\r\n파이버 트리는 하나는 **현재 모습을 담은** 파이버 트리, 다른 하나는 작업 중인 상태를 나타내는 **workInProgress** 트리다. 작업이 끝나면, 리액트는 **단순히 포인터만 변경**해 workInProgress 트리를 **현재 트리**로 바꿔버린다. 이러한 기술을 **더블 버퍼링**이라고 한다.\r\n\"트리를\r\n\r\n리액트에서는 미처 다 그리지 못한 모습을 노출시키지 않기 위해 (불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는데, 이러한 더블 버퍼링을 위해 트리가 두 개 존재하며, 이 더블 버퍼링은 커밋 단계에서 수행된다.\r\n\r\n- 먼저 현재 UI 렌더링을 위해 존재 하는 **current**를 기준으로 모든 작업이 시작된다.\r\n- 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터로 새로운 **workInProgress** 트리를 빌드하기 시작한다.\r\n- 빌드하는 작업이 끝나면 다음 렌더링에 이 트리를 사용한다.\r\n- 빌드된 workInProgress 트리가 UI에 최종적으로 렌더링되어 반영이 완료되면 **current가 이 workProgress로 변경된다**.\r\n\r\n### 파이버의 작업 순서\r\n일반적인 파이버 노드의 생성흐름은 다음과 같다.\r\n1. 리액트는 `beginWork()` 함수를 실행해 파이버 작업을 수행하고, 더 이상 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작된다.\r\n2. 1번의 작업이 끝나면 `completeWork( )` 함수를 실행해 파이버 작업을 완료한다.\r\n3. 형제가 있다면 형제로 넘어간다.\r\n4. 2,3번이 끝난다면 `return`으로 돌아가 자신의 작업이 완료되었음을 알린다.\r\n\r\n이러한 작업으로 트리가 생성이 되었는데, setState 등으로 업데이트가 발생하면 어떻게 될까? 이미 앞서 만든 current트리가 존재하고, setState로 업데이트 요청을 받아 workInProgress트리를 다시 빌드하기 시작한다. \r\n\r\n최초 렌더링 시에는 모든 파이버를 새로 만들어야 했지만 이제는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고, **기존 파이버에서 업데이트 된 props를 받아 파이버 내부에서 처리한다**.\r\n\r\n이처럼, 재조정 작업 때마다 새롭게 파이버 자바스크립트 객체를 만드는 것 이 아닌, 기존의 객체를 재활용하기 위해 내부 속성값만 초기화하거나 바꾸는 형태로 트리를 업데이트한다.\r\n\r\n과거에는 이 작업을 동기식으로 처리했고, 트리 업데이트 과정 및 새로운 트리를 만드는 작업은 동기식이고 중단될 수 없다. 그러나 현재는 우선순위가 높은 다른 업데이트가 오면 현재 업데이트 작업을 일시 중단하거나 새로 만들거나 폐기할 수 있으며 작업 단위를 파이버 단위로 나누어 우선순위를 할당하는 것 역시 가능하다.\r\n\r\n### 파이버와 가상 DOM\r\n리액트 컴포넌트에 대한 정보를 **1:1로 가지고 있는 것**이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 **비동기**로 이뤄진다. 이와 달리 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 이뤄져야 하기에, 메모리 상에서 이 작업을 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용하는 것이다.\r\n\r\n> 사실 가상 DOM은 오직 웹 어플리케이션에서만 통용되는 개념이고, 리액트 파이버는 리액트 네이티브와 같은 브라우저가 아닌 환경에서도 사용할 수 있기에 엄밀히 하면 파이버와 가상 DOM은 동일한 개념이 아니다. \r\n\r\n### 정리\r\n결국 가상 DOM과 리액트의 핵심은 **브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는 것**이다. \r\n\r\n화면에 표시되는 UI를 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다."}]},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/dfs.json b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/dfs.json new file mode 100644 index 0000000..87f0039 --- /dev/null +++ b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/dfs.json @@ -0,0 +1 @@ +{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy"],"currentTag":"dfs","posts":[{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0 **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n### 파이버 트리\r\n파이버 트리는 하나는 **현재 모습을 담은** 파이버 트리, 다른 하나는 작업 중인 상태를 나타내는 **workInProgress** 트리다. 작업이 끝나면, 리액트는 **단순히 포인터만 변경**해 workInProgress 트리를 **현재 트리**로 바꿔버린다. 이러한 기술을 **더블 버퍼링**이라고 한다.\r\n\"트리를\r\n\r\n리액트에서는 미처 다 그리지 못한 모습을 노출시키지 않기 위해 (불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는데, 이러한 더블 버퍼링을 위해 트리가 두 개 존재하며, 이 더블 버퍼링은 커밋 단계에서 수행된다.\r\n\r\n- 먼저 현재 UI 렌더링을 위해 존재 하는 **current**를 기준으로 모든 작업이 시작된다.\r\n- 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터로 새로운 **workInProgress** 트리를 빌드하기 시작한다.\r\n- 빌드하는 작업이 끝나면 다음 렌더링에 이 트리를 사용한다.\r\n- 빌드된 workInProgress 트리가 UI에 최종적으로 렌더링되어 반영이 완료되면 **current가 이 workProgress로 변경된다**.\r\n\r\n### 파이버의 작업 순서\r\n일반적인 파이버 노드의 생성흐름은 다음과 같다.\r\n1. 리액트는 `beginWork()` 함수를 실행해 파이버 작업을 수행하고, 더 이상 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작된다.\r\n2. 1번의 작업이 끝나면 `completeWork( )` 함수를 실행해 파이버 작업을 완료한다.\r\n3. 형제가 있다면 형제로 넘어간다.\r\n4. 2,3번이 끝난다면 `return`으로 돌아가 자신의 작업이 완료되었음을 알린다.\r\n\r\n이러한 작업으로 트리가 생성이 되었는데, setState 등으로 업데이트가 발생하면 어떻게 될까? 이미 앞서 만든 current트리가 존재하고, setState로 업데이트 요청을 받아 workInProgress트리를 다시 빌드하기 시작한다. \r\n\r\n최초 렌더링 시에는 모든 파이버를 새로 만들어야 했지만 이제는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고, **기존 파이버에서 업데이트 된 props를 받아 파이버 내부에서 처리한다**.\r\n\r\n이처럼, 재조정 작업 때마다 새롭게 파이버 자바스크립트 객체를 만드는 것 이 아닌, 기존의 객체를 재활용하기 위해 내부 속성값만 초기화하거나 바꾸는 형태로 트리를 업데이트한다.\r\n\r\n과거에는 이 작업을 동기식으로 처리했고, 트리 업데이트 과정 및 새로운 트리를 만드는 작업은 동기식이고 중단될 수 없다. 그러나 현재는 우선순위가 높은 다른 업데이트가 오면 현재 업데이트 작업을 일시 중단하거나 새로 만들거나 폐기할 수 있으며 작업 단위를 파이버 단위로 나누어 우선순위를 할당하는 것 역시 가능하다.\r\n\r\n### 파이버와 가상 DOM\r\n리액트 컴포넌트에 대한 정보를 **1:1로 가지고 있는 것**이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 **비동기**로 이뤄진다. 이와 달리 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 이뤄져야 하기에, 메모리 상에서 이 작업을 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에 적용하는 것이다.\r\n\r\n> 사실 가상 DOM은 오직 웹 어플리케이션에서만 통용되는 개념이고, 리액트 파이버는 리액트 네이티브와 같은 브라우저가 아닌 환경에서도 사용할 수 있기에 엄밀히 하면 파이버와 가상 DOM은 동일한 개념이 아니다. \r\n\r\n### 정리\r\n결국 가상 DOM과 리액트의 핵심은 **브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는 것**이다. \r\n\r\n화면에 표시되는 UI를 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다."}]},"__N_SSG":true} \ No newline at end of file diff --git "a/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/\353\260\261\354\244\200.json" "b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/\353\260\261\354\244\200.json" new file mode 100644 index 0000000..6a8344e --- /dev/null +++ "b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/\353\260\261\354\244\200.json" @@ -0,0 +1 @@ +{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy","all"],"currentTag":"백준","posts":[{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nstones\r\nk\r\nresult\r\n\r\n\r\n \r\n[2, 4, 5, 3, 2, 1, 4, 2, 5, 1]\r\n3\r\n3\r\n\r\n\r\n \r\n\r\n##### **입출력 예에 대한 설명**\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/64062.%E2%80%85%EC%A7%95%EA%B2%80%EB%8B%A4%EB%A6%AC%E2%80%85%EA%B1%B4%EB%84%88%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88%EC%97%90-%EB%8C%80%ED%95%9C-%EC%84%A4%EB%AA%85)\r\n\r\n----------\r\n\r\n**입출력 예 #1**\r\n\r\n첫 번째 친구는 다음과 같이 징검다리를 건널 수 있습니다. \r\n![1.png](1.png)\r\n\r\n첫 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n두 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![2.png](2.png)\r\n\r\n두 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n세 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![3.png](3.png)\r\n\r\n세 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n네 번째 친구가 징검다리를 건너려면, 세 번째 디딤돌에서 일곱 번째 디딤돌로 네 칸을 건너뛰어야 합니다. 하지만 k = 3 이므로 건너뛸 수 없습니다. \r\n![4.png](4.png)\r\n\r\n따라서 최대 3명이 디딤돌을 모두 건널 수 있습니다.\r\n\r\n## 접근 방법\r\n브루트 포스로 1명씩 건너기에는, stones 배열의 크기가 최대 200,000이고, stones 배열의 각 원소들의 값 역시 최대 200,000,000이기 때문에, 시간 초과가 날 확률이 높다고 생각했고(사실 그렇게 쉬우면 lv3 일리가 없지), 아니나 다를까 시간초과가 났다. \r\n\r\n고민하다가 도저히 해결책이 안나와서 찾아보니 `이분탐색`을 사용하여 풀 수 있었다.\r\n\r\n- 건널 수 있는 인원의 최소는 1명, 최대는 max(stones)명이다. 모든 돌들의 합이 같거나, 다르다 하더라도 건널수 없는 곳이 k이하면 건널 수 있기 때문이다. \r\n- 따라서 start = 1 end = max(stones)로 이분탐색을 시작할 수 있다.\r\n\r\nmid 값만큼의 사람이 건널 수 있는지 확인하기 위한 check함수는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n\t # 밟을 수 없으므로 건너뛰어야하는 횟수를 늘린다.\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n # 밟을 수 있으므로 최대 건너뛰는 횟수를 초기화시킨다.\r\n else:\r\n cnt = 0;\r\n # 건너뛰는 횟수가 k보다 크거나 같으면 안되므로 False 리턴 \r\n if cnt>=k:\r\n return False;\r\n return True;\r\n```\r\n건널 수 있다면 mid보다 큰 범위에서 값을 찾아야하므로 start를 mid+1로 갱신하고, 반대라면, mid보다 작은 범위에서 값을 찾아야하므로 end를 mid-1로 갱신한다.\r\n \r\ncheck 시간 복잡도는 O(N)이고 이분탐색을 했을 때 O(logN)의 시간복잡도가 나오므로, 총 O(NlogN)의 시간 복잡도가 나오므로, 시간초과가 나지 않는다.\r\n\r\n전체 코드는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n else:\r\n cnt = 0;\r\n if cnt>=k:\r\n return False;\r\n return True;\r\n\r\ndef solution(stones, k):\r\n start,end = 1,max(stones);\r\n answer = 0;\r\n while start<=end:\r\n mid = (start + end) // 2;\r\n if check(stones, mid,k):\r\n start = mid+1;\r\n else:\r\n answer = mid;\r\n end = mid-1; \r\n return answer;\r\n```\r\n\r\n## 느낀 점\r\n이분탐색 문제를 많이는 아니더라도 어느정도는 풀어봤다고 생각했는데, 이 문제에서 이분탐색으로 푸는 아이디어를 떠올리지 못해서 아쉽다. \r\n\r\n또한 처음에 위에 코드의 6번째줄에서 else문을 쓰지않고, 이러한 코드로 제출하여서 시간초과가 났다.\r\n```python\r\nif (stone - mid) <= 0:\r\n\tcnt += 1;\r\nif (stone - mid)>0:\r\n\tcnt = 0;\r\n```\r\nㅎㅎ.. 사실 위와 같은 경우에서 if else문을 쓰는 것이 기본인데, 그래도 시간초과가 날 수 있는 직접적인 원인까지는 되지 않을 거라고 안일하게 생각해서 코드를 짠 게 화근이었다. 기본을 지키자!"}]},"__N_SSG":true} \ No newline at end of file diff --git "a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json" "b/_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json" similarity index 100% rename from "_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json" rename to "_next/data/-8eDYE39v-ava91BZqEI9/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json" diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/index.json b/_next/data/r3TVFGStx9-VzPRjNWTfb/index.json deleted file mode 100644 index f59b79c..0000000 --- a/_next/data/r3TVFGStx9-VzPRjNWTfb/index.json +++ /dev/null @@ -1 +0,0 @@ -{"pageProps":{"posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n"},{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nrectangle\r\ncharacterX\r\ncharacterY\r\nitemX\r\nitemY\r\nresult\r\n\r\n\r\n \r\n[[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]]\r\n1\r\n3\r\n7\r\n8\r\n17\r\n\r\n\r\n[[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]]\r\n9\r\n7\r\n6\r\n1\r\n11\r\n\r\n\r\n[[1,1,5,7]]\r\n1\r\n1\r\n4\r\n7\r\n9\r\n\r\n\r\n[[2,1,7,5],[6,4,10,10]]\r\n3\r\n1\r\n7\r\n10\r\n15\r\n\r\n\r\n[[2,2,5,5],[1,3,6,4],[3,1,4,6]]\r\n1\r\n4\r\n6\r\n3\r\n10\r\n\r\n\r\n \r\n\r\n##### 입출력 예 설명\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/87694.%E2%80%85%EC%95%84%EC%9D%B4%ED%85%9C%E2%80%85%EC%A4%8D%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88-%EC%84%A4%EB%AA%85)\r\n\r\n입출력 예 #1\r\n\r\n![rect_5.png](6.png)\r\n\r\n캐릭터 위치는 (1, 3)이며, 아이템 위치는 (7, 8)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #2\r\n\r\n![rect_7.png](7.png)\r\n\r\n캐릭터 위치는 (9, 7)이며, 아이템 위치는 (6, 1)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #3\r\n\r\n[![rect_8.png](8.png)]\r\n\r\n캐릭터 위치는 (1, 1)이며, 아이템 위치는 (4, 7)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n## 구현 방법\r\n### 전체 직사각형들을 합친 것의 바깥쪽 테두리만 돌게하려면 어떻게 하는가?\r\n- rectangle을 순회하면서 범위 중 직사각형 내부는 0으로 테두리는 1로 board값을 갱신한다.\r\n- 이 때, 만일 `다른 직사각형의 내부안에 현재 직사각형의 테두리가 있지 않을 경우`에만 board를 1로 갱신한다. \r\n### 예외 사항\r\n![exception.png](exception.png)\r\n좌표가 인접한 경우 위와 같이 의도하지 않은 경우를 초래할 수도 있다.\r\n\r\n따라서 이를 해결하기 위해 모든 좌표의 값을 **2배**씩 해주어야 한다.\r\n\r\n이를 모두 반영하여 board 테이블을 만들면,\r\n\r\n```python\r\nboard = [[-1 for _ in range(102)] for _ in range(102)];\r\nfor r in rectangle:\r\n\t# map 객체를 통해 모든 좌표값에 2배\r\n\tx1,y1,x2,y2 = map(lambda x: x*2,r);\r\n for i in range(x1,x2+1):\r\n for j in range(y1,y2+1):\r\n\t # 직사각형 내부의 경우 0으로 개신\r\n if x1 **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n"},{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nrectangle\r\ncharacterX\r\ncharacterY\r\nitemX\r\nitemY\r\nresult\r\n\r\n\r\n \r\n[[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]]\r\n1\r\n3\r\n7\r\n8\r\n17\r\n\r\n\r\n[[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]]\r\n9\r\n7\r\n6\r\n1\r\n11\r\n\r\n\r\n[[1,1,5,7]]\r\n1\r\n1\r\n4\r\n7\r\n9\r\n\r\n\r\n[[2,1,7,5],[6,4,10,10]]\r\n3\r\n1\r\n7\r\n10\r\n15\r\n\r\n\r\n[[2,2,5,5],[1,3,6,4],[3,1,4,6]]\r\n1\r\n4\r\n6\r\n3\r\n10\r\n\r\n\r\n \r\n\r\n##### 입출력 예 설명\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/87694.%E2%80%85%EC%95%84%EC%9D%B4%ED%85%9C%E2%80%85%EC%A4%8D%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88-%EC%84%A4%EB%AA%85)\r\n\r\n입출력 예 #1\r\n\r\n![rect_5.png](6.png)\r\n\r\n캐릭터 위치는 (1, 3)이며, 아이템 위치는 (7, 8)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #2\r\n\r\n![rect_7.png](7.png)\r\n\r\n캐릭터 위치는 (9, 7)이며, 아이템 위치는 (6, 1)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #3\r\n\r\n[![rect_8.png](8.png)]\r\n\r\n캐릭터 위치는 (1, 1)이며, 아이템 위치는 (4, 7)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n## 구현 방법\r\n### 전체 직사각형들을 합친 것의 바깥쪽 테두리만 돌게하려면 어떻게 하는가?\r\n- rectangle을 순회하면서 범위 중 직사각형 내부는 0으로 테두리는 1로 board값을 갱신한다.\r\n- 이 때, 만일 `다른 직사각형의 내부안에 현재 직사각형의 테두리가 있지 않을 경우`에만 board를 1로 갱신한다. \r\n### 예외 사항\r\n![exception.png](exception.png)\r\n좌표가 인접한 경우 위와 같이 의도하지 않은 경우를 초래할 수도 있다.\r\n\r\n따라서 이를 해결하기 위해 모든 좌표의 값을 **2배**씩 해주어야 한다.\r\n\r\n이를 모두 반영하여 board 테이블을 만들면,\r\n\r\n```python\r\nboard = [[-1 for _ in range(102)] for _ in range(102)];\r\nfor r in rectangle:\r\n\t# map 객체를 통해 모든 좌표값에 2배\r\n\tx1,y1,x2,y2 = map(lambda x: x*2,r);\r\n for i in range(x1,x2+1):\r\n for j in range(y1,y2+1):\r\n\t # 직사각형 내부의 경우 0으로 개신\r\n if x1\r\n \r\nstones\r\nk\r\nresult\r\n\r\n\r\n \r\n[2, 4, 5, 3, 2, 1, 4, 2, 5, 1]\r\n3\r\n3\r\n\r\n\r\n \r\n\r\n##### **입출력 예에 대한 설명**\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/64062.%E2%80%85%EC%A7%95%EA%B2%80%EB%8B%A4%EB%A6%AC%E2%80%85%EA%B1%B4%EB%84%88%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88%EC%97%90-%EB%8C%80%ED%95%9C-%EC%84%A4%EB%AA%85)\r\n\r\n----------\r\n\r\n**입출력 예 #1**\r\n\r\n첫 번째 친구는 다음과 같이 징검다리를 건널 수 있습니다. \r\n![1.png](1.png)\r\n\r\n첫 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n두 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![2.png](2.png)\r\n\r\n두 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n세 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![3.png](3.png)\r\n\r\n세 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n네 번째 친구가 징검다리를 건너려면, 세 번째 디딤돌에서 일곱 번째 디딤돌로 네 칸을 건너뛰어야 합니다. 하지만 k = 3 이므로 건너뛸 수 없습니다. \r\n![4.png](4.png)\r\n\r\n따라서 최대 3명이 디딤돌을 모두 건널 수 있습니다.\r\n\r\n## 접근 방법\r\n브루트 포스로 1명씩 건너기에는, stones 배열의 크기가 최대 200,000이고, stones 배열의 각 원소들의 값 역시 최대 200,000,000이기 때문에, 시간 초과가 날 확률이 높다고 생각했고(사실 그렇게 쉬우면 lv3 일리가 없지), 아니나 다를까 시간초과가 났다. \r\n\r\n고민하다가 도저히 해결책이 안나와서 찾아보니 `이분탐색`을 사용하여 풀 수 있었다.\r\n\r\n- 건널 수 있는 인원의 최소는 1명, 최대는 max(stones)명이다. 모든 돌들의 합이 같거나, 다르다 하더라도 건널수 없는 곳이 k이하면 건널 수 있기 때문이다. \r\n- 따라서 start = 1 end = max(stones)로 이분탐색을 시작할 수 있다.\r\n\r\nmid 값만큼의 사람이 건널 수 있는지 확인하기 위한 check함수는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n\t # 밟을 수 없으므로 건너뛰어야하는 횟수를 늘린다.\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n # 밟을 수 있으므로 최대 건너뛰는 횟수를 초기화시킨다.\r\n else:\r\n cnt = 0;\r\n # 건너뛰는 횟수가 k보다 크거나 같으면 안되므로 False 리턴 \r\n if cnt>=k:\r\n return False;\r\n return True;\r\n```\r\n건널 수 있다면 mid보다 큰 범위에서 값을 찾아야하므로 start를 mid+1로 갱신하고, 반대라면, mid보다 작은 범위에서 값을 찾아야하므로 end를 mid-1로 갱신한다.\r\n \r\ncheck 시간 복잡도는 O(N)이고 이분탐색을 했을 때 O(logN)의 시간복잡도가 나오므로, 총 O(NlogN)의 시간 복잡도가 나오므로, 시간초과가 나지 않는다.\r\n\r\n전체 코드는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n else:\r\n cnt = 0;\r\n if cnt>=k:\r\n return False;\r\n return True;\r\n\r\ndef solution(stones, k):\r\n start,end = 1,max(stones);\r\n answer = 0;\r\n while start<=end:\r\n mid = (start + end) // 2;\r\n if check(stones, mid,k):\r\n start = mid+1;\r\n else:\r\n answer = mid;\r\n end = mid-1; \r\n return answer;\r\n```\r\n\r\n## 느낀 점\r\n이분탐색 문제를 많이는 아니더라도 어느정도는 풀어봤다고 생각했는데, 이 문제에서 이분탐색으로 푸는 아이디어를 떠올리지 못해서 아쉽다. \r\n\r\n또한 처음에 위에 코드의 6번째줄에서 else문을 쓰지않고, 이러한 코드로 제출하여서 시간초과가 났다.\r\n```python\r\nif (stone - mid) <= 0:\r\n\tcnt += 1;\r\nif (stone - mid)>0:\r\n\tcnt = 0;\r\n```\r\nㅎㅎ.. 사실 위와 같은 경우에서 if else문을 쓰는 것이 기본인데, 그래도 시간초과가 날 수 있는 직접적인 원인까지는 되지 않을 거라고 안일하게 생각해서 코드를 짠 게 화근이었다. 기본을 지키자!"},{"slug":"posts/Javascript/javascriptdeepdive10","title":"객체 리터럴","date":"2024-04-29T15:33:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '객체 리터럴'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n\r\n# 객체 리터럴\r\n\r\n## 객체란?\r\n\r\n> 자바스크립트는 `객체`기반의 프로그래밍 언어이며 자바스크립트를 구성하는 거의 `모든 것`이 객체이다.\r\n\r\n- 원시타입의 값, 원시 값은 변경 불가능 한 값이지만, 객체 타입의 값, 즉 객체는 변경가능한 값이다.\r\n\r\n- 객체는 0개 이상의 `프로퍼티`로 구성된 집합, 프로퍼티는 `키(key): 값(value)`로 구성(**함수도 프로퍼티 값으로 사용 가능!**)\r\n- - 프로퍼티: 객체의 상태를 나타내는 값(data)\r\n\t\r\n - 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작\r\n\r\n객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 `객체지향 프로그래밍` 이라고 함.\r\n\r\n## 객체리터럴에 의한 객체 생성\r\n```\r\n 인스턴스: 클래스에 의해 생성되어 메모리에 저장된 실체, 객체는 클래스와 인스턴스를 포함한 개념, 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다.\r\n ```\r\n자바스크립트는 **프로토타입 객체지향 언어** 로서, 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다.\r\n\r\n- 객체 리터럴\r\n- Object 생성자 함수\r\n- 생성자 함수\r\n- Object.create 메서드\r\n- 클래스(ES6)\r\n\r\n객체 리터럴은 **중괄호**( `{ ... }` ) 내에 0개 이상의 프로퍼티를 정의한다. **변수에 할당되는 시점**에 자바스크립트 엔진은 **객체 리터럴을 해석**해 객체를 생성한다.\r\n```js\r\nvar person = {\r\n name: \"Wi\",\r\n sayHello: function () {\r\n console.log(`Hello My name is ${this.name}`);\r\n },\r\n};\r\n\r\nconsole.log(typeof person); // object\r\nconsole.log(person); // { name: 'Wi', sayHello: [Function: sayHello] }\r\n```\r\n중괄호 내에 프로퍼티 정의하지 않으면 **빈 객체** 생성\r\n\r\n## 프로퍼티\r\n**객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.**\r\n```js\r\nvar person = {\r\n name: \"LEE\", // 프로퍼티 키는 name, 프로퍼티 값은 \"LEE\"\r\n age: 26, // 프로퍼티 키는 age, 프로퍼티 값은 26\r\n};\r\n```\r\n- `프로퍼티 키(key)` : 빈 문자열( `''` ) 을 포함하는 모든 `문자열(string)` 또는 `심벌(symbol) 값`\r\n- `프로퍼티 값(value)` : 자바스크립트에서 사용할 수 있는 모든 값\r\n
\r\n\r\n**식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다** (규칙 준수하면 사용안해도 ㄱㅊ)\r\n```js\r\nvar person = {\r\n\tfirstName: 'Joo-young', // 식별자 네이밍 규칙을 준수한 프로퍼티 키\r\n\t'last-name': 'Lee', // 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용해 문자열 형태 유지 )\r\n last-name: 'Lee' // SyntaxError: Unexpected token ( 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키\r\n};\r\nconsole.log(person) // {firstName: 'Joo-young', last-name: 'Lee'}\r\n```\r\n
\r\n\r\n프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면 **암묵적 타입 변환** 을 통해 문자열이 된다.\r\n```js\r\nvar foo = {\r\n 0: 1,\r\n 1: 2,\r\n 2: 3,\r\n};\r\n\r\nconsole.log(foo); // { 0: 1, 1: 2, 2: 3 } <- 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다. \r\n```\r\n
\r\n이미 존재하는 프로퍼티 중복 선언시 나중에 선언한 프로퍼티가 덮어씌워진다. (에러가 발생하지 않는 것 주의하자)\r\n
\r\n\r\n```js\r\nvar foo = {\r\nname: 'Lee',\r\nname: 'Kim',\r\n}\r\nconsole.log(foo); // {name: 'Kim'}\r\n```\r\n\r\n## 메서드\r\n자바스크립트에서 사용할 수 있는 모든 값은 **프로퍼티 값**으로 사용 가능, 자바스크립트의 함수는 객체(일급 객체) 이다. 따라서 함수는 값으로 취급할 수 있기 때문에 **프로퍼티 값으로 사용할 수 있다.** \r\n\r\n프로퍼티 값이 함수인 경우, 일반 함수와 구분하기 위해, `메서드`라고 부른다. 즉 메서드는 객체에 묶여있는 함수를 의미한다.\r\n\r\n```js\r\nvar circle= {\r\n // 프로퍼티\r\n radius: 5,\r\n\r\n // 메서드\r\n getDiameter: function () {\r\n return 2 * this.radius;\r\n },\r\n};\r\n\r\nconsole.log(person.getDiameter()); // 10\r\n```\r\n## 프로퍼티 접근\r\n- 마침표 프로퍼티 접근 연산자(.)로 사용하는 **마침표 표기법**\r\n- 대괄호 프로퍼티 접근 연산자([...]) 사용하는 **대괄호 표기법**\r\n\r\n\t```js\r\n\tvar person = {\r\n\t\tname: 'Lee'\r\n\t};\r\n\r\n\t// 마침표 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(person.name); // Lee\r\n\r\n\t// 대괄호 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(persone['name']); // Lee\r\n\t```\r\n- 대괄호 표기법을 사용하는 경우 **접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열**이어야 한다.\r\n
\r\n- 대괄호 프로퍼티 접근 연산자 내에 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 **식별자로 해석**한다.\r\n- 객체에 존재하지 않는 프로퍼티에 접근하면 **undefined**를 반환한다.\r\n\r\n\t```js\r\n\t// 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석함\r\n\tconsole.log(person[name]); // ReferenceError: name is not defined\r\n\t// 객체에 존재하지 않는 프로퍼티에 접근하면 undefined반환\r\n\tconsole.log(person.age); // undefined\r\n\t```\r\n\r\n## 프로퍼티 동적 생성 & 삭제\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n// person 객체에 age는 존재x\r\n// 따라서 person객체에 age프로퍼티가 동적으로 생성되고 값이 할당된다.\r\nperson.age = 20; // { age: 20 } \r\nconsole.log(person); // { name: 'Lee', age: 20 }\r\n\r\ndelete person.age; // age 라는 프로퍼티 키가 존재하므로 해당 프로퍼티가 삭제된다.\r\ndelete person.address; // address이라는 프로퍼티 키는 없으므로 삭제 할 수 없지만, 에러는 발생하지 않는다.\r\n\r\nconsole.log(person); // { name: 'Lee' }\r\n```\r\n## ES6에서 추가된 객체 리터럴의 확장 기능\r\n\r\n\r\n### 프로퍼티 축약 표현\r\n```js\r\n// ES5\r\nvar x = 1, y=2;\r\n\r\nvar obj = {\r\n\tx:x,\r\n\ty:y\r\n};\r\nconsole.log(obj); // {x:1, y:2}\r\n\r\n// ES6(프로퍼티 축약 표현)\r\nlet x = 1, y = 2;\r\nconst obj = {x,y};\r\nconsole.log(obj);\r\n```\r\n### 계산된 프로퍼티 이름\r\n`ES5`\r\n```js\r\nvar prefix = \"prop\";\r\nvar i = 0;\r\n\r\nvar obj = {};\r\n\r\n// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성\r\n// '객체 외부'에서만 가능\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n`ES6`\r\n```js\r\nconst prefix = \"prop\";\r\nlet i = 0;\r\n\r\n// '객체 리터럴 내부'에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성\r\nconst obj = {\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n};\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n\r\n### 메서드 축약 표현\r\n`ES5`\r\n```js\r\nvar obj = {\r\n\tname: \"Lee\",\r\n\tsayHi: function () {\r\n\t\tconsole.log('Hi!' + this.name);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! Lee\r\n```\r\n`ES6`\r\n```js\r\nconst obj = {\r\n\tname: \"JY\",\r\n\t // 메서드 축약 표현\r\n\tsayHi() {\r\n\t\tconsole.log(`Hi! ${this.name}`);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! JY\r\n```\r\n메서드 축약 표현 으로 정의한 메서드는 프로퍼티에 할당한 함수 와 다르게 동작한다.\r\n(이후 자세히 살펴볼 예정)"},{"slug":"posts/Javascript/javascriptdeepdive11","title":"원시 값과 객체의 비교","date":"2024-04-26T14:30:51.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '원시 값과 객체의 비교'의 정리 내용입니다.","tags":["Dummy","JavaScript"],"content":"\r\n# 원시 값과 객체의 비교\r\n\r\n\r\n## 원시 타입 vs 객체 타입\r\n- 원시 타입의 값, 즉 `원시 값`은 **변경 불가능한 값(immutable value)** vs `객체(참조) 타입의 값`, 즉 객체는 **변경 가능한 값(mutable value)**이다.\r\n- `원시 값`을 변수에 할당하면 변수(확보된 메모리 공간)에는 **실제 값이 저장** vs `객체` 를 변수에 할당하면 변수(확보된 메모리 공간)에는 **참조 값이 저장**\r\n- `원시 값을 갖는 변수`를 다른 변수에 할당하면 원본의 **원시 값이 복사되어 전달**(**값에 의한 전달**) vs `객체를 가리키는 변수`를 다른 변수에 할당하면 **원본의 참조 값이 복사되어 전달**(**참조에 의한 전달**)\r\n\r\n## 원시 값\r\n\r\n**원시 값: 원시 타입의 값, 원시 값은 변경 불가능한 값**(`읽기 전용의 값(readonly)`)\r\n\r\n**❗ 변수와 값은 엄연히 다른것!**\r\n- `변수`는 하나의 값을 저장하기 위해 확보한 **메모리 공간 자체** 또는 그 **메모리 공간을 식별하기 위해 붙인 이름**\r\n- `값`은 변수에 저장된 **데이터 표현식이 평가되어 생성된 결과**\r\n- 변경 불가능한 것은 **값에 대한 진술**, 변수는 재할당을 통해, 변수 값을 변경(교체) 가능\r\n\r\n** 변수vs상수 **\r\n+ 변수는 언제든지 `재할당`을 통해 변수 값을 변경(교체)할 수 있다. 그래서 \"변수\"다.\r\n+ 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 `변수`라고 할 수 있다.\r\n+ 하지만, 상수는 단 한 번만 할당이 허용하므로 변수 값을 변경할 수 없다. (이를 변경 불가능한 값으로 동일시하면 안됨 상수는 **재할당이 금지된 변수**)\r\n\r\n### 불변성\r\n변경 불가능한 값인 **원시 값**은 값을 변경하는 것이 아닌, 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 값의 이러한 특성을 `불변성` 이라고 한다. \r\n\r\n**`불변성` 을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법**이 없다.\r\n\r\n### 문자열과 불변성\r\n자바스크립트는 개발자의 편의를 위해 문자열 타입을 원시 타입으로 제공한다.\r\n\r\n문자열은 유사 배열객체이면서 이터러블이므로 **배열과 유사하게 각 문자에 접근**할 수 있다.\r\n\r\n**유사 배열 객체란?**\r\n\r\n- 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있으며, length 프로퍼티를 갖는 객체\r\n- length 프로퍼티를 갖기 때문에 유사 배열 객체 이며, for 문으로 순회도 할 수 있다.\r\n\t```js\r\n\tvar str = 'string';\r\n\t// 유사배열이므로, 배열과 유사하게 인덱스를 사용해 각 문자로 접근\r\n\tconsole.log(str[0]);\r\n\t// 원시 값인 문자열이 객체처럼 동작\r\n\tconsole.log(str.length); //6\r\n\tconsole.log(str.toUpperCase()); //STRING\r\n\t```\r\n```js\r\nvar str = 'string'\r\n// 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근\r\n// 하지만 문자열은 원시 값이므로 변경할 수 없다. 이때 에러는 발생 x\r\nstr[0] = 'S'\r\nconsole.log(str)// string\r\n```\r\n이는 데이터의 신뢰성을 보장한다. 변수에 새로운 문자열을 재할당하는 것은 물론 가능\r\n\r\n### 값에 의한 전달\r\n```js\r\nvar score = 80;\r\nvar copy = score;\r\n\r\nscore = 100;\r\n\r\nconsole.log(score); // 100 (원본 값)\r\nconsole.log(copy); // 80 (복사한 값)\r\n```\r\nscore는 변수 값 80으로 평가 되므로, copy 변수에도 80이 할당된다. 이때 새로운 숫자 값 80이 생성되어 copy변수에 할당된다\r\n\r\n변수(copy)에는 할당되는 변수(score)의 **원시 값이 복사되어 전달**된다. \r\n 이를, `값에 의한 전달`이라고 한다.\r\n\r\ncopy와 score는 별개의 값으로써, 서로의 변수의 값에 어떠한 영향도 주지않음.\r\n\r\n또한,\r\n엄격하게 말하자면, 변수에는 값이 전달되는 것이 아니라, **메모리 주소가 전달되는 것이다.**\r\n이는 변수와 같은 식별자는 값이 아니라 **메모리 주소를 기억**하기 때문이다.\r\n> 이처럼 \"값에 의한 전달\"도 사실은 값을 전달하는 것이 아니라, 메모리 주소를 전달한다. 단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.\r\n\r\n하지만 중요한 것은,\r\n\r\n❗ **결국 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.**\r\n\r\n## 객체\r\n> 자바스크립트는 다른 객체지향 언어와는 달리, 클래스 없이 객체 생성가능하며, 객체가 생성된 이후라도 동적으로 프로퍼티와 메서드 추가가 가능하다. V8 엔진에서는 **히든 클래스**라는 방식을 사용한다.\r\n\r\n### 변경 가능한 값\r\n**객체(참조)타입의 값, 즉 객체는 변경 가능한 값**\r\n\r\n원시 값과 다르게, 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 **참조 값**에 접근한다!\r\n- `참조 값`: 생성된 객체가 저장된 메모리 공간의 주소, 그 자체\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n\r\n// person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다.\r\nconsole.log(person) //{name: \"Lee\"}\r\n```\r\n객체를 할당한 변수의 경우 \"변수는 객체를 가리키고(참조하고)있다\" 라고 표현한다.\r\n```person 변수는 {name: 'Lee'}를 가리키고(참조하고) 있다.```\r\n객체를 할당한 변수는 원시 값과 달리, 재할당 없이 객체를 직접 변경할 수 있다.\r\n즉, 재할당 없이 **프로퍼티를 동적으로 추가, 프로퍼티 값을 갱신, 프로퍼티 자체를 삭제도 가능**\r\n\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// 프로퍼티 값 갱신\r\nperson.name = \"Kim\";\r\n\r\n// 프로퍼티 값 동적 추가\r\nperson.address = \"Seoul\";\r\n\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n원시 값과는 다르게 **여러개의 식별자가 하나의 객체를 공유할 수 있다**라는 부작용이 있다.\r\n\r\n### 얕은 복사와 깊은 복사\r\n객체를 프로퍼티의 값으로 갖는 객체의 경우 \r\n- `얕은 복사`는 **한단계만 복사**하는 것을 말하며, 객체의 중첩되어있는 객체의 경우 참조 값을 복사한다.\r\n- `깊은 복사`는 **객체에 중첩되어 있는 객체까지 모두 복사**하며, **원시 값처럼 완전한 복사본을 만든다.**\r\n\r\n### 참조에 의한 전달\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n// 참조 값을 복사(얕은 복사)\r\nvar copy = person;\r\n```\r\nperson을 다른 변수(사본, copy)에 할당하면 **원본의 참조 값이 복사되어 전달**된다. 이를 **참조에 의한 전달** 이라고 한다.\r\n원본 person과 사본 copy는 동일한 참조 값을 가진다. 즉, 둘 모두 동일한 객체를 가리킨다. 이것은 **두 개의 식별자가 하나의 객체를 공유한다는 것을 의미**\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// \"참조 값\"을 \r\n복사, copy와 person이 동일한 참조 값을 갖는다.\r\nvar copy = person;\r\n// 동일한 객체 참조하므로\r\nconsole.log(copy === person); // true\r\n\r\n// copy를 통해 객체의 name 프로퍼티를 변경한다.\r\ncopy.name = \"Kim\";\r\n\r\n// person을 통해 객체의 address 프로퍼티를 동적 생성한다.\r\nperson.address = \"Seoul\";\r\n\r\n// copy와 person은 동일한 객체를 가리키므로 서로 영향을 주고받음\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\nconsole.log(copy); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n\"값에 의한 전달\"과 \"참조에 의한 전달\"은 **식별자가 기억하는 메모리 공간에 저장되어 있는 값을 전달한다는 면에서 동일**하다. 따라서 **\"참조에 의한 전달\"은 존재하지 않고 \"값에 의한 전달\"만이 존재한다고 할 수 있다.**"},{"slug":"posts/Javascript/javascriptdeepdive09","title":"자바스크립트 딥다이브: 09.타입 변환과 단축평가","date":"2024-04-22T12:00:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '타입 변환과 단축평가'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n# 타입 변환과 단축 평가\r\n개발자가 의도적으로 값의 타입을 변환하는 것: `명시적 타입 변환` or `타입캐스팅`\r\n\r\n개발자의 의도와는 상관없이 표현식을 평가하는 도중에 **자바스크립트 엔진에 의해 암묵적으로 타입이 변환**되는 것: `암묵적 타입 변환` or `타입강제 변환`\r\n\r\n## 암묵적 타입 변환\r\n> 자바스크립트 엔진이 표현식을 평가할 때 개발자의 의도와는 상관없이 `코드의 문맥을 고려해 암묵적으로` 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 있다.\r\n\r\n암묵적 타입 변환은 문자, 숫자, 불리언 같은 **원시 타입**중 하나로 타입을 자동 변환한다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// 숫자 타입 \r\n0+'' // '0'\r\nNaN + '' // 'NaN'\r\nInfinity + '' // 'Infinity'\r\n\r\n// 불리언 타입\r\ntrue + '' // 'true'\r\n\r\n// null 타입\r\nnull + '' // 'null'\r\n\r\n// undefined 타입\r\nundefined + ''; // \"undefined\"\r\n\r\n// 심벌 타입\r\n(Symbol()) + ''; // TypeError: Cannot convert a Symbol value to a string\r\n\r\n// 객체 타입\r\n({}) + ''; // \"[object Object]\"\r\nMath + ''; // \"[object Math]\"\r\n[] + ''; // \"\"\r\n[10, 20] + ''; // \"10,20\"\r\n(function(){}_ + ''; // \"function(){}\"\r\nArray + ''; // \"function Array() { [native code] }\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// 문자열 타입(+ 단항연산자는 피연산자가 숫자타입이 아니면 숫자 타입으로 암묵적 타입 변환 수행)\r\n+'' // -> 0\r\n+'0' // 0\r\n+'string' // -> NaN\r\n\r\n// 불리언 타입\r\n+true // -> 1\r\n\r\n// null 타입\r\n+null // -> 0\r\n\r\n//undefined 타입\r\n+undefined // -> NaN\r\n\r\n// 심벌 타입\r\n+Symbol(); // TypeError: Cannot convert a Symbol value to a number\r\n\r\n// 객체 타입\r\n+{}; // -> NaN\r\n+[]; // -> 0\r\n+[10, 20]; // NaN\r\n+function () {}; // NaN\r\n```\r\n**빈 문자열 (''), 빈 배열([]), null, false**는 **0**으로, **true**는 **1**로 변환된다. **객체와 빈 배열이 아닌 배열,undefined**는 변환되지 않아 **NaN**이 된다는 것에 주의하자\r\n\r\n### 불리언 타입으로 변환\r\nif문, for문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가 되어야 하는 표현식이다.\r\n```js\r\n// 모두 코드 블록 실행됨\r\nif(!false) console.log(false + ' is falsy value')\r\nif(!undefined) console.log(undefined + 'is falsy value')\r\nif(!NaN) console.log(NaN + 'is falsy value');\r\nif(!null) console.log(null + 'is falsy value');\r\n```\r\n자바스크립트 엔진은 불리언 타입이 아닌 값을 `Truthy 값(참으로 평가되는 값)` or `Falsy 값(거짓으로 평가되는 값)` 으로 구분한다.\r\n\r\n**자바스크립트 엔진이 Falsy 값으로 판단하는 값**\r\n+ false\r\n+ undefined\r\n+ null\r\n+ 0, -0\r\n+ NaN\r\n+ ''(빈 문자열)\r\n\r\n## 명시적 타입 변환\r\n**개발자의 의도에 따라 명시적으로 타입을 변환하는 것** \r\n\r\n**표준 빌트인 함수(String,Number,Boolean)**을 new연산자 없이 호출하는 방법과 **빌트인 메서드를 사용하는 방법**, 그리고 **암묵적 타입 변환**을 이용하는 방법이 있다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// String 생성자 함수를 new 연산 없이 호출\r\nString(1); // -> \"1\"\r\nString(NaN); // -> \"NaN\"\r\nString(Infinity); // -> \"Infinity\"\r\nString(false); // -> \"false\"\r\n\r\n// Object.prototype.toString 메서드를 사용하는 방법\r\n(NaN).toString() // -> 'NaN'\r\n(true).toString() // -> 'true'\r\n\r\n// 문자열 연결 연산자\r\nNaN + '' // -> \"NaN\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// Number 생성자 함수를 new 연산자 없이 호출하는 방법\r\nNumber('0') // -> 0\r\nNumber(10.53) // -> 10.53\r\n\r\n// parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)\r\nparseInt('0') // -> 0\r\nparseFloat('10.53') // -> 10.53\r\n\r\n// + 단항 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n+'0'\r\n+'-1'\r\n// 불리언 타입 => 숫자 타입\r\n+true; //->1\r\n\r\n// * 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n'0' * 1;\r\n'-1' * 1; //1\r\n// 불리언 타입 => 숫자 타입\r\ntrue * 1; //->1\r\n```\r\n\r\n### 불리언 타입으로 변환\r\n```js\r\n// 1. Boolean 생성자 함수를 new 키워드 없이 호출하는 방법\r\nBoolean('x'); // true\r\n\r\nBoolean(0) // false\r\nBoolean(NaN) // false\r\nBoolean(Infinity) // true\r\n\r\nBoolean(null) // false\r\nBoolean(undefined) // false\r\n\r\nBoolean({}) //True\r\n\r\n//2. !(부정 논리 연산자) 두 번 사용\r\n!!'x'; // true ( !(!'x') === !(false) -> true )\r\n```\r\n\r\n## 단축 평가\r\n> `단축 평가` : 논리 연산의 결과를 결정하는 피연산자를 `타입 변환하지 않고 그대로 반환`\r\n- 단축 평가는 표현식을 평가하는 도중에 평가결과가 확정 경우 → 나머지 평가 과정을 생략한다.\r\n단축 평가 표현식\r\n\r\n| 단축 평가 표현식 | 평가 결과 |\r\n|--|--|\r\n|true ll anything | true |\r\n|false ll anything | anything |\r\n| true && anything | anything|\r\n| false && anything | false |\r\n\r\n### 논리 연산자를 단축 평가\r\n`논리곱(&&)` 에서 논리 연산의 결과를 결정하는 것은 **두 번째 피연산자**\r\n```js\r\n'Cat' && 'Dog'; // Dog\r\n```\r\n\r\n`논리곱(&&) 연산자` 는 두 개의 피연산자가 `모두 true로 평가될 때 true를 반환`, `좌항 -> 우항으로 평가가 진행` \r\n\r\n\r\n`논리합(||)` 에서 논리 연산의 결과를 결정하는 것은 **첫 번째 피연산자** 그러므로 첫 번째 연산자 그대로 반환\r\n```js\r\n'Cat' || 'Dog' // Cat\r\n```\r\n\r\n`논리합 (||) 연산자` 는 `두 개의 피연자 중 하나만 true로 평가되어도 true로 반환`하며, 역시 `좌항에서 우항으로 평가가 진행`\r\n\r\n ```js\r\n // 논리합(||) 연산\r\n\"Cat\" || \"Dog\"; // \"Cat\"\r\nfalse || \"Dog\"; // \"Dog\"\r\n\"Cat\" || false; // \"Cat\"\r\n\r\n// 논리곱(&&) 연산\r\n\"Cat\" && \"Dog\"; // \"Dog\"\r\nfalse && \"Dog\"; // \"false\"\r\n\"Cat\" && false; // \"false\"\r\n ```\r\n **단축평가 사용 예시**\r\n - **if 문대체**\r\n논리 연산자 단축평가를 통해서 if문도 대체할 수 있으며, 값 할당시 보다 더 깔끔할 수 있다.\r\n\t```js\r\n\tvar done = false;\r\n\tvar message = \"\";\r\n\r\n\t// 조건문으로 값 할당\r\n\tif (!done) message = \"미완료\";\r\n\r\n\tmeessage = done || \"미완료\";\r\n\tconsole.log(message) // 미완료\r\n\t```\r\n- **객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null또는 undefined일 경우** \r\n\r\n\t이러한 경우 타입 에러가 발생한다. 하지만, 단축평가를 사용하면 에러 발생 x\r\n\t```js\r\n\t// elem이 null 또는 undefined같은 Falsy값이면 elem으로 평가\r\n\t// elem이 Truthy값이면 elem.value 값으로 평가\r\n\tvar elem = null;\r\n\tvar value = elem && elem.value // null\r\n\t```\r\n- **함수 매개변수에 기본값을 설정**\r\n함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 단축평가 사용해 매개변수에 기본값을 설정한다면 에러 방지 가능\r\n\t```js\r\n\t// 단축 평가를 사용한 매개변수의 기본값 설정\r\n\tfunction getStringLength(str) {\r\n\t str = str || \"\";\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\tgetStringLength('hi'); //2\r\n\t// Es6의 매개변수 default parameter 설정\r\n\tfunction getStringLength(str = \"\") {\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\t```\r\n\r\n## 옵셔널 체이닝 연산자\r\n`?` : 좌항의 피 연산자가 null 또는 undefined인 경우 `undefined 반환`, 그렇지않으면 `우항의 포로퍼티 참조`\r\n```js\r\nvar elem = null;\r\nvar value = elem?.value; // undefined\r\n```\r\n- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 안전하게 참조할 때 유용\r\n- 옵셔널 체이닝 도입 이전에는 `논리곱(&&)을 사용한 단축 평가`를 통해 변수가 null 또는 undefined 인지 확인했음\r\n```js\r\n// 좌항이 Falsy라면 좌항 그대로 반환(0이나 ''반환 할 때도)\r\nvar str = \"\"; //\r\nvar length = str && str.length; // ''\r\n\r\n// 좌항 피연산자가 Falsy값이라도 null 또는 undefined 만 아니면, 우항의 프로퍼티를 참조한다.\r\nvar str = \"\";\r\nvar length = str?.length; // 0\r\n```\r\n\r\n## null 병합 연산자 \r\n`??` : 좌항의 피연산자가 **null또는 undefined인 경우** `우항의 피연산자 반환` 그렇지 않으면 `좌항 피연산자 반환`한다.\r\n```js\r\nvar foo = null ?? \"default string\"; // \"default string\"\r\n```\r\n- 변수에 기본값을 설정할 때 유용하며, 그전에는 논리합(||)을 사용한 단축평가로 변수에 기본값 설정\r\n\t```js\r\n\t// 좌항의 피연산자가 Falsy값이면, 우항의 피연산자를 반환 \r\n\t//(Falsy 값인 0 이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생한다.)\r\n\tvar foo = \"\" || \"default string\"; // \"default string\"\r\n\r\n\t// 좌항의 피연산자가 Falsy값이라도 null 또는 undefined 가 아니면, 좌항의 피연산자를 그대로 반환한다.\r\n\tvar foo = \"\" ?? \"default string\"; // ''\r\n\t```"}],"categorys":["Algorithm","Javascript","React"],"currentCategory":"all"},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/search.json b/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/search.json deleted file mode 100644 index 247fb33..0000000 --- a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/search.json +++ /dev/null @@ -1 +0,0 @@ -{"pageProps":{"posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n"},{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nrectangle\r\ncharacterX\r\ncharacterY\r\nitemX\r\nitemY\r\nresult\r\n\r\n\r\n \r\n[[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]]\r\n1\r\n3\r\n7\r\n8\r\n17\r\n\r\n\r\n[[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]]\r\n9\r\n7\r\n6\r\n1\r\n11\r\n\r\n\r\n[[1,1,5,7]]\r\n1\r\n1\r\n4\r\n7\r\n9\r\n\r\n\r\n[[2,1,7,5],[6,4,10,10]]\r\n3\r\n1\r\n7\r\n10\r\n15\r\n\r\n\r\n[[2,2,5,5],[1,3,6,4],[3,1,4,6]]\r\n1\r\n4\r\n6\r\n3\r\n10\r\n\r\n\r\n \r\n\r\n##### 입출력 예 설명\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/87694.%E2%80%85%EC%95%84%EC%9D%B4%ED%85%9C%E2%80%85%EC%A4%8D%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88-%EC%84%A4%EB%AA%85)\r\n\r\n입출력 예 #1\r\n\r\n![rect_5.png](6.png)\r\n\r\n캐릭터 위치는 (1, 3)이며, 아이템 위치는 (7, 8)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #2\r\n\r\n![rect_7.png](7.png)\r\n\r\n캐릭터 위치는 (9, 7)이며, 아이템 위치는 (6, 1)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #3\r\n\r\n[![rect_8.png](8.png)]\r\n\r\n캐릭터 위치는 (1, 1)이며, 아이템 위치는 (4, 7)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n## 구현 방법\r\n### 전체 직사각형들을 합친 것의 바깥쪽 테두리만 돌게하려면 어떻게 하는가?\r\n- rectangle을 순회하면서 범위 중 직사각형 내부는 0으로 테두리는 1로 board값을 갱신한다.\r\n- 이 때, 만일 `다른 직사각형의 내부안에 현재 직사각형의 테두리가 있지 않을 경우`에만 board를 1로 갱신한다. \r\n### 예외 사항\r\n![exception.png](exception.png)\r\n좌표가 인접한 경우 위와 같이 의도하지 않은 경우를 초래할 수도 있다.\r\n\r\n따라서 이를 해결하기 위해 모든 좌표의 값을 **2배**씩 해주어야 한다.\r\n\r\n이를 모두 반영하여 board 테이블을 만들면,\r\n\r\n```python\r\nboard = [[-1 for _ in range(102)] for _ in range(102)];\r\nfor r in rectangle:\r\n\t# map 객체를 통해 모든 좌표값에 2배\r\n\tx1,y1,x2,y2 = map(lambda x: x*2,r);\r\n for i in range(x1,x2+1):\r\n for j in range(y1,y2+1):\r\n\t # 직사각형 내부의 경우 0으로 개신\r\n if x1\r\n \r\nstones\r\nk\r\nresult\r\n\r\n\r\n \r\n[2, 4, 5, 3, 2, 1, 4, 2, 5, 1]\r\n3\r\n3\r\n\r\n\r\n \r\n\r\n##### **입출력 예에 대한 설명**\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/64062.%E2%80%85%EC%A7%95%EA%B2%80%EB%8B%A4%EB%A6%AC%E2%80%85%EA%B1%B4%EB%84%88%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88%EC%97%90-%EB%8C%80%ED%95%9C-%EC%84%A4%EB%AA%85)\r\n\r\n----------\r\n\r\n**입출력 예 #1**\r\n\r\n첫 번째 친구는 다음과 같이 징검다리를 건널 수 있습니다. \r\n![1.png](1.png)\r\n\r\n첫 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n두 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![2.png](2.png)\r\n\r\n두 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n세 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![3.png](3.png)\r\n\r\n세 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n네 번째 친구가 징검다리를 건너려면, 세 번째 디딤돌에서 일곱 번째 디딤돌로 네 칸을 건너뛰어야 합니다. 하지만 k = 3 이므로 건너뛸 수 없습니다. \r\n![4.png](4.png)\r\n\r\n따라서 최대 3명이 디딤돌을 모두 건널 수 있습니다.\r\n\r\n## 접근 방법\r\n브루트 포스로 1명씩 건너기에는, stones 배열의 크기가 최대 200,000이고, stones 배열의 각 원소들의 값 역시 최대 200,000,000이기 때문에, 시간 초과가 날 확률이 높다고 생각했고(사실 그렇게 쉬우면 lv3 일리가 없지), 아니나 다를까 시간초과가 났다. \r\n\r\n고민하다가 도저히 해결책이 안나와서 찾아보니 `이분탐색`을 사용하여 풀 수 있었다.\r\n\r\n- 건널 수 있는 인원의 최소는 1명, 최대는 max(stones)명이다. 모든 돌들의 합이 같거나, 다르다 하더라도 건널수 없는 곳이 k이하면 건널 수 있기 때문이다. \r\n- 따라서 start = 1 end = max(stones)로 이분탐색을 시작할 수 있다.\r\n\r\nmid 값만큼의 사람이 건널 수 있는지 확인하기 위한 check함수는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n\t # 밟을 수 없으므로 건너뛰어야하는 횟수를 늘린다.\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n # 밟을 수 있으므로 최대 건너뛰는 횟수를 초기화시킨다.\r\n else:\r\n cnt = 0;\r\n # 건너뛰는 횟수가 k보다 크거나 같으면 안되므로 False 리턴 \r\n if cnt>=k:\r\n return False;\r\n return True;\r\n```\r\n건널 수 있다면 mid보다 큰 범위에서 값을 찾아야하므로 start를 mid+1로 갱신하고, 반대라면, mid보다 작은 범위에서 값을 찾아야하므로 end를 mid-1로 갱신한다.\r\n \r\ncheck 시간 복잡도는 O(N)이고 이분탐색을 했을 때 O(logN)의 시간복잡도가 나오므로, 총 O(NlogN)의 시간 복잡도가 나오므로, 시간초과가 나지 않는다.\r\n\r\n전체 코드는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n else:\r\n cnt = 0;\r\n if cnt>=k:\r\n return False;\r\n return True;\r\n\r\ndef solution(stones, k):\r\n start,end = 1,max(stones);\r\n answer = 0;\r\n while start<=end:\r\n mid = (start + end) // 2;\r\n if check(stones, mid,k):\r\n start = mid+1;\r\n else:\r\n answer = mid;\r\n end = mid-1; \r\n return answer;\r\n```\r\n\r\n## 느낀 점\r\n이분탐색 문제를 많이는 아니더라도 어느정도는 풀어봤다고 생각했는데, 이 문제에서 이분탐색으로 푸는 아이디어를 떠올리지 못해서 아쉽다. \r\n\r\n또한 처음에 위에 코드의 6번째줄에서 else문을 쓰지않고, 이러한 코드로 제출하여서 시간초과가 났다.\r\n```python\r\nif (stone - mid) <= 0:\r\n\tcnt += 1;\r\nif (stone - mid)>0:\r\n\tcnt = 0;\r\n```\r\nㅎㅎ.. 사실 위와 같은 경우에서 if else문을 쓰는 것이 기본인데, 그래도 시간초과가 날 수 있는 직접적인 원인까지는 되지 않을 거라고 안일하게 생각해서 코드를 짠 게 화근이었다. 기본을 지키자!"},{"slug":"posts/Javascript/javascriptdeepdive10","title":"객체 리터럴","date":"2024-04-29T15:33:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '객체 리터럴'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n\r\n# 객체 리터럴\r\n\r\n## 객체란?\r\n\r\n> 자바스크립트는 `객체`기반의 프로그래밍 언어이며 자바스크립트를 구성하는 거의 `모든 것`이 객체이다.\r\n\r\n- 원시타입의 값, 원시 값은 변경 불가능 한 값이지만, 객체 타입의 값, 즉 객체는 변경가능한 값이다.\r\n\r\n- 객체는 0개 이상의 `프로퍼티`로 구성된 집합, 프로퍼티는 `키(key): 값(value)`로 구성(**함수도 프로퍼티 값으로 사용 가능!**)\r\n- - 프로퍼티: 객체의 상태를 나타내는 값(data)\r\n\t\r\n - 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작\r\n\r\n객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 `객체지향 프로그래밍` 이라고 함.\r\n\r\n## 객체리터럴에 의한 객체 생성\r\n```\r\n 인스턴스: 클래스에 의해 생성되어 메모리에 저장된 실체, 객체는 클래스와 인스턴스를 포함한 개념, 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다.\r\n ```\r\n자바스크립트는 **프로토타입 객체지향 언어** 로서, 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다.\r\n\r\n- 객체 리터럴\r\n- Object 생성자 함수\r\n- 생성자 함수\r\n- Object.create 메서드\r\n- 클래스(ES6)\r\n\r\n객체 리터럴은 **중괄호**( `{ ... }` ) 내에 0개 이상의 프로퍼티를 정의한다. **변수에 할당되는 시점**에 자바스크립트 엔진은 **객체 리터럴을 해석**해 객체를 생성한다.\r\n```js\r\nvar person = {\r\n name: \"Wi\",\r\n sayHello: function () {\r\n console.log(`Hello My name is ${this.name}`);\r\n },\r\n};\r\n\r\nconsole.log(typeof person); // object\r\nconsole.log(person); // { name: 'Wi', sayHello: [Function: sayHello] }\r\n```\r\n중괄호 내에 프로퍼티 정의하지 않으면 **빈 객체** 생성\r\n\r\n## 프로퍼티\r\n**객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.**\r\n```js\r\nvar person = {\r\n name: \"LEE\", // 프로퍼티 키는 name, 프로퍼티 값은 \"LEE\"\r\n age: 26, // 프로퍼티 키는 age, 프로퍼티 값은 26\r\n};\r\n```\r\n- `프로퍼티 키(key)` : 빈 문자열( `''` ) 을 포함하는 모든 `문자열(string)` 또는 `심벌(symbol) 값`\r\n- `프로퍼티 값(value)` : 자바스크립트에서 사용할 수 있는 모든 값\r\n
\r\n\r\n**식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다** (규칙 준수하면 사용안해도 ㄱㅊ)\r\n```js\r\nvar person = {\r\n\tfirstName: 'Joo-young', // 식별자 네이밍 규칙을 준수한 프로퍼티 키\r\n\t'last-name': 'Lee', // 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용해 문자열 형태 유지 )\r\n last-name: 'Lee' // SyntaxError: Unexpected token ( 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키\r\n};\r\nconsole.log(person) // {firstName: 'Joo-young', last-name: 'Lee'}\r\n```\r\n
\r\n\r\n프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면 **암묵적 타입 변환** 을 통해 문자열이 된다.\r\n```js\r\nvar foo = {\r\n 0: 1,\r\n 1: 2,\r\n 2: 3,\r\n};\r\n\r\nconsole.log(foo); // { 0: 1, 1: 2, 2: 3 } <- 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다. \r\n```\r\n
\r\n이미 존재하는 프로퍼티 중복 선언시 나중에 선언한 프로퍼티가 덮어씌워진다. (에러가 발생하지 않는 것 주의하자)\r\n
\r\n\r\n```js\r\nvar foo = {\r\nname: 'Lee',\r\nname: 'Kim',\r\n}\r\nconsole.log(foo); // {name: 'Kim'}\r\n```\r\n\r\n## 메서드\r\n자바스크립트에서 사용할 수 있는 모든 값은 **프로퍼티 값**으로 사용 가능, 자바스크립트의 함수는 객체(일급 객체) 이다. 따라서 함수는 값으로 취급할 수 있기 때문에 **프로퍼티 값으로 사용할 수 있다.** \r\n\r\n프로퍼티 값이 함수인 경우, 일반 함수와 구분하기 위해, `메서드`라고 부른다. 즉 메서드는 객체에 묶여있는 함수를 의미한다.\r\n\r\n```js\r\nvar circle= {\r\n // 프로퍼티\r\n radius: 5,\r\n\r\n // 메서드\r\n getDiameter: function () {\r\n return 2 * this.radius;\r\n },\r\n};\r\n\r\nconsole.log(person.getDiameter()); // 10\r\n```\r\n## 프로퍼티 접근\r\n- 마침표 프로퍼티 접근 연산자(.)로 사용하는 **마침표 표기법**\r\n- 대괄호 프로퍼티 접근 연산자([...]) 사용하는 **대괄호 표기법**\r\n\r\n\t```js\r\n\tvar person = {\r\n\t\tname: 'Lee'\r\n\t};\r\n\r\n\t// 마침표 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(person.name); // Lee\r\n\r\n\t// 대괄호 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(persone['name']); // Lee\r\n\t```\r\n- 대괄호 표기법을 사용하는 경우 **접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열**이어야 한다.\r\n
\r\n- 대괄호 프로퍼티 접근 연산자 내에 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 **식별자로 해석**한다.\r\n- 객체에 존재하지 않는 프로퍼티에 접근하면 **undefined**를 반환한다.\r\n\r\n\t```js\r\n\t// 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석함\r\n\tconsole.log(person[name]); // ReferenceError: name is not defined\r\n\t// 객체에 존재하지 않는 프로퍼티에 접근하면 undefined반환\r\n\tconsole.log(person.age); // undefined\r\n\t```\r\n\r\n## 프로퍼티 동적 생성 & 삭제\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n// person 객체에 age는 존재x\r\n// 따라서 person객체에 age프로퍼티가 동적으로 생성되고 값이 할당된다.\r\nperson.age = 20; // { age: 20 } \r\nconsole.log(person); // { name: 'Lee', age: 20 }\r\n\r\ndelete person.age; // age 라는 프로퍼티 키가 존재하므로 해당 프로퍼티가 삭제된다.\r\ndelete person.address; // address이라는 프로퍼티 키는 없으므로 삭제 할 수 없지만, 에러는 발생하지 않는다.\r\n\r\nconsole.log(person); // { name: 'Lee' }\r\n```\r\n## ES6에서 추가된 객체 리터럴의 확장 기능\r\n\r\n\r\n### 프로퍼티 축약 표현\r\n```js\r\n// ES5\r\nvar x = 1, y=2;\r\n\r\nvar obj = {\r\n\tx:x,\r\n\ty:y\r\n};\r\nconsole.log(obj); // {x:1, y:2}\r\n\r\n// ES6(프로퍼티 축약 표현)\r\nlet x = 1, y = 2;\r\nconst obj = {x,y};\r\nconsole.log(obj);\r\n```\r\n### 계산된 프로퍼티 이름\r\n`ES5`\r\n```js\r\nvar prefix = \"prop\";\r\nvar i = 0;\r\n\r\nvar obj = {};\r\n\r\n// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성\r\n// '객체 외부'에서만 가능\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n`ES6`\r\n```js\r\nconst prefix = \"prop\";\r\nlet i = 0;\r\n\r\n// '객체 리터럴 내부'에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성\r\nconst obj = {\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n};\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n\r\n### 메서드 축약 표현\r\n`ES5`\r\n```js\r\nvar obj = {\r\n\tname: \"Lee\",\r\n\tsayHi: function () {\r\n\t\tconsole.log('Hi!' + this.name);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! Lee\r\n```\r\n`ES6`\r\n```js\r\nconst obj = {\r\n\tname: \"JY\",\r\n\t // 메서드 축약 표현\r\n\tsayHi() {\r\n\t\tconsole.log(`Hi! ${this.name}`);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! JY\r\n```\r\n메서드 축약 표현 으로 정의한 메서드는 프로퍼티에 할당한 함수 와 다르게 동작한다.\r\n(이후 자세히 살펴볼 예정)"},{"slug":"posts/Javascript/javascriptdeepdive11","title":"원시 값과 객체의 비교","date":"2024-04-26T14:30:51.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '원시 값과 객체의 비교'의 정리 내용입니다.","tags":["Dummy","JavaScript"],"content":"\r\n# 원시 값과 객체의 비교\r\n\r\n\r\n## 원시 타입 vs 객체 타입\r\n- 원시 타입의 값, 즉 `원시 값`은 **변경 불가능한 값(immutable value)** vs `객체(참조) 타입의 값`, 즉 객체는 **변경 가능한 값(mutable value)**이다.\r\n- `원시 값`을 변수에 할당하면 변수(확보된 메모리 공간)에는 **실제 값이 저장** vs `객체` 를 변수에 할당하면 변수(확보된 메모리 공간)에는 **참조 값이 저장**\r\n- `원시 값을 갖는 변수`를 다른 변수에 할당하면 원본의 **원시 값이 복사되어 전달**(**값에 의한 전달**) vs `객체를 가리키는 변수`를 다른 변수에 할당하면 **원본의 참조 값이 복사되어 전달**(**참조에 의한 전달**)\r\n\r\n## 원시 값\r\n\r\n**원시 값: 원시 타입의 값, 원시 값은 변경 불가능한 값**(`읽기 전용의 값(readonly)`)\r\n\r\n**❗ 변수와 값은 엄연히 다른것!**\r\n- `변수`는 하나의 값을 저장하기 위해 확보한 **메모리 공간 자체** 또는 그 **메모리 공간을 식별하기 위해 붙인 이름**\r\n- `값`은 변수에 저장된 **데이터 표현식이 평가되어 생성된 결과**\r\n- 변경 불가능한 것은 **값에 대한 진술**, 변수는 재할당을 통해, 변수 값을 변경(교체) 가능\r\n\r\n** 변수vs상수 **\r\n+ 변수는 언제든지 `재할당`을 통해 변수 값을 변경(교체)할 수 있다. 그래서 \"변수\"다.\r\n+ 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 `변수`라고 할 수 있다.\r\n+ 하지만, 상수는 단 한 번만 할당이 허용하므로 변수 값을 변경할 수 없다. (이를 변경 불가능한 값으로 동일시하면 안됨 상수는 **재할당이 금지된 변수**)\r\n\r\n### 불변성\r\n변경 불가능한 값인 **원시 값**은 값을 변경하는 것이 아닌, 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 값의 이러한 특성을 `불변성` 이라고 한다. \r\n\r\n**`불변성` 을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법**이 없다.\r\n\r\n### 문자열과 불변성\r\n자바스크립트는 개발자의 편의를 위해 문자열 타입을 원시 타입으로 제공한다.\r\n\r\n문자열은 유사 배열객체이면서 이터러블이므로 **배열과 유사하게 각 문자에 접근**할 수 있다.\r\n\r\n**유사 배열 객체란?**\r\n\r\n- 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있으며, length 프로퍼티를 갖는 객체\r\n- length 프로퍼티를 갖기 때문에 유사 배열 객체 이며, for 문으로 순회도 할 수 있다.\r\n\t```js\r\n\tvar str = 'string';\r\n\t// 유사배열이므로, 배열과 유사하게 인덱스를 사용해 각 문자로 접근\r\n\tconsole.log(str[0]);\r\n\t// 원시 값인 문자열이 객체처럼 동작\r\n\tconsole.log(str.length); //6\r\n\tconsole.log(str.toUpperCase()); //STRING\r\n\t```\r\n```js\r\nvar str = 'string'\r\n// 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근\r\n// 하지만 문자열은 원시 값이므로 변경할 수 없다. 이때 에러는 발생 x\r\nstr[0] = 'S'\r\nconsole.log(str)// string\r\n```\r\n이는 데이터의 신뢰성을 보장한다. 변수에 새로운 문자열을 재할당하는 것은 물론 가능\r\n\r\n### 값에 의한 전달\r\n```js\r\nvar score = 80;\r\nvar copy = score;\r\n\r\nscore = 100;\r\n\r\nconsole.log(score); // 100 (원본 값)\r\nconsole.log(copy); // 80 (복사한 값)\r\n```\r\nscore는 변수 값 80으로 평가 되므로, copy 변수에도 80이 할당된다. 이때 새로운 숫자 값 80이 생성되어 copy변수에 할당된다\r\n\r\n변수(copy)에는 할당되는 변수(score)의 **원시 값이 복사되어 전달**된다. \r\n 이를, `값에 의한 전달`이라고 한다.\r\n\r\ncopy와 score는 별개의 값으로써, 서로의 변수의 값에 어떠한 영향도 주지않음.\r\n\r\n또한,\r\n엄격하게 말하자면, 변수에는 값이 전달되는 것이 아니라, **메모리 주소가 전달되는 것이다.**\r\n이는 변수와 같은 식별자는 값이 아니라 **메모리 주소를 기억**하기 때문이다.\r\n> 이처럼 \"값에 의한 전달\"도 사실은 값을 전달하는 것이 아니라, 메모리 주소를 전달한다. 단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.\r\n\r\n하지만 중요한 것은,\r\n\r\n❗ **결국 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.**\r\n\r\n## 객체\r\n> 자바스크립트는 다른 객체지향 언어와는 달리, 클래스 없이 객체 생성가능하며, 객체가 생성된 이후라도 동적으로 프로퍼티와 메서드 추가가 가능하다. V8 엔진에서는 **히든 클래스**라는 방식을 사용한다.\r\n\r\n### 변경 가능한 값\r\n**객체(참조)타입의 값, 즉 객체는 변경 가능한 값**\r\n\r\n원시 값과 다르게, 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 **참조 값**에 접근한다!\r\n- `참조 값`: 생성된 객체가 저장된 메모리 공간의 주소, 그 자체\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n\r\n// person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다.\r\nconsole.log(person) //{name: \"Lee\"}\r\n```\r\n객체를 할당한 변수의 경우 \"변수는 객체를 가리키고(참조하고)있다\" 라고 표현한다.\r\n```person 변수는 {name: 'Lee'}를 가리키고(참조하고) 있다.```\r\n객체를 할당한 변수는 원시 값과 달리, 재할당 없이 객체를 직접 변경할 수 있다.\r\n즉, 재할당 없이 **프로퍼티를 동적으로 추가, 프로퍼티 값을 갱신, 프로퍼티 자체를 삭제도 가능**\r\n\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// 프로퍼티 값 갱신\r\nperson.name = \"Kim\";\r\n\r\n// 프로퍼티 값 동적 추가\r\nperson.address = \"Seoul\";\r\n\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n원시 값과는 다르게 **여러개의 식별자가 하나의 객체를 공유할 수 있다**라는 부작용이 있다.\r\n\r\n### 얕은 복사와 깊은 복사\r\n객체를 프로퍼티의 값으로 갖는 객체의 경우 \r\n- `얕은 복사`는 **한단계만 복사**하는 것을 말하며, 객체의 중첩되어있는 객체의 경우 참조 값을 복사한다.\r\n- `깊은 복사`는 **객체에 중첩되어 있는 객체까지 모두 복사**하며, **원시 값처럼 완전한 복사본을 만든다.**\r\n\r\n### 참조에 의한 전달\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n// 참조 값을 복사(얕은 복사)\r\nvar copy = person;\r\n```\r\nperson을 다른 변수(사본, copy)에 할당하면 **원본의 참조 값이 복사되어 전달**된다. 이를 **참조에 의한 전달** 이라고 한다.\r\n원본 person과 사본 copy는 동일한 참조 값을 가진다. 즉, 둘 모두 동일한 객체를 가리킨다. 이것은 **두 개의 식별자가 하나의 객체를 공유한다는 것을 의미**\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// \"참조 값\"을 \r\n복사, copy와 person이 동일한 참조 값을 갖는다.\r\nvar copy = person;\r\n// 동일한 객체 참조하므로\r\nconsole.log(copy === person); // true\r\n\r\n// copy를 통해 객체의 name 프로퍼티를 변경한다.\r\ncopy.name = \"Kim\";\r\n\r\n// person을 통해 객체의 address 프로퍼티를 동적 생성한다.\r\nperson.address = \"Seoul\";\r\n\r\n// copy와 person은 동일한 객체를 가리키므로 서로 영향을 주고받음\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\nconsole.log(copy); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n\"값에 의한 전달\"과 \"참조에 의한 전달\"은 **식별자가 기억하는 메모리 공간에 저장되어 있는 값을 전달한다는 면에서 동일**하다. 따라서 **\"참조에 의한 전달\"은 존재하지 않고 \"값에 의한 전달\"만이 존재한다고 할 수 있다.**"},{"slug":"posts/Javascript/javascriptdeepdive09","title":"자바스크립트 딥다이브: 09.타입 변환과 단축평가","date":"2024-04-22T12:00:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '타입 변환과 단축평가'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n# 타입 변환과 단축 평가\r\n개발자가 의도적으로 값의 타입을 변환하는 것: `명시적 타입 변환` or `타입캐스팅`\r\n\r\n개발자의 의도와는 상관없이 표현식을 평가하는 도중에 **자바스크립트 엔진에 의해 암묵적으로 타입이 변환**되는 것: `암묵적 타입 변환` or `타입강제 변환`\r\n\r\n## 암묵적 타입 변환\r\n> 자바스크립트 엔진이 표현식을 평가할 때 개발자의 의도와는 상관없이 `코드의 문맥을 고려해 암묵적으로` 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 있다.\r\n\r\n암묵적 타입 변환은 문자, 숫자, 불리언 같은 **원시 타입**중 하나로 타입을 자동 변환한다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// 숫자 타입 \r\n0+'' // '0'\r\nNaN + '' // 'NaN'\r\nInfinity + '' // 'Infinity'\r\n\r\n// 불리언 타입\r\ntrue + '' // 'true'\r\n\r\n// null 타입\r\nnull + '' // 'null'\r\n\r\n// undefined 타입\r\nundefined + ''; // \"undefined\"\r\n\r\n// 심벌 타입\r\n(Symbol()) + ''; // TypeError: Cannot convert a Symbol value to a string\r\n\r\n// 객체 타입\r\n({}) + ''; // \"[object Object]\"\r\nMath + ''; // \"[object Math]\"\r\n[] + ''; // \"\"\r\n[10, 20] + ''; // \"10,20\"\r\n(function(){}_ + ''; // \"function(){}\"\r\nArray + ''; // \"function Array() { [native code] }\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// 문자열 타입(+ 단항연산자는 피연산자가 숫자타입이 아니면 숫자 타입으로 암묵적 타입 변환 수행)\r\n+'' // -> 0\r\n+'0' // 0\r\n+'string' // -> NaN\r\n\r\n// 불리언 타입\r\n+true // -> 1\r\n\r\n// null 타입\r\n+null // -> 0\r\n\r\n//undefined 타입\r\n+undefined // -> NaN\r\n\r\n// 심벌 타입\r\n+Symbol(); // TypeError: Cannot convert a Symbol value to a number\r\n\r\n// 객체 타입\r\n+{}; // -> NaN\r\n+[]; // -> 0\r\n+[10, 20]; // NaN\r\n+function () {}; // NaN\r\n```\r\n**빈 문자열 (''), 빈 배열([]), null, false**는 **0**으로, **true**는 **1**로 변환된다. **객체와 빈 배열이 아닌 배열,undefined**는 변환되지 않아 **NaN**이 된다는 것에 주의하자\r\n\r\n### 불리언 타입으로 변환\r\nif문, for문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가 되어야 하는 표현식이다.\r\n```js\r\n// 모두 코드 블록 실행됨\r\nif(!false) console.log(false + ' is falsy value')\r\nif(!undefined) console.log(undefined + 'is falsy value')\r\nif(!NaN) console.log(NaN + 'is falsy value');\r\nif(!null) console.log(null + 'is falsy value');\r\n```\r\n자바스크립트 엔진은 불리언 타입이 아닌 값을 `Truthy 값(참으로 평가되는 값)` or `Falsy 값(거짓으로 평가되는 값)` 으로 구분한다.\r\n\r\n**자바스크립트 엔진이 Falsy 값으로 판단하는 값**\r\n+ false\r\n+ undefined\r\n+ null\r\n+ 0, -0\r\n+ NaN\r\n+ ''(빈 문자열)\r\n\r\n## 명시적 타입 변환\r\n**개발자의 의도에 따라 명시적으로 타입을 변환하는 것** \r\n\r\n**표준 빌트인 함수(String,Number,Boolean)**을 new연산자 없이 호출하는 방법과 **빌트인 메서드를 사용하는 방법**, 그리고 **암묵적 타입 변환**을 이용하는 방법이 있다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// String 생성자 함수를 new 연산 없이 호출\r\nString(1); // -> \"1\"\r\nString(NaN); // -> \"NaN\"\r\nString(Infinity); // -> \"Infinity\"\r\nString(false); // -> \"false\"\r\n\r\n// Object.prototype.toString 메서드를 사용하는 방법\r\n(NaN).toString() // -> 'NaN'\r\n(true).toString() // -> 'true'\r\n\r\n// 문자열 연결 연산자\r\nNaN + '' // -> \"NaN\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// Number 생성자 함수를 new 연산자 없이 호출하는 방법\r\nNumber('0') // -> 0\r\nNumber(10.53) // -> 10.53\r\n\r\n// parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)\r\nparseInt('0') // -> 0\r\nparseFloat('10.53') // -> 10.53\r\n\r\n// + 단항 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n+'0'\r\n+'-1'\r\n// 불리언 타입 => 숫자 타입\r\n+true; //->1\r\n\r\n// * 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n'0' * 1;\r\n'-1' * 1; //1\r\n// 불리언 타입 => 숫자 타입\r\ntrue * 1; //->1\r\n```\r\n\r\n### 불리언 타입으로 변환\r\n```js\r\n// 1. Boolean 생성자 함수를 new 키워드 없이 호출하는 방법\r\nBoolean('x'); // true\r\n\r\nBoolean(0) // false\r\nBoolean(NaN) // false\r\nBoolean(Infinity) // true\r\n\r\nBoolean(null) // false\r\nBoolean(undefined) // false\r\n\r\nBoolean({}) //True\r\n\r\n//2. !(부정 논리 연산자) 두 번 사용\r\n!!'x'; // true ( !(!'x') === !(false) -> true )\r\n```\r\n\r\n## 단축 평가\r\n> `단축 평가` : 논리 연산의 결과를 결정하는 피연산자를 `타입 변환하지 않고 그대로 반환`\r\n- 단축 평가는 표현식을 평가하는 도중에 평가결과가 확정 경우 → 나머지 평가 과정을 생략한다.\r\n단축 평가 표현식\r\n\r\n| 단축 평가 표현식 | 평가 결과 |\r\n|--|--|\r\n|true ll anything | true |\r\n|false ll anything | anything |\r\n| true && anything | anything|\r\n| false && anything | false |\r\n\r\n### 논리 연산자를 단축 평가\r\n`논리곱(&&)` 에서 논리 연산의 결과를 결정하는 것은 **두 번째 피연산자**\r\n```js\r\n'Cat' && 'Dog'; // Dog\r\n```\r\n\r\n`논리곱(&&) 연산자` 는 두 개의 피연산자가 `모두 true로 평가될 때 true를 반환`, `좌항 -> 우항으로 평가가 진행` \r\n\r\n\r\n`논리합(||)` 에서 논리 연산의 결과를 결정하는 것은 **첫 번째 피연산자** 그러므로 첫 번째 연산자 그대로 반환\r\n```js\r\n'Cat' || 'Dog' // Cat\r\n```\r\n\r\n`논리합 (||) 연산자` 는 `두 개의 피연자 중 하나만 true로 평가되어도 true로 반환`하며, 역시 `좌항에서 우항으로 평가가 진행`\r\n\r\n ```js\r\n // 논리합(||) 연산\r\n\"Cat\" || \"Dog\"; // \"Cat\"\r\nfalse || \"Dog\"; // \"Dog\"\r\n\"Cat\" || false; // \"Cat\"\r\n\r\n// 논리곱(&&) 연산\r\n\"Cat\" && \"Dog\"; // \"Dog\"\r\nfalse && \"Dog\"; // \"false\"\r\n\"Cat\" && false; // \"false\"\r\n ```\r\n **단축평가 사용 예시**\r\n - **if 문대체**\r\n논리 연산자 단축평가를 통해서 if문도 대체할 수 있으며, 값 할당시 보다 더 깔끔할 수 있다.\r\n\t```js\r\n\tvar done = false;\r\n\tvar message = \"\";\r\n\r\n\t// 조건문으로 값 할당\r\n\tif (!done) message = \"미완료\";\r\n\r\n\tmeessage = done || \"미완료\";\r\n\tconsole.log(message) // 미완료\r\n\t```\r\n- **객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null또는 undefined일 경우** \r\n\r\n\t이러한 경우 타입 에러가 발생한다. 하지만, 단축평가를 사용하면 에러 발생 x\r\n\t```js\r\n\t// elem이 null 또는 undefined같은 Falsy값이면 elem으로 평가\r\n\t// elem이 Truthy값이면 elem.value 값으로 평가\r\n\tvar elem = null;\r\n\tvar value = elem && elem.value // null\r\n\t```\r\n- **함수 매개변수에 기본값을 설정**\r\n함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 단축평가 사용해 매개변수에 기본값을 설정한다면 에러 방지 가능\r\n\t```js\r\n\t// 단축 평가를 사용한 매개변수의 기본값 설정\r\n\tfunction getStringLength(str) {\r\n\t str = str || \"\";\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\tgetStringLength('hi'); //2\r\n\t// Es6의 매개변수 default parameter 설정\r\n\tfunction getStringLength(str = \"\") {\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\t```\r\n\r\n## 옵셔널 체이닝 연산자\r\n`?` : 좌항의 피 연산자가 null 또는 undefined인 경우 `undefined 반환`, 그렇지않으면 `우항의 포로퍼티 참조`\r\n```js\r\nvar elem = null;\r\nvar value = elem?.value; // undefined\r\n```\r\n- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 안전하게 참조할 때 유용\r\n- 옵셔널 체이닝 도입 이전에는 `논리곱(&&)을 사용한 단축 평가`를 통해 변수가 null 또는 undefined 인지 확인했음\r\n```js\r\n// 좌항이 Falsy라면 좌항 그대로 반환(0이나 ''반환 할 때도)\r\nvar str = \"\"; //\r\nvar length = str && str.length; // ''\r\n\r\n// 좌항 피연산자가 Falsy값이라도 null 또는 undefined 만 아니면, 우항의 프로퍼티를 참조한다.\r\nvar str = \"\";\r\nvar length = str?.length; // 0\r\n```\r\n\r\n## null 병합 연산자 \r\n`??` : 좌항의 피연산자가 **null또는 undefined인 경우** `우항의 피연산자 반환` 그렇지 않으면 `좌항 피연산자 반환`한다.\r\n```js\r\nvar foo = null ?? \"default string\"; // \"default string\"\r\n```\r\n- 변수에 기본값을 설정할 때 유용하며, 그전에는 논리합(||)을 사용한 단축평가로 변수에 기본값 설정\r\n\t```js\r\n\t// 좌항의 피연산자가 Falsy값이면, 우항의 피연산자를 반환 \r\n\t//(Falsy 값인 0 이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생한다.)\r\n\tvar foo = \"\" || \"default string\"; // \"default string\"\r\n\r\n\t// 좌항의 피연산자가 Falsy값이라도 null 또는 undefined 가 아니면, 좌항의 피연산자를 그대로 반환한다.\r\n\tvar foo = \"\" ?? \"default string\"; // ''\r\n\t```"}]},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/all.json b/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/all.json deleted file mode 100644 index 0c3c284..0000000 --- a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/all.json +++ /dev/null @@ -1 +0,0 @@ -{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy"],"currentTag":"all","posts":[{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-10-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n"},{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nrectangle\r\ncharacterX\r\ncharacterY\r\nitemX\r\nitemY\r\nresult\r\n\r\n\r\n \r\n[[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]]\r\n1\r\n3\r\n7\r\n8\r\n17\r\n\r\n\r\n[[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]]\r\n9\r\n7\r\n6\r\n1\r\n11\r\n\r\n\r\n[[1,1,5,7]]\r\n1\r\n1\r\n4\r\n7\r\n9\r\n\r\n\r\n[[2,1,7,5],[6,4,10,10]]\r\n3\r\n1\r\n7\r\n10\r\n15\r\n\r\n\r\n[[2,2,5,5],[1,3,6,4],[3,1,4,6]]\r\n1\r\n4\r\n6\r\n3\r\n10\r\n\r\n\r\n \r\n\r\n##### 입출력 예 설명\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/87694.%E2%80%85%EC%95%84%EC%9D%B4%ED%85%9C%E2%80%85%EC%A4%8D%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88-%EC%84%A4%EB%AA%85)\r\n\r\n입출력 예 #1\r\n\r\n![rect_5.png](6.png)\r\n\r\n캐릭터 위치는 (1, 3)이며, 아이템 위치는 (7, 8)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #2\r\n\r\n![rect_7.png](7.png)\r\n\r\n캐릭터 위치는 (9, 7)이며, 아이템 위치는 (6, 1)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n입출력 예 #3\r\n\r\n[![rect_8.png](8.png)]\r\n\r\n캐릭터 위치는 (1, 1)이며, 아이템 위치는 (4, 7)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.\r\n\r\n## 구현 방법\r\n### 전체 직사각형들을 합친 것의 바깥쪽 테두리만 돌게하려면 어떻게 하는가?\r\n- rectangle을 순회하면서 범위 중 직사각형 내부는 0으로 테두리는 1로 board값을 갱신한다.\r\n- 이 때, 만일 `다른 직사각형의 내부안에 현재 직사각형의 테두리가 있지 않을 경우`에만 board를 1로 갱신한다. \r\n### 예외 사항\r\n![exception.png](exception.png)\r\n좌표가 인접한 경우 위와 같이 의도하지 않은 경우를 초래할 수도 있다.\r\n\r\n따라서 이를 해결하기 위해 모든 좌표의 값을 **2배**씩 해주어야 한다.\r\n\r\n이를 모두 반영하여 board 테이블을 만들면,\r\n\r\n```python\r\nboard = [[-1 for _ in range(102)] for _ in range(102)];\r\nfor r in rectangle:\r\n\t# map 객체를 통해 모든 좌표값에 2배\r\n\tx1,y1,x2,y2 = map(lambda x: x*2,r);\r\n for i in range(x1,x2+1):\r\n for j in range(y1,y2+1):\r\n\t # 직사각형 내부의 경우 0으로 개신\r\n if x1\r\n \r\nstones\r\nk\r\nresult\r\n\r\n\r\n \r\n[2, 4, 5, 3, 2, 1, 4, 2, 5, 1]\r\n3\r\n3\r\n\r\n\r\n \r\n\r\n##### **입출력 예에 대한 설명**\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/64062.%E2%80%85%EC%A7%95%EA%B2%80%EB%8B%A4%EB%A6%AC%E2%80%85%EA%B1%B4%EB%84%88%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88%EC%97%90-%EB%8C%80%ED%95%9C-%EC%84%A4%EB%AA%85)\r\n\r\n----------\r\n\r\n**입출력 예 #1**\r\n\r\n첫 번째 친구는 다음과 같이 징검다리를 건널 수 있습니다. \r\n![1.png](1.png)\r\n\r\n첫 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n두 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![2.png](2.png)\r\n\r\n두 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n세 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![3.png](3.png)\r\n\r\n세 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n네 번째 친구가 징검다리를 건너려면, 세 번째 디딤돌에서 일곱 번째 디딤돌로 네 칸을 건너뛰어야 합니다. 하지만 k = 3 이므로 건너뛸 수 없습니다. \r\n![4.png](4.png)\r\n\r\n따라서 최대 3명이 디딤돌을 모두 건널 수 있습니다.\r\n\r\n## 접근 방법\r\n브루트 포스로 1명씩 건너기에는, stones 배열의 크기가 최대 200,000이고, stones 배열의 각 원소들의 값 역시 최대 200,000,000이기 때문에, 시간 초과가 날 확률이 높다고 생각했고(사실 그렇게 쉬우면 lv3 일리가 없지), 아니나 다를까 시간초과가 났다. \r\n\r\n고민하다가 도저히 해결책이 안나와서 찾아보니 `이분탐색`을 사용하여 풀 수 있었다.\r\n\r\n- 건널 수 있는 인원의 최소는 1명, 최대는 max(stones)명이다. 모든 돌들의 합이 같거나, 다르다 하더라도 건널수 없는 곳이 k이하면 건널 수 있기 때문이다. \r\n- 따라서 start = 1 end = max(stones)로 이분탐색을 시작할 수 있다.\r\n\r\nmid 값만큼의 사람이 건널 수 있는지 확인하기 위한 check함수는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n\t # 밟을 수 없으므로 건너뛰어야하는 횟수를 늘린다.\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n # 밟을 수 있으므로 최대 건너뛰는 횟수를 초기화시킨다.\r\n else:\r\n cnt = 0;\r\n # 건너뛰는 횟수가 k보다 크거나 같으면 안되므로 False 리턴 \r\n if cnt>=k:\r\n return False;\r\n return True;\r\n```\r\n건널 수 있다면 mid보다 큰 범위에서 값을 찾아야하므로 start를 mid+1로 갱신하고, 반대라면, mid보다 작은 범위에서 값을 찾아야하므로 end를 mid-1로 갱신한다.\r\n \r\ncheck 시간 복잡도는 O(N)이고 이분탐색을 했을 때 O(logN)의 시간복잡도가 나오므로, 총 O(NlogN)의 시간 복잡도가 나오므로, 시간초과가 나지 않는다.\r\n\r\n전체 코드는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n else:\r\n cnt = 0;\r\n if cnt>=k:\r\n return False;\r\n return True;\r\n\r\ndef solution(stones, k):\r\n start,end = 1,max(stones);\r\n answer = 0;\r\n while start<=end:\r\n mid = (start + end) // 2;\r\n if check(stones, mid,k):\r\n start = mid+1;\r\n else:\r\n answer = mid;\r\n end = mid-1; \r\n return answer;\r\n```\r\n\r\n## 느낀 점\r\n이분탐색 문제를 많이는 아니더라도 어느정도는 풀어봤다고 생각했는데, 이 문제에서 이분탐색으로 푸는 아이디어를 떠올리지 못해서 아쉽다. \r\n\r\n또한 처음에 위에 코드의 6번째줄에서 else문을 쓰지않고, 이러한 코드로 제출하여서 시간초과가 났다.\r\n```python\r\nif (stone - mid) <= 0:\r\n\tcnt += 1;\r\nif (stone - mid)>0:\r\n\tcnt = 0;\r\n```\r\nㅎㅎ.. 사실 위와 같은 경우에서 if else문을 쓰는 것이 기본인데, 그래도 시간초과가 날 수 있는 직접적인 원인까지는 되지 않을 거라고 안일하게 생각해서 코드를 짠 게 화근이었다. 기본을 지키자!"},{"slug":"posts/Javascript/javascriptdeepdive10","title":"객체 리터럴","date":"2024-04-29T15:33:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '객체 리터럴'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n\r\n# 객체 리터럴\r\n\r\n## 객체란?\r\n\r\n> 자바스크립트는 `객체`기반의 프로그래밍 언어이며 자바스크립트를 구성하는 거의 `모든 것`이 객체이다.\r\n\r\n- 원시타입의 값, 원시 값은 변경 불가능 한 값이지만, 객체 타입의 값, 즉 객체는 변경가능한 값이다.\r\n\r\n- 객체는 0개 이상의 `프로퍼티`로 구성된 집합, 프로퍼티는 `키(key): 값(value)`로 구성(**함수도 프로퍼티 값으로 사용 가능!**)\r\n- - 프로퍼티: 객체의 상태를 나타내는 값(data)\r\n\t\r\n - 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작\r\n\r\n객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 `객체지향 프로그래밍` 이라고 함.\r\n\r\n## 객체리터럴에 의한 객체 생성\r\n```\r\n 인스턴스: 클래스에 의해 생성되어 메모리에 저장된 실체, 객체는 클래스와 인스턴스를 포함한 개념, 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다.\r\n ```\r\n자바스크립트는 **프로토타입 객체지향 언어** 로서, 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다.\r\n\r\n- 객체 리터럴\r\n- Object 생성자 함수\r\n- 생성자 함수\r\n- Object.create 메서드\r\n- 클래스(ES6)\r\n\r\n객체 리터럴은 **중괄호**( `{ ... }` ) 내에 0개 이상의 프로퍼티를 정의한다. **변수에 할당되는 시점**에 자바스크립트 엔진은 **객체 리터럴을 해석**해 객체를 생성한다.\r\n```js\r\nvar person = {\r\n name: \"Wi\",\r\n sayHello: function () {\r\n console.log(`Hello My name is ${this.name}`);\r\n },\r\n};\r\n\r\nconsole.log(typeof person); // object\r\nconsole.log(person); // { name: 'Wi', sayHello: [Function: sayHello] }\r\n```\r\n중괄호 내에 프로퍼티 정의하지 않으면 **빈 객체** 생성\r\n\r\n## 프로퍼티\r\n**객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.**\r\n```js\r\nvar person = {\r\n name: \"LEE\", // 프로퍼티 키는 name, 프로퍼티 값은 \"LEE\"\r\n age: 26, // 프로퍼티 키는 age, 프로퍼티 값은 26\r\n};\r\n```\r\n- `프로퍼티 키(key)` : 빈 문자열( `''` ) 을 포함하는 모든 `문자열(string)` 또는 `심벌(symbol) 값`\r\n- `프로퍼티 값(value)` : 자바스크립트에서 사용할 수 있는 모든 값\r\n
\r\n\r\n**식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다** (규칙 준수하면 사용안해도 ㄱㅊ)\r\n```js\r\nvar person = {\r\n\tfirstName: 'Joo-young', // 식별자 네이밍 규칙을 준수한 프로퍼티 키\r\n\t'last-name': 'Lee', // 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용해 문자열 형태 유지 )\r\n last-name: 'Lee' // SyntaxError: Unexpected token ( 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키\r\n};\r\nconsole.log(person) // {firstName: 'Joo-young', last-name: 'Lee'}\r\n```\r\n
\r\n\r\n프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면 **암묵적 타입 변환** 을 통해 문자열이 된다.\r\n```js\r\nvar foo = {\r\n 0: 1,\r\n 1: 2,\r\n 2: 3,\r\n};\r\n\r\nconsole.log(foo); // { 0: 1, 1: 2, 2: 3 } <- 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다. \r\n```\r\n
\r\n이미 존재하는 프로퍼티 중복 선언시 나중에 선언한 프로퍼티가 덮어씌워진다. (에러가 발생하지 않는 것 주의하자)\r\n
\r\n\r\n```js\r\nvar foo = {\r\nname: 'Lee',\r\nname: 'Kim',\r\n}\r\nconsole.log(foo); // {name: 'Kim'}\r\n```\r\n\r\n## 메서드\r\n자바스크립트에서 사용할 수 있는 모든 값은 **프로퍼티 값**으로 사용 가능, 자바스크립트의 함수는 객체(일급 객체) 이다. 따라서 함수는 값으로 취급할 수 있기 때문에 **프로퍼티 값으로 사용할 수 있다.** \r\n\r\n프로퍼티 값이 함수인 경우, 일반 함수와 구분하기 위해, `메서드`라고 부른다. 즉 메서드는 객체에 묶여있는 함수를 의미한다.\r\n\r\n```js\r\nvar circle= {\r\n // 프로퍼티\r\n radius: 5,\r\n\r\n // 메서드\r\n getDiameter: function () {\r\n return 2 * this.radius;\r\n },\r\n};\r\n\r\nconsole.log(person.getDiameter()); // 10\r\n```\r\n## 프로퍼티 접근\r\n- 마침표 프로퍼티 접근 연산자(.)로 사용하는 **마침표 표기법**\r\n- 대괄호 프로퍼티 접근 연산자([...]) 사용하는 **대괄호 표기법**\r\n\r\n\t```js\r\n\tvar person = {\r\n\t\tname: 'Lee'\r\n\t};\r\n\r\n\t// 마침표 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(person.name); // Lee\r\n\r\n\t// 대괄호 표기법에 의한 프로퍼티 접근\r\n\tconsole.log(persone['name']); // Lee\r\n\t```\r\n- 대괄호 표기법을 사용하는 경우 **접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열**이어야 한다.\r\n
\r\n- 대괄호 프로퍼티 접근 연산자 내에 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 **식별자로 해석**한다.\r\n- 객체에 존재하지 않는 프로퍼티에 접근하면 **undefined**를 반환한다.\r\n\r\n\t```js\r\n\t// 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석함\r\n\tconsole.log(person[name]); // ReferenceError: name is not defined\r\n\t// 객체에 존재하지 않는 프로퍼티에 접근하면 undefined반환\r\n\tconsole.log(person.age); // undefined\r\n\t```\r\n\r\n## 프로퍼티 동적 생성 & 삭제\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n// person 객체에 age는 존재x\r\n// 따라서 person객체에 age프로퍼티가 동적으로 생성되고 값이 할당된다.\r\nperson.age = 20; // { age: 20 } \r\nconsole.log(person); // { name: 'Lee', age: 20 }\r\n\r\ndelete person.age; // age 라는 프로퍼티 키가 존재하므로 해당 프로퍼티가 삭제된다.\r\ndelete person.address; // address이라는 프로퍼티 키는 없으므로 삭제 할 수 없지만, 에러는 발생하지 않는다.\r\n\r\nconsole.log(person); // { name: 'Lee' }\r\n```\r\n## ES6에서 추가된 객체 리터럴의 확장 기능\r\n\r\n\r\n### 프로퍼티 축약 표현\r\n```js\r\n// ES5\r\nvar x = 1, y=2;\r\n\r\nvar obj = {\r\n\tx:x,\r\n\ty:y\r\n};\r\nconsole.log(obj); // {x:1, y:2}\r\n\r\n// ES6(프로퍼티 축약 표현)\r\nlet x = 1, y = 2;\r\nconst obj = {x,y};\r\nconsole.log(obj);\r\n```\r\n### 계산된 프로퍼티 이름\r\n`ES5`\r\n```js\r\nvar prefix = \"prop\";\r\nvar i = 0;\r\n\r\nvar obj = {};\r\n\r\n// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성\r\n// '객체 외부'에서만 가능\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\nobj[prefix + \"-\" + ++i] = i;\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n`ES6`\r\n```js\r\nconst prefix = \"prop\";\r\nlet i = 0;\r\n\r\n// '객체 리터럴 내부'에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성\r\nconst obj = {\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n [`${prefix}-${++i}`]: i,\r\n};\r\n\r\nconsole.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }\r\n```\r\n\r\n### 메서드 축약 표현\r\n`ES5`\r\n```js\r\nvar obj = {\r\n\tname: \"Lee\",\r\n\tsayHi: function () {\r\n\t\tconsole.log('Hi!' + this.name);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! Lee\r\n```\r\n`ES6`\r\n```js\r\nconst obj = {\r\n\tname: \"JY\",\r\n\t // 메서드 축약 표현\r\n\tsayHi() {\r\n\t\tconsole.log(`Hi! ${this.name}`);\r\n\t},\r\n};\r\n\r\nobj.sayHi(); // Hi! JY\r\n```\r\n메서드 축약 표현 으로 정의한 메서드는 프로퍼티에 할당한 함수 와 다르게 동작한다.\r\n(이후 자세히 살펴볼 예정)"},{"slug":"posts/Javascript/javascriptdeepdive11","title":"원시 값과 객체의 비교","date":"2024-04-26T14:30:51.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '원시 값과 객체의 비교'의 정리 내용입니다.","tags":["Dummy","JavaScript"],"content":"\r\n# 원시 값과 객체의 비교\r\n\r\n\r\n## 원시 타입 vs 객체 타입\r\n- 원시 타입의 값, 즉 `원시 값`은 **변경 불가능한 값(immutable value)** vs `객체(참조) 타입의 값`, 즉 객체는 **변경 가능한 값(mutable value)**이다.\r\n- `원시 값`을 변수에 할당하면 변수(확보된 메모리 공간)에는 **실제 값이 저장** vs `객체` 를 변수에 할당하면 변수(확보된 메모리 공간)에는 **참조 값이 저장**\r\n- `원시 값을 갖는 변수`를 다른 변수에 할당하면 원본의 **원시 값이 복사되어 전달**(**값에 의한 전달**) vs `객체를 가리키는 변수`를 다른 변수에 할당하면 **원본의 참조 값이 복사되어 전달**(**참조에 의한 전달**)\r\n\r\n## 원시 값\r\n\r\n**원시 값: 원시 타입의 값, 원시 값은 변경 불가능한 값**(`읽기 전용의 값(readonly)`)\r\n\r\n**❗ 변수와 값은 엄연히 다른것!**\r\n- `변수`는 하나의 값을 저장하기 위해 확보한 **메모리 공간 자체** 또는 그 **메모리 공간을 식별하기 위해 붙인 이름**\r\n- `값`은 변수에 저장된 **데이터 표현식이 평가되어 생성된 결과**\r\n- 변경 불가능한 것은 **값에 대한 진술**, 변수는 재할당을 통해, 변수 값을 변경(교체) 가능\r\n\r\n** 변수vs상수 **\r\n+ 변수는 언제든지 `재할당`을 통해 변수 값을 변경(교체)할 수 있다. 그래서 \"변수\"다.\r\n+ 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 `변수`라고 할 수 있다.\r\n+ 하지만, 상수는 단 한 번만 할당이 허용하므로 변수 값을 변경할 수 없다. (이를 변경 불가능한 값으로 동일시하면 안됨 상수는 **재할당이 금지된 변수**)\r\n\r\n### 불변성\r\n변경 불가능한 값인 **원시 값**은 값을 변경하는 것이 아닌, 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 값의 이러한 특성을 `불변성` 이라고 한다. \r\n\r\n**`불변성` 을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법**이 없다.\r\n\r\n### 문자열과 불변성\r\n자바스크립트는 개발자의 편의를 위해 문자열 타입을 원시 타입으로 제공한다.\r\n\r\n문자열은 유사 배열객체이면서 이터러블이므로 **배열과 유사하게 각 문자에 접근**할 수 있다.\r\n\r\n**유사 배열 객체란?**\r\n\r\n- 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있으며, length 프로퍼티를 갖는 객체\r\n- length 프로퍼티를 갖기 때문에 유사 배열 객체 이며, for 문으로 순회도 할 수 있다.\r\n\t```js\r\n\tvar str = 'string';\r\n\t// 유사배열이므로, 배열과 유사하게 인덱스를 사용해 각 문자로 접근\r\n\tconsole.log(str[0]);\r\n\t// 원시 값인 문자열이 객체처럼 동작\r\n\tconsole.log(str.length); //6\r\n\tconsole.log(str.toUpperCase()); //STRING\r\n\t```\r\n```js\r\nvar str = 'string'\r\n// 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근\r\n// 하지만 문자열은 원시 값이므로 변경할 수 없다. 이때 에러는 발생 x\r\nstr[0] = 'S'\r\nconsole.log(str)// string\r\n```\r\n이는 데이터의 신뢰성을 보장한다. 변수에 새로운 문자열을 재할당하는 것은 물론 가능\r\n\r\n### 값에 의한 전달\r\n```js\r\nvar score = 80;\r\nvar copy = score;\r\n\r\nscore = 100;\r\n\r\nconsole.log(score); // 100 (원본 값)\r\nconsole.log(copy); // 80 (복사한 값)\r\n```\r\nscore는 변수 값 80으로 평가 되므로, copy 변수에도 80이 할당된다. 이때 새로운 숫자 값 80이 생성되어 copy변수에 할당된다\r\n\r\n변수(copy)에는 할당되는 변수(score)의 **원시 값이 복사되어 전달**된다. \r\n 이를, `값에 의한 전달`이라고 한다.\r\n\r\ncopy와 score는 별개의 값으로써, 서로의 변수의 값에 어떠한 영향도 주지않음.\r\n\r\n또한,\r\n엄격하게 말하자면, 변수에는 값이 전달되는 것이 아니라, **메모리 주소가 전달되는 것이다.**\r\n이는 변수와 같은 식별자는 값이 아니라 **메모리 주소를 기억**하기 때문이다.\r\n> 이처럼 \"값에 의한 전달\"도 사실은 값을 전달하는 것이 아니라, 메모리 주소를 전달한다. 단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.\r\n\r\n하지만 중요한 것은,\r\n\r\n❗ **결국 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.**\r\n\r\n## 객체\r\n> 자바스크립트는 다른 객체지향 언어와는 달리, 클래스 없이 객체 생성가능하며, 객체가 생성된 이후라도 동적으로 프로퍼티와 메서드 추가가 가능하다. V8 엔진에서는 **히든 클래스**라는 방식을 사용한다.\r\n\r\n### 변경 가능한 값\r\n**객체(참조)타입의 값, 즉 객체는 변경 가능한 값**\r\n\r\n원시 값과 다르게, 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 **참조 값**에 접근한다!\r\n- `참조 값`: 생성된 객체가 저장된 메모리 공간의 주소, 그 자체\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n\r\n// person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다.\r\nconsole.log(person) //{name: \"Lee\"}\r\n```\r\n객체를 할당한 변수의 경우 \"변수는 객체를 가리키고(참조하고)있다\" 라고 표현한다.\r\n```person 변수는 {name: 'Lee'}를 가리키고(참조하고) 있다.```\r\n객체를 할당한 변수는 원시 값과 달리, 재할당 없이 객체를 직접 변경할 수 있다.\r\n즉, 재할당 없이 **프로퍼티를 동적으로 추가, 프로퍼티 값을 갱신, 프로퍼티 자체를 삭제도 가능**\r\n\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// 프로퍼티 값 갱신\r\nperson.name = \"Kim\";\r\n\r\n// 프로퍼티 값 동적 추가\r\nperson.address = \"Seoul\";\r\n\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n원시 값과는 다르게 **여러개의 식별자가 하나의 객체를 공유할 수 있다**라는 부작용이 있다.\r\n\r\n### 얕은 복사와 깊은 복사\r\n객체를 프로퍼티의 값으로 갖는 객체의 경우 \r\n- `얕은 복사`는 **한단계만 복사**하는 것을 말하며, 객체의 중첩되어있는 객체의 경우 참조 값을 복사한다.\r\n- `깊은 복사`는 **객체에 중첩되어 있는 객체까지 모두 복사**하며, **원시 값처럼 완전한 복사본을 만든다.**\r\n\r\n### 참조에 의한 전달\r\n```js\r\nvar person = {\r\n\tname: 'Lee'\r\n};\r\n// 참조 값을 복사(얕은 복사)\r\nvar copy = person;\r\n```\r\nperson을 다른 변수(사본, copy)에 할당하면 **원본의 참조 값이 복사되어 전달**된다. 이를 **참조에 의한 전달** 이라고 한다.\r\n원본 person과 사본 copy는 동일한 참조 값을 가진다. 즉, 둘 모두 동일한 객체를 가리킨다. 이것은 **두 개의 식별자가 하나의 객체를 공유한다는 것을 의미**\r\n```js\r\nvar person = {\r\n name: \"Lee\",\r\n};\r\n\r\n// \"참조 값\"을 \r\n복사, copy와 person이 동일한 참조 값을 갖는다.\r\nvar copy = person;\r\n// 동일한 객체 참조하므로\r\nconsole.log(copy === person); // true\r\n\r\n// copy를 통해 객체의 name 프로퍼티를 변경한다.\r\ncopy.name = \"Kim\";\r\n\r\n// person을 통해 객체의 address 프로퍼티를 동적 생성한다.\r\nperson.address = \"Seoul\";\r\n\r\n// copy와 person은 동일한 객체를 가리키므로 서로 영향을 주고받음\r\nconsole.log(person); // { name: 'Kim', address: 'Seoul' }\r\nconsole.log(copy); // { name: 'Kim', address: 'Seoul' }\r\n```\r\n\"값에 의한 전달\"과 \"참조에 의한 전달\"은 **식별자가 기억하는 메모리 공간에 저장되어 있는 값을 전달한다는 면에서 동일**하다. 따라서 **\"참조에 의한 전달\"은 존재하지 않고 \"값에 의한 전달\"만이 존재한다고 할 수 있다.**"},{"slug":"posts/Javascript/javascriptdeepdive09","title":"자바스크립트 딥다이브: 09.타입 변환과 단축평가","date":"2024-04-22T12:00:24.000Z","image":"javascript.png","summary":"자바스크립트 딥다이브 책 내용 중 '타입 변환과 단축평가'의 정리 내용입니다.","tags":["JavaScript"],"content":"\r\n# 타입 변환과 단축 평가\r\n개발자가 의도적으로 값의 타입을 변환하는 것: `명시적 타입 변환` or `타입캐스팅`\r\n\r\n개발자의 의도와는 상관없이 표현식을 평가하는 도중에 **자바스크립트 엔진에 의해 암묵적으로 타입이 변환**되는 것: `암묵적 타입 변환` or `타입강제 변환`\r\n\r\n## 암묵적 타입 변환\r\n> 자바스크립트 엔진이 표현식을 평가할 때 개발자의 의도와는 상관없이 `코드의 문맥을 고려해 암묵적으로` 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 있다.\r\n\r\n암묵적 타입 변환은 문자, 숫자, 불리언 같은 **원시 타입**중 하나로 타입을 자동 변환한다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// 숫자 타입 \r\n0+'' // '0'\r\nNaN + '' // 'NaN'\r\nInfinity + '' // 'Infinity'\r\n\r\n// 불리언 타입\r\ntrue + '' // 'true'\r\n\r\n// null 타입\r\nnull + '' // 'null'\r\n\r\n// undefined 타입\r\nundefined + ''; // \"undefined\"\r\n\r\n// 심벌 타입\r\n(Symbol()) + ''; // TypeError: Cannot convert a Symbol value to a string\r\n\r\n// 객체 타입\r\n({}) + ''; // \"[object Object]\"\r\nMath + ''; // \"[object Math]\"\r\n[] + ''; // \"\"\r\n[10, 20] + ''; // \"10,20\"\r\n(function(){}_ + ''; // \"function(){}\"\r\nArray + ''; // \"function Array() { [native code] }\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// 문자열 타입(+ 단항연산자는 피연산자가 숫자타입이 아니면 숫자 타입으로 암묵적 타입 변환 수행)\r\n+'' // -> 0\r\n+'0' // 0\r\n+'string' // -> NaN\r\n\r\n// 불리언 타입\r\n+true // -> 1\r\n\r\n// null 타입\r\n+null // -> 0\r\n\r\n//undefined 타입\r\n+undefined // -> NaN\r\n\r\n// 심벌 타입\r\n+Symbol(); // TypeError: Cannot convert a Symbol value to a number\r\n\r\n// 객체 타입\r\n+{}; // -> NaN\r\n+[]; // -> 0\r\n+[10, 20]; // NaN\r\n+function () {}; // NaN\r\n```\r\n**빈 문자열 (''), 빈 배열([]), null, false**는 **0**으로, **true**는 **1**로 변환된다. **객체와 빈 배열이 아닌 배열,undefined**는 변환되지 않아 **NaN**이 된다는 것에 주의하자\r\n\r\n### 불리언 타입으로 변환\r\nif문, for문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가 되어야 하는 표현식이다.\r\n```js\r\n// 모두 코드 블록 실행됨\r\nif(!false) console.log(false + ' is falsy value')\r\nif(!undefined) console.log(undefined + 'is falsy value')\r\nif(!NaN) console.log(NaN + 'is falsy value');\r\nif(!null) console.log(null + 'is falsy value');\r\n```\r\n자바스크립트 엔진은 불리언 타입이 아닌 값을 `Truthy 값(참으로 평가되는 값)` or `Falsy 값(거짓으로 평가되는 값)` 으로 구분한다.\r\n\r\n**자바스크립트 엔진이 Falsy 값으로 판단하는 값**\r\n+ false\r\n+ undefined\r\n+ null\r\n+ 0, -0\r\n+ NaN\r\n+ ''(빈 문자열)\r\n\r\n## 명시적 타입 변환\r\n**개발자의 의도에 따라 명시적으로 타입을 변환하는 것** \r\n\r\n**표준 빌트인 함수(String,Number,Boolean)**을 new연산자 없이 호출하는 방법과 **빌트인 메서드를 사용하는 방법**, 그리고 **암묵적 타입 변환**을 이용하는 방법이 있다.\r\n\r\n### 문자열 타입으로 변환\r\n```js\r\n// String 생성자 함수를 new 연산 없이 호출\r\nString(1); // -> \"1\"\r\nString(NaN); // -> \"NaN\"\r\nString(Infinity); // -> \"Infinity\"\r\nString(false); // -> \"false\"\r\n\r\n// Object.prototype.toString 메서드를 사용하는 방법\r\n(NaN).toString() // -> 'NaN'\r\n(true).toString() // -> 'true'\r\n\r\n// 문자열 연결 연산자\r\nNaN + '' // -> \"NaN\"\r\n```\r\n\r\n### 숫자 타입으로 변환\r\n```js\r\n// Number 생성자 함수를 new 연산자 없이 호출하는 방법\r\nNumber('0') // -> 0\r\nNumber(10.53) // -> 10.53\r\n\r\n// parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)\r\nparseInt('0') // -> 0\r\nparseFloat('10.53') // -> 10.53\r\n\r\n// + 단항 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n+'0'\r\n+'-1'\r\n// 불리언 타입 => 숫자 타입\r\n+true; //->1\r\n\r\n// * 산술 연산자를 이용하는 방법\r\n// 문자열 타입 => 숫자 타입\r\n'0' * 1;\r\n'-1' * 1; //1\r\n// 불리언 타입 => 숫자 타입\r\ntrue * 1; //->1\r\n```\r\n\r\n### 불리언 타입으로 변환\r\n```js\r\n// 1. Boolean 생성자 함수를 new 키워드 없이 호출하는 방법\r\nBoolean('x'); // true\r\n\r\nBoolean(0) // false\r\nBoolean(NaN) // false\r\nBoolean(Infinity) // true\r\n\r\nBoolean(null) // false\r\nBoolean(undefined) // false\r\n\r\nBoolean({}) //True\r\n\r\n//2. !(부정 논리 연산자) 두 번 사용\r\n!!'x'; // true ( !(!'x') === !(false) -> true )\r\n```\r\n\r\n## 단축 평가\r\n> `단축 평가` : 논리 연산의 결과를 결정하는 피연산자를 `타입 변환하지 않고 그대로 반환`\r\n- 단축 평가는 표현식을 평가하는 도중에 평가결과가 확정 경우 → 나머지 평가 과정을 생략한다.\r\n단축 평가 표현식\r\n\r\n| 단축 평가 표현식 | 평가 결과 |\r\n|--|--|\r\n|true ll anything | true |\r\n|false ll anything | anything |\r\n| true && anything | anything|\r\n| false && anything | false |\r\n\r\n### 논리 연산자를 단축 평가\r\n`논리곱(&&)` 에서 논리 연산의 결과를 결정하는 것은 **두 번째 피연산자**\r\n```js\r\n'Cat' && 'Dog'; // Dog\r\n```\r\n\r\n`논리곱(&&) 연산자` 는 두 개의 피연산자가 `모두 true로 평가될 때 true를 반환`, `좌항 -> 우항으로 평가가 진행` \r\n\r\n\r\n`논리합(||)` 에서 논리 연산의 결과를 결정하는 것은 **첫 번째 피연산자** 그러므로 첫 번째 연산자 그대로 반환\r\n```js\r\n'Cat' || 'Dog' // Cat\r\n```\r\n\r\n`논리합 (||) 연산자` 는 `두 개의 피연자 중 하나만 true로 평가되어도 true로 반환`하며, 역시 `좌항에서 우항으로 평가가 진행`\r\n\r\n ```js\r\n // 논리합(||) 연산\r\n\"Cat\" || \"Dog\"; // \"Cat\"\r\nfalse || \"Dog\"; // \"Dog\"\r\n\"Cat\" || false; // \"Cat\"\r\n\r\n// 논리곱(&&) 연산\r\n\"Cat\" && \"Dog\"; // \"Dog\"\r\nfalse && \"Dog\"; // \"false\"\r\n\"Cat\" && false; // \"false\"\r\n ```\r\n **단축평가 사용 예시**\r\n - **if 문대체**\r\n논리 연산자 단축평가를 통해서 if문도 대체할 수 있으며, 값 할당시 보다 더 깔끔할 수 있다.\r\n\t```js\r\n\tvar done = false;\r\n\tvar message = \"\";\r\n\r\n\t// 조건문으로 값 할당\r\n\tif (!done) message = \"미완료\";\r\n\r\n\tmeessage = done || \"미완료\";\r\n\tconsole.log(message) // 미완료\r\n\t```\r\n- **객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null또는 undefined일 경우** \r\n\r\n\t이러한 경우 타입 에러가 발생한다. 하지만, 단축평가를 사용하면 에러 발생 x\r\n\t```js\r\n\t// elem이 null 또는 undefined같은 Falsy값이면 elem으로 평가\r\n\t// elem이 Truthy값이면 elem.value 값으로 평가\r\n\tvar elem = null;\r\n\tvar value = elem && elem.value // null\r\n\t```\r\n- **함수 매개변수에 기본값을 설정**\r\n함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 단축평가 사용해 매개변수에 기본값을 설정한다면 에러 방지 가능\r\n\t```js\r\n\t// 단축 평가를 사용한 매개변수의 기본값 설정\r\n\tfunction getStringLength(str) {\r\n\t str = str || \"\";\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\tgetStringLength('hi'); //2\r\n\t// Es6의 매개변수 default parameter 설정\r\n\tfunction getStringLength(str = \"\") {\r\n\t return str.length;\r\n\t}\r\n\tgetStringLength(); // 0\r\n\t```\r\n\r\n## 옵셔널 체이닝 연산자\r\n`?` : 좌항의 피 연산자가 null 또는 undefined인 경우 `undefined 반환`, 그렇지않으면 `우항의 포로퍼티 참조`\r\n```js\r\nvar elem = null;\r\nvar value = elem?.value; // undefined\r\n```\r\n- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 안전하게 참조할 때 유용\r\n- 옵셔널 체이닝 도입 이전에는 `논리곱(&&)을 사용한 단축 평가`를 통해 변수가 null 또는 undefined 인지 확인했음\r\n```js\r\n// 좌항이 Falsy라면 좌항 그대로 반환(0이나 ''반환 할 때도)\r\nvar str = \"\"; //\r\nvar length = str && str.length; // ''\r\n\r\n// 좌항 피연산자가 Falsy값이라도 null 또는 undefined 만 아니면, 우항의 프로퍼티를 참조한다.\r\nvar str = \"\";\r\nvar length = str?.length; // 0\r\n```\r\n\r\n## null 병합 연산자 \r\n`??` : 좌항의 피연산자가 **null또는 undefined인 경우** `우항의 피연산자 반환` 그렇지 않으면 `좌항 피연산자 반환`한다.\r\n```js\r\nvar foo = null ?? \"default string\"; // \"default string\"\r\n```\r\n- 변수에 기본값을 설정할 때 유용하며, 그전에는 논리합(||)을 사용한 단축평가로 변수에 기본값 설정\r\n\t```js\r\n\t// 좌항의 피연산자가 Falsy값이면, 우항의 피연산자를 반환 \r\n\t//(Falsy 값인 0 이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생한다.)\r\n\tvar foo = \"\" || \"default string\"; // \"default string\"\r\n\r\n\t// 좌항의 피연산자가 Falsy값이라도 null 또는 undefined 가 아니면, 좌항의 피연산자를 그대로 반환한다.\r\n\tvar foo = \"\" ?? \"default string\"; // ''\r\n\t```"}]},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/dfs.json b/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/dfs.json deleted file mode 100644 index 3f8cb24..0000000 --- a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/dfs.json +++ /dev/null @@ -1 +0,0 @@ -{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy","all"],"currentTag":"dfs","posts":[{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0 **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\"트리를\r\n\r\n\r\n1. 브라우저가 사용자 요청한 주소에서 HTML파일을 다운로드한다.\r\n\r\n2. 브라우저의 렌더링 엔진이 HTML을 파싱해 DOM노드로 구성된 트리 즉, `DOM`을 만든다.\r\n3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.\r\n4. 브라우저의 렌더링 엔진이 이 CSS역시 파싱해 CSS 노드로 구성된 트리 즉, `CSSOM`을 만든다\r\n5. 브라우저는 DOM 노드를 순회하는데 모든 노드가 아닌, **사용자 눈에 보이는 노드만**(display:none과 같은 노드는 방문 x) 방문한다.\r\n6. 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. \r\n>\t- `레이아웃`: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이며, 이 과정을 거치면 **페인팅 과정도 거치게 된다.**\r\n>- `페인팅`: 레이아웃 단계를 거친 노드의 색과 같은 **실제 유효한 모습을 그리는 과정**\r\n\r\n## 가상 DOM의 탄생 배경\r\n\r\n### 웹페이지를 추가로 렌더링 하는데 드는 비용\r\n앞에서 살펴본 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다. \r\n\r\n또한 정보를 보여주는데 그치지 않고 사용자의 인터렉션을 통해 다양한 정보를 노출해야 하기에, 렌더링이 완료된 이후에도 **사용자의 인터렉션으로 웹페이지가 변경되는 상황** 또한 고려해야 한다.\r\n\r\n이 과정에서 예를 들어,\r\n- 특정 요소의 색상이 변경되는 경우: 페인팅만이 일어나서 빠른처리가 가능하다.\r\n\r\n- **특정 요소의 노출 여부나 사이즈가 변경되는 경우**: 레이아웃이 일어나고, 레이아웃은 **필연적으로 리페인팅을 발생**하기 때문에 더 많은 비용이 든다.\r\n\r\n- DOM 변경이 일어나는 요소가 **자식 요소를 많이 가지고 있는 경우**: 하위 자식 요소 역시 변경되야 해서 더 많은 비용 지불\r\n\r\n이러한 추가 렌더링 작업은 하나의 페이지에서 모든 작업이 일어나는 `싱글 페이지 애플리케이션(SPA)`에서 더 많아진다. \r\n\r\n페이지가 변경될 때 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작하는 일반적인 웹페이지와는 다르게, 하나의 페이지에서 계속해서 요소의 위치를 재계산하게 된다.\r\n\r\n그러므로 라우팅이 변경되는 경우 고정된 헤더와 같은 요소들을 제외하고 대부분의 요소를 삭제, 삽입 및 요소의 위치를 다시 계산해야 하므로, DOM을 관리하는 과정에서 부담하는 비용이 커진다.\r\n\r\n### 가상 DOM의 탄생\r\n사용자의 인터렉션에 따라 DOM의 모든 변경 사항을 추적하는 것은 개발자에게는 너무나 수고스러운 일이다. 그렇기에 모든 DOM의 변경보다 **결과적으로 만들어지는 DOM 결과물 하나만 아는 것**이 개발자의 입장에서 더 유용할 것이다.\r\n\r\n이것을 해결하기 위해 탄생한 것이 바로 `가상 DOM`이다. \r\n가상 DOM은 실제 브라우저가 아닌 리액트가 관리하는 가상의 DOM을 의미한다.\r\n\r\n가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 **메모리에 저장**하고, 리액트가 실제 변경에 대한 준비가 완료되었을 때, 실제 브라우저의 DOM에 반영한다.\r\n\r\n이렇게 DOM 계산을 메모리에서 계산하는 과정을 한 번 거치게 된다면 실제로는 여러 번 발생했을 렌더링 과정을 최소화하여 부담을 덜 수 있다.\r\n\r\n> 가상 DOM은 **일반적인 브라우저보다 무조건 항상 빠르지는 않다**. \r\n>\r\n> 무조건 빠른 것이 아닌, 대부분의 상황에서 웬만한 애플리케이션을 만들 정도로 충분히 빠르다고 보는 것이 옳다.\r\n\r\n## 가상 DOM을 위한 아키텍처, 리액트 파이버\r\n가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 `리액트 파이버`이다.\r\n\r\n`리액트 파이버`는 리액트에서 관리하는 평범한 자바스크립트 객체이다. \r\n`파이버`는 `파이버 재조정자(fiber reconciler)`가 관리하는데, 가상 DOM과 실제 DOM을 비교하여 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청하는 역할을 한다.\r\n\r\n> 재조정(reconcilation): 리액트에서 어떤 부분을 새로 렌더링 해야하는지 가상 DOM과 실제 DOM을 비교하는 과정 \r\n\r\n파이버는 애니메이션,레이아웃,사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하며, 다음과 같은 일을 할 수 있다.\r\n- 작업을 작은 단위로 쪼개고 **우선순위를 매긴다.**\r\n\r\n- 이 작업들은 일시 정지 및 다시 시작이 가능하다.\r\n\r\n- 이전 작업을 재사용 하거나 필요 없는 경우에는 폐기할 수 있다.\r\n\r\n이러한 모든 과정은 **비동기로 일어난다**. 과거에는 이러한 조정 알고리즘이 동기적인 스택 알고리즘으로 이뤄져 있었고, 동기적으로 작업이 이뤄졌기에 자바스크립트의 싱글 스레드의 특징 상 수행 중인 작업은 중단될 수 없었다. \r\n이러한 문제 때문에 리액트 팀은 스택 조정자 대신 파이버라는 개념을 탄생시킨다.\r\n\r\n### 파이버는 어떻게 구현되어 있을까?\r\n`파이버`는 일단 하나의 작업 단위로 구성되어 있다. 리액트는 작업 단위를 하나씩 처리하고, **finishWork( )** 라는 작업으로 마무리한다. 그리고 이 작업을 커밋해 브라우저 DOM에 가시적인 변경 사항을 만들어 낸다. \r\n이러한 단계는 두 단계로 나뉘는데,\r\n- `렌더 단계`: 사용자에게 노출되지 않는 모든 **비동기** 작업을 수행하고, **우선 순위를 지정하거나 중지시키거나 버리는 등의 작업이 일어난다.**\r\n- `커밋 단계`: DOM에 실제 변경 사항을 반영하기 위한 작업, commitWork( )가 실행되는데, **동기식**으로 일어나고 중단될 수 없다.\r\n\r\n파이버는 실제 리액트 코드에서 이렇게 구현되어 있다.\r\n```js\r\nfunction FiberNode(tag, pendingProps, key, mode) {\r\n // Instance\r\n this.tag = tag;\r\n this.key = key;\r\n this.elementType = null;\r\n this.type = null;\r\n this.stateNode = null;\r\n\r\n // Fiber\r\n this.return = null;\r\n this.child = null;\r\n this.sibling = null;\r\n this.index = 0;\r\n\r\n this.ref = null;\r\n\r\n this.pendingProps = pendingProps;\r\n this.memoizedProps = null;\r\n this.updateQueue = null;\r\n this.memoizedState = null;\r\n this.dependencies = null;\r\n\r\n this.mode = mode;\r\n\r\n // Effects\r\n this.effectTag = NoEffect;\r\n this.nextEffect = null;\r\n\r\n this.firstEffect = null;\r\n this.lastEffect = null;\r\n\r\n this.expirationTime = NoWork;\r\n this.childExpirationTime = NoWork;\r\n\r\n this.alternate = null;\r\n}\r\n```\r\n위와 같이 파이버는 단순한 자바스크립트 객체로 구성되어 있다. \r\n파이버와 리액트 요소의 한가지 중요한 차이점은 `리액트 요소`는 렌더링이 발생할 때 마다 새롭게 생성되지만, `파이버`는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 **가급적이면 재사용된다**는 것이다.\r\n\r\n```js\r\nfunction createFiber(tag, pendingProps, key, mode) {\r\n return new FiberNode(tag, pendingProps, key, mode);\r\n}\r\n```\r\n```js\r\nfunction createFiberFromElement(element, mode, expirationTime) {\r\n let owner = null;\r\n const type = element.type;\r\n const key = element.key;\r\n const pendingProps = element.props;\r\n const fiber = createFiberFromTypeAndProps(\r\n type,\r\n key,\r\n pendingProps,\r\n owner,\r\n mode,\r\n expirationTime,\r\n );\r\n\r\n return fiber;\r\n}\r\n```\r\n이제 여기서 선언된 주요 속성을 살펴보면서 어떤 내용을 담고 있는지 살펴보자.\r\n\r\n- `tag` : 파이버는 하나의 element에 하나의 파이버가 생성되어 1:1 관계를 가진다. 여기서 **1:1로 매칭된 정보를 가지고 있는 것**이 tag필드이다. 연결되는 것은 컴포넌트, DOM노드 등이 될 수 있는데, 될 수 있는 것들은 다음과 같다.\r\n- `stateNode`: 이 속성은 파이버 자체에 대한 참조 정보를 가지고 있다.\r\n- `child`, `sibling`, `return` : 파이버 간의 관계 개념을 나타내는 속성이다. 파이버는 트리 형식을 구성하는데 이 트리 형식을 구성하는데 필요한 정보가 이 속성 내부에 적용된다. 한 가지 리액트 컴포넌트 트리와 다른 점은 children이 없다는 것 즉 **단 하나**의 `child`만이 존재한다는 것이다.\r\n\r\n\t여러 개의 자식이 존재할 경우 항상 **첫 번째 자식의 참조**로 구성되며, 나머지는 자식들은 동등한 `sibling`으로 구성, `return`은 부모 파이버를 의미한다.\r\n\r\n- `index` : 여러 형제들 사이에서 자신의 위치를 나타낸다.\r\n- `pedingProps` : 아직 처리하지 못한 props\r\n- `memoizedProps` : pendingProps를 기준으로 렌더링이 완료된 이후에 pendingProps를 memoizedProps에 저장하여 관리한다.\r\n- `updateQueue` : 상태 업데이트, 콜백 함수, DOM 업데이트 등 작업을 담아두는 Queue.\r\n- `memoizedState` : 함수 컴포넌트의 훅 목록이 저장된다.\r\n- `alternate`: 뒤이어 설명할 리액트 파이버 트리와 이어질 개념. 리액트의 트리는 두 개인데, alternate는 반대 트리의 파이버를 가리킨다.\r\n\r\n이렇게 생성된 파이버는 state가 변경되거나 생명주기 메서드가 실행되거나 DOM의 변경이 필요한 시점 등에 실행된다. \r\n이러한 작업들은 작은 단위로 나눠서 처리할 수도, 애니메이션과 같이 우선순위가 높은 작업은 빨리 처리하거나, 낮은 작업을 연기시키는 등 좀 더 유연하게 처리된다.\r\n\r\n\r\n리액트 개발 팀은 사실 리액트는 가상 DOM이 아닌 Value UI, 즉 값을 가지고 있는 UI를 관리하는 라이브러리라는 내용을 피력한 바가 있다. \r\n\r\n즉, 리액트의 핵심원칙은 **UI를 문자열, 숫자, 배열과 같은 값으로 관리한다는 것**이다. \r\n변수에 이러한 UI관련 값을 보관하고, 리액트의 자바스크립트 코드 흐름에 따라 이를 관리하고, 표현하는 것이 바로 리액트다.\r\n\r\n"}]},"__N_SSG":true} \ No newline at end of file diff --git "a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/\353\260\261\354\244\200.json" "b/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/\353\260\261\354\244\200.json" deleted file mode 100644 index 13b0eb1..0000000 --- "a/_next/data/r3TVFGStx9-VzPRjNWTfb/posts/tag/\353\260\261\354\244\200.json" +++ /dev/null @@ -1 +0,0 @@ -{"pageProps":{"tags":["react","deepdive","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","JavaScript","Dummy"],"currentTag":"백준","posts":[{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n![](1.png)\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\r\n\"이미지\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0\r\n \r\nstones\r\nk\r\nresult\r\n\r\n\r\n \r\n[2, 4, 5, 3, 2, 1, 4, 2, 5, 1]\r\n3\r\n3\r\n\r\n\r\n \r\n\r\n##### **입출력 예에 대한 설명**\r\n\r\n[](https://github.com/phnml1/CodingTest/blob/master/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/3/64062.%E2%80%85%EC%A7%95%EA%B2%80%EB%8B%A4%EB%A6%AC%E2%80%85%EA%B1%B4%EB%84%88%EA%B8%B0/README.md#%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%98%88%EC%97%90-%EB%8C%80%ED%95%9C-%EC%84%A4%EB%AA%85)\r\n\r\n----------\r\n\r\n**입출력 예 #1**\r\n\r\n첫 번째 친구는 다음과 같이 징검다리를 건널 수 있습니다. \r\n![1.png](1.png)\r\n\r\n첫 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n두 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![2.png](2.png)\r\n\r\n두 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n세 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다. \r\n![3.png](3.png)\r\n\r\n세 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다. \r\n네 번째 친구가 징검다리를 건너려면, 세 번째 디딤돌에서 일곱 번째 디딤돌로 네 칸을 건너뛰어야 합니다. 하지만 k = 3 이므로 건너뛸 수 없습니다. \r\n![4.png](4.png)\r\n\r\n따라서 최대 3명이 디딤돌을 모두 건널 수 있습니다.\r\n\r\n## 접근 방법\r\n브루트 포스로 1명씩 건너기에는, stones 배열의 크기가 최대 200,000이고, stones 배열의 각 원소들의 값 역시 최대 200,000,000이기 때문에, 시간 초과가 날 확률이 높다고 생각했고(사실 그렇게 쉬우면 lv3 일리가 없지), 아니나 다를까 시간초과가 났다. \r\n\r\n고민하다가 도저히 해결책이 안나와서 찾아보니 `이분탐색`을 사용하여 풀 수 있었다.\r\n\r\n- 건널 수 있는 인원의 최소는 1명, 최대는 max(stones)명이다. 모든 돌들의 합이 같거나, 다르다 하더라도 건널수 없는 곳이 k이하면 건널 수 있기 때문이다. \r\n- 따라서 start = 1 end = max(stones)로 이분탐색을 시작할 수 있다.\r\n\r\nmid 값만큼의 사람이 건널 수 있는지 확인하기 위한 check함수는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n\t # 밟을 수 없으므로 건너뛰어야하는 횟수를 늘린다.\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n # 밟을 수 있으므로 최대 건너뛰는 횟수를 초기화시킨다.\r\n else:\r\n cnt = 0;\r\n # 건너뛰는 횟수가 k보다 크거나 같으면 안되므로 False 리턴 \r\n if cnt>=k:\r\n return False;\r\n return True;\r\n```\r\n건널 수 있다면 mid보다 큰 범위에서 값을 찾아야하므로 start를 mid+1로 갱신하고, 반대라면, mid보다 작은 범위에서 값을 찾아야하므로 end를 mid-1로 갱신한다.\r\n \r\ncheck 시간 복잡도는 O(N)이고 이분탐색을 했을 때 O(logN)의 시간복잡도가 나오므로, 총 O(NlogN)의 시간 복잡도가 나오므로, 시간초과가 나지 않는다.\r\n\r\n전체 코드는 다음과 같다.\r\n```python\r\ndef check(stones, mid,k):\r\n cnt = 0;\r\n for stone in stones:\r\n if (stone - mid) <= 0:\r\n cnt += 1;\r\n else:\r\n cnt = 0;\r\n if cnt>=k:\r\n return False;\r\n return True;\r\n\r\ndef solution(stones, k):\r\n start,end = 1,max(stones);\r\n answer = 0;\r\n while start<=end:\r\n mid = (start + end) // 2;\r\n if check(stones, mid,k):\r\n start = mid+1;\r\n else:\r\n answer = mid;\r\n end = mid-1; \r\n return answer;\r\n```\r\n\r\n## 느낀 점\r\n이분탐색 문제를 많이는 아니더라도 어느정도는 풀어봤다고 생각했는데, 이 문제에서 이분탐색으로 푸는 아이디어를 떠올리지 못해서 아쉽다. \r\n\r\n또한 처음에 위에 코드의 6번째줄에서 else문을 쓰지않고, 이러한 코드로 제출하여서 시간초과가 났다.\r\n```python\r\nif (stone - mid) <= 0:\r\n\tcnt += 1;\r\nif (stone - mid)>0:\r\n\tcnt = 0;\r\n```\r\nㅎㅎ.. 사실 위와 같은 경우에서 if else문을 쓰는 것이 기본인데, 그래도 시간초과가 날 수 있는 직접적인 원인까지는 되지 않을 거라고 안일하게 생각해서 코드를 짠 게 화근이었다. 기본을 지키자!"}]},"__N_SSG":true} \ No newline at end of file diff --git a/_next/static/-8eDYE39v-ava91BZqEI9/_buildManifest.js b/_next/static/-8eDYE39v-ava91BZqEI9/_buildManifest.js new file mode 100644 index 0000000..28645f1 --- /dev/null +++ b/_next/static/-8eDYE39v-ava91BZqEI9/_buildManifest.js @@ -0,0 +1 @@ +self.__BUILD_MANIFEST=function(s,a,c,t){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,a,c,t,"static/chunks/pages/index-4585cc75c60696f1.js"],"/_error":["static/chunks/pages/_error-ee5b5fb91d29d86f.js"],"/posts/search":[s,a,c,t,"static/chunks/pages/posts/search-c3b2e67574e5b2ba.js"],"/posts/tag/[tag]":[s,a,c,t,"static/chunks/pages/posts/tag/[tag]-472b20abeb548c59.js"],"/posts/[category]":[s,a,c,t,"static/chunks/pages/posts/[category]-1243ede844aa0e50.js"],"/[...detail]":[s,a,c,"static/chunks/393-039147b2430c99aa.js",t,"static/chunks/pages/[...detail]-801909bc4ff4e1ea.js"],sortedPages:["/","/_app","/_error","/posts/search","/posts/tag/[tag]","/posts/[category]","/[...detail]"]}}("static/css/4633ec6f7ca519e3.css","static/css/83110ef01d855e81.css","static/chunks/135-0e45b9dfc77f7376.js","static/chunks/979-7390dd4fc9e19803.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/r3TVFGStx9-VzPRjNWTfb/_ssgManifest.js b/_next/static/-8eDYE39v-ava91BZqEI9/_ssgManifest.js similarity index 100% rename from _next/static/r3TVFGStx9-VzPRjNWTfb/_ssgManifest.js rename to _next/static/-8eDYE39v-ava91BZqEI9/_ssgManifest.js diff --git a/_next/static/chunks/393-7217afb82985f4a5.js b/_next/static/chunks/393-039147b2430c99aa.js similarity index 99% rename from _next/static/chunks/393-7217afb82985f4a5.js rename to _next/static/chunks/393-039147b2430c99aa.js index f7961bd..714c6e3 100644 --- a/_next/static/chunks/393-7217afb82985f4a5.js +++ b/_next/static/chunks/393-039147b2430c99aa.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[393],{4470:function(e){"use strict";var t=Object.prototype.hasOwnProperty,n=Object.prototype.toString,o=Object.defineProperty,r=Object.getOwnPropertyDescriptor,a=function(e){return"function"==typeof Array.isArray?Array.isArray(e):"[object Array]"===n.call(e)},i=function(e){if(!e||"[object Object]"!==n.call(e))return!1;var o,r=t.call(e,"constructor"),a=e.constructor&&e.constructor.prototype&&t.call(e.constructor.prototype,"isPrototypeOf");if(e.constructor&&!r&&!a)return!1;for(o in e);return void 0===o||t.call(e,o)},l=function(e,t){o&&"__proto__"===t.name?o(e,t.name,{enumerable:!0,configurable:!0,value:t.newValue,writable:!0}):e[t.name]=t.newValue},s=function(e,n){if("__proto__"===n){if(!t.call(e,n))return;if(r)return r(e,n).value}return e[n]};e.exports=function e(){var t,n,o,r,c,u,d=arguments[0],p=1,h=arguments.length,f=!1;for("boolean"==typeof d&&(f=d,d=arguments[1]||{},p=2),(null==d||"object"!=typeof d&&"function"!=typeof d)&&(d={});p4&&f.slice(0,4)===i&&l.test(t)&&("-"===t.charAt(4)?g=i+(n=t.slice(5).replace(s,d)).charAt(0).toUpperCase()+n.slice(1):(h=(p=t).slice(4),t=s.test(h)?p:("-"!==(h=h.replace(c,u)).charAt(0)&&(h="-"+h),i+h)),m=r),new m(g,t))};var l=/^data[-\w.:]+$/i,s=/-[a-z]/g,c=/[A-Z]/g;function u(e){return"-"+e.toLowerCase()}function d(e){return e.charAt(1).toUpperCase()}},8055:function(e,t,n){"use strict";var o=n(6230),r=n(3970),a=n(629),i=n(647),l=n(1305),s=n(2537);e.exports=o([a,r,i,l,s])},1305:function(e,t,n){"use strict";var o=n(1422),r=n(7589),a=o.booleanish,i=o.number,l=o.spaceSeparated;e.exports=r({transform:function(e,t){return"role"===t?t:"aria-"+t.slice(4).toLowerCase()},properties:{ariaActiveDescendant:null,ariaAtomic:a,ariaAutoComplete:null,ariaBusy:a,ariaChecked:a,ariaColCount:i,ariaColIndex:i,ariaColSpan:i,ariaControls:l,ariaCurrent:null,ariaDescribedBy:l,ariaDetails:null,ariaDisabled:a,ariaDropEffect:l,ariaErrorMessage:null,ariaExpanded:a,ariaFlowTo:l,ariaGrabbed:a,ariaHasPopup:null,ariaHidden:a,ariaInvalid:null,ariaKeyShortcuts:null,ariaLabel:null,ariaLabelledBy:l,ariaLevel:i,ariaLive:null,ariaModal:a,ariaMultiLine:a,ariaMultiSelectable:a,ariaOrientation:null,ariaOwns:l,ariaPlaceholder:null,ariaPosInSet:i,ariaPressed:a,ariaReadOnly:a,ariaRelevant:null,ariaRequired:a,ariaRoleDescription:l,ariaRowCount:i,ariaRowIndex:i,ariaRowSpan:i,ariaSelected:a,ariaSetSize:i,ariaSort:null,ariaValueMax:i,ariaValueMin:i,ariaValueNow:i,ariaValueText:null,role:null}})},2537:function(e,t,n){"use strict";var o=n(1422),r=n(7589),a=n(9348),i=o.boolean,l=o.overloadedBoolean,s=o.booleanish,c=o.number,u=o.spaceSeparated,d=o.commaSeparated;e.exports=r({space:"html",attributes:{acceptcharset:"accept-charset",classname:"class",htmlfor:"for",httpequiv:"http-equiv"},transform:a,mustUseProperty:["checked","multiple","muted","selected"],properties:{abbr:null,accept:d,acceptCharset:u,accessKey:u,action:null,allow:null,allowFullScreen:i,allowPaymentRequest:i,allowUserMedia:i,alt:null,as:null,async:i,autoCapitalize:null,autoComplete:u,autoFocus:i,autoPlay:i,capture:i,charSet:null,checked:i,cite:null,className:u,cols:c,colSpan:null,content:null,contentEditable:s,controls:i,controlsList:u,coords:c|d,crossOrigin:null,data:null,dateTime:null,decoding:null,default:i,defer:i,dir:null,dirName:null,disabled:i,download:l,draggable:s,encType:null,enterKeyHint:null,form:null,formAction:null,formEncType:null,formMethod:null,formNoValidate:i,formTarget:null,headers:u,height:c,hidden:i,high:c,href:null,hrefLang:null,htmlFor:u,httpEquiv:u,id:null,imageSizes:null,imageSrcSet:d,inputMode:null,integrity:null,is:null,isMap:i,itemId:null,itemProp:u,itemRef:u,itemScope:i,itemType:u,kind:null,label:null,lang:null,language:null,list:null,loading:null,loop:i,low:c,manifest:null,max:null,maxLength:c,media:null,method:null,min:null,minLength:c,multiple:i,muted:i,name:null,nonce:null,noModule:i,noValidate:i,onAbort:null,onAfterPrint:null,onAuxClick:null,onBeforePrint:null,onBeforeUnload:null,onBlur:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onContextMenu:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnded:null,onError:null,onFocus:null,onFormData:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLanguageChange:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadEnd:null,onLoadStart:null,onMessage:null,onMessageError:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRejectionHandled:null,onReset:null,onResize:null,onScroll:null,onSecurityPolicyViolation:null,onSeeked:null,onSeeking:null,onSelect:null,onSlotChange:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnhandledRejection:null,onUnload:null,onVolumeChange:null,onWaiting:null,onWheel:null,open:i,optimum:c,pattern:null,ping:u,placeholder:null,playsInline:i,poster:null,preload:null,readOnly:i,referrerPolicy:null,rel:u,required:i,reversed:i,rows:c,rowSpan:c,sandbox:u,scope:null,scoped:i,seamless:i,selected:i,shape:null,size:c,sizes:null,slot:null,span:c,spellCheck:s,src:null,srcDoc:null,srcLang:null,srcSet:d,start:c,step:null,style:null,tabIndex:c,target:null,title:null,translate:null,type:null,typeMustMatch:i,useMap:null,value:s,width:c,wrap:null,align:null,aLink:null,archive:u,axis:null,background:null,bgColor:null,border:c,borderColor:null,bottomMargin:c,cellPadding:null,cellSpacing:null,char:null,charOff:null,classId:null,clear:null,code:null,codeBase:null,codeType:null,color:null,compact:i,declare:i,event:null,face:null,frame:null,frameBorder:null,hSpace:c,leftMargin:c,link:null,longDesc:null,lowSrc:null,marginHeight:c,marginWidth:c,noResize:i,noHref:i,noShade:i,noWrap:i,object:null,profile:null,prompt:null,rev:null,rightMargin:c,rules:null,scheme:null,scrolling:s,standby:null,summary:null,text:null,topMargin:c,valueType:null,version:null,vAlign:null,vLink:null,vSpace:c,allowTransparency:null,autoCorrect:null,autoSave:null,disablePictureInPicture:i,disableRemotePlayback:i,prefix:null,property:null,results:c,security:null,unselectable:null}})},9348:function(e,t,n){"use strict";var o=n(1098);e.exports=function(e,t){return o(e,t.toLowerCase())}},1098:function(e){"use strict";e.exports=function(e,t){return t in e?e[t]:t}},7589:function(e,t,n){"use strict";var o=n(4977),r=n(6038),a=n(8444);e.exports=function(e){var t,n,i=e.space,l=e.mustUseProperty||[],s=e.attributes||{},c=e.properties,u=e.transform,d={},p={};for(t in c)n=new a(t,u(s,t),c[t],i),-1!==l.indexOf(t)&&(n.mustUseProperty=!0),d[t]=n,p[o(t)]=t,p[o(n.attribute)]=t;return new r(d,p,i)}},8444:function(e,t,n){"use strict";var o=n(313),r=n(1422);e.exports=l,l.prototype=new o,l.prototype.defined=!0;var a=["boolean","booleanish","overloadedBoolean","number","commaSeparated","spaceSeparated","commaOrSpaceSeparated"],i=a.length;function l(e,t,n,l){var s,c,u,d=-1;for(l&&(this.space=l),o.call(this,e,t);++d=t||n<0||p&&o>=i}function k(){var e,n,o,r=m();if(A(r))return S(r);s=setTimeout(k,(e=r-c,n=r-u,o=t-e,p?g(o,i-n):o))}function S(e){return(s=void 0,h&&r)?T(e):(r=a=void 0,l)}function y(){var e,n=m(),o=A(n);if(r=arguments,a=this,c=n,o){if(void 0===s)return u=e=c,s=setTimeout(k,t),d?T(e):l;if(p)return s=setTimeout(k,t),T(c)}return void 0===s&&(s=setTimeout(k,t)),l}return t=E(t)||0,b(n)&&(d=!!n.leading,i=(p="maxWait"in n)?f(E(n.maxWait)||0,t):i,h="trailing"in n?!!n.trailing:h),y.cancel=function(){void 0!==s&&clearTimeout(s),u=0,r=c=a=s=void 0},y.flush=function(){return void 0===s?l:S(m())},y}(e,t,{leading:r,maxWait:t,trailing:a})}},1163:function(e,t,n){e.exports=n(9974)},2703:function(e,t,n){"use strict";var o=n(414);function r(){}function a(){}a.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,a,i){if(i!==o){var l=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:r};return n.PropTypes=n,n}},5697:function(e,t,n){e.exports=n(2703)()},414:function(e){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},8477:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n=Math.floor(i)&&d=Math.floor(l),g=n.getActiveLink();return f?(r===g&&n.setActiveLink(void 0),e.props.hashSpy&&p.getHash()===r&&p.changeHash(),e.props.spy&&e.state.active&&(e.setState({active:!1}),e.props.onSetInactive&&e.props.onSetInactive()),c.updateStates()):h&&g!==r?(n.setActiveLink(r),e.props.hashSpy&&p.changeHash(r),e.props.spy&&(e.setState({active:!0}),e.props.onSetActive&&e.props.onSetActive(r)),c.updateStates()):void 0}}};return d.propTypes=h,d.defaultProps={offset:0},d},Element:function(e){console.warn("Helpers.Element is deprecated since v1.7.0");var Element=function(t){function Element(e){a(this,Element);var t=i(this,(Element.__proto__||Object.getPrototypeOf(Element)).call(this,e));return t.childBindings={domNode:null},t}return l(Element,t),r(Element,[{key:"componentDidMount",value:function(){if("undefined"==typeof window)return!1;this.registerElems(this.props.name)}},{key:"componentDidUpdate",value:function(e){this.props.name!==e.name&&this.registerElems(this.props.name)}},{key:"componentWillUnmount",value:function(){if("undefined"==typeof window)return!1;u.unregister(this.props.name)}},{key:"registerElems",value:function(e){u.register(e,this.childBindings.domNode)}},{key:"render",value:function(){return s.createElement(e,o({},this.props,{parentBindings:this.childBindings}))}}]),Element}(s.Component);return Element.propTypes={name:d.string,id:d.string},Element}}},3200:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t=r.duration?1:t(r.progress/r.duration),r.currentPosition=r.startPosition+Math.ceil(r.delta*r.percent),r.containerElement&&r.containerElement!==document&&r.containerElement!==document.body?n.horizontal?r.containerElement.scrollLeft=r.currentPosition:r.containerElement.scrollTop=r.currentPosition:n.horizontal?window.scrollTo(r.currentPosition,0):window.scrollTo(0,r.currentPosition),r.percent<1){var a=e.bind(null,t,n);c.call(window,a);return}i.default.registered.end&&i.default.registered.end(r.to,r.target,r.currentPosition)},m=function(e){e.data.containerElement=e?e.containerId?document.getElementById(e.containerId):e.container&&e.container.nodeType?e.container:document:null},b=function(e,t,n,o){if(t.data=t.data||u(),window.clearTimeout(t.data.delayTimeout),a.default.subscribe(function(){t.data.cancel=!0}),m(t),t.data.start=null,t.data.cancel=!1,t.data.startPosition=t.horizontal?d(t):p(t),t.data.targetPosition=t.absolute?e:e+t.data.startPosition,t.data.startPosition===t.data.targetPosition){i.default.registered.end&&i.default.registered.end(t.data.to,t.data.target,t.data.currentPosition);return}t.data.delta=Math.round(t.data.targetPosition-t.data.startPosition),t.data.duration=("function"==typeof(r=t.duration)?r:function(){return r})(t.data.delta),t.data.duration=isNaN(parseFloat(t.data.duration))?1e3:parseFloat(t.data.duration),t.data.to=n,t.data.target=o;var r,l=s(t),h=g.bind(null,l,t);if(t&&t.delay>0){t.data.delayTimeout=window.setTimeout(function(){i.default.registered.begin&&i.default.registered.begin(t.data.to,t.data.target),c.call(window,h)},t.delay);return}i.default.registered.begin&&i.default.registered.begin(t.data.to,t.data.target),c.call(window,h)},E=function(e){return(e=o({},e)).data=e.data||u(),e.absolute=!0,e};t.default={animateTopScroll:b,getAnimationType:s,scrollToTop:function(e){b(0,E(e))},scrollToBottom:function(e){m(e=E(e)),b(e.horizontal?h(e):f(e),e)},scrollTo:function(e,t){b(e,E(t))},scrollMore:function(e,t){m(t=E(t)),b(e+(t.horizontal?d(t):p(t)),t)}}},140:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(5236),r=["mousedown","mousewheel","touchmove","keydown"];t.default={subscribe:function(e){return"undefined"!=typeof document&&r.forEach(function(t){return(0,o.addPassiveEventListener)(document,t,e)})}}},5236:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPassiveEventListener=function(e,t,o){var r=o.name;r||(r=t,console.warn("Listener must be a named function.")),n.has(t)||n.set(t,new Set);var a=n.get(t);if(!a.has(r)){var i=function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(e){}return e}();e.addEventListener(t,o,!!i&&{passive:!0}),a.add(r)}},t.removePassiveEventListener=function(e,t,o){e.removeEventListener(t,o),n.get(t).delete(o.name||t)};var n=new Map},8e3:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t=Math.floor(d)&&g=Math.floor(p)}else{var m=0,b=0,E=0;if(r.getBoundingClientRect&&(E=r.getBoundingClientRect().top),!l||e.props.isDynamic){if(!(l=n.get(i)))return;var T=l.getBoundingClientRect();b=(m=T.top-E+o)+T.height}var A=o-e.props.offset;s=A>=Math.floor(m)&&A=Math.floor(b)}var k=n.getActiveLink();if(u){if(i===k&&n.setActiveLink(void 0),e.props.hashSpy&&c.default.getHash()===i){var S=e.props.saveHashHistory;c.default.changeHash("",void 0!==S&&S)}e.props.spy&&e.state.active&&(e.setState({active:!1}),e.props.onSetInactive&&e.props.onSetInactive(i,l))}if(s&&(k!==i||!1===e.state.active)){n.setActiveLink(i);var y=e.props.saveHashHistory;e.props.hashSpy&&c.default.changeHash(i,void 0!==y&&y),e.props.spy&&(e.setState({active:!0}),e.props.onSetActive&&e.props.onSetActive(i,l))}}}};return s.propTypes=d,s.defaultProps={offset:0},s}},7606:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,r=(o=n(3096))&&o.__esModule?o:{default:o},a=n(5236),i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:66;return(0,r.default)(e,t)},l={spyCallbacks:[],spySetState:[],scrollSpyContainers:[],mount:function(e,t){if(e){var n=i(function(t){l.scrollHandler(e)},t);l.scrollSpyContainers.push(e),(0,a.addPassiveEventListener)(e,"scroll",n)}},isMounted:function(e){return -1!==l.scrollSpyContainers.indexOf(e)},currentPositionX:function(e){if(e!==document)return e.scrollLeft;var t=void 0!==window.pageYOffset,n="CSS1Compat"===(document.compatMode||"");return t?window.pageXOffset:n?document.documentElement.scrollLeft:document.body.scrollLeft},currentPositionY:function(e){if(e!==document)return e.scrollTop;var t=void 0!==window.pageXOffset,n="CSS1Compat"===(document.compatMode||"");return t?window.pageYOffset:n?document.documentElement.scrollTop:document.body.scrollTop},scrollHandler:function(e){(l.scrollSpyContainers[l.scrollSpyContainers.indexOf(e)].spyCallbacks||[]).forEach(function(t){return t(l.currentPositionX(e),l.currentPositionY(e))})},addStateHandler:function(e){l.spySetState.push(e)},addSpyHandler:function(e,t){var n=l.scrollSpyContainers[l.scrollSpyContainers.indexOf(t)];n.spyCallbacks||(n.spyCallbacks=[]),n.spyCallbacks.push(e),e(l.currentPositionX(t),l.currentPositionY(t))},updateStates:function(){l.spySetState.forEach(function(e){return e()})},unmount:function(e,t){l.scrollSpyContainers.forEach(function(e){return e.spyCallbacks&&e.spyCallbacks.length&&e.spyCallbacks.indexOf(t)>-1&&e.spyCallbacks.splice(e.spyCallbacks.indexOf(t),1)}),l.spySetState&&l.spySetState.length&&l.spySetState.indexOf(e)>-1&&l.spySetState.splice(l.spySetState.indexOf(e),1),document.removeEventListener("scroll",l.scrollHandler)},update:function(){return l.scrollSpyContainers.forEach(function(e){return l.scrollHandler(e)})}};t.default=l},2628:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t code[class*="language-"]':{background:"#2b2b2b",padding:"0.1em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"#d4d0ab"},prolog:{color:"#d4d0ab"},doctype:{color:"#d4d0ab"},cdata:{color:"#d4d0ab"},punctuation:{color:"#fefefe"},property:{color:"#ffa07a"},tag:{color:"#ffa07a"},constant:{color:"#ffa07a"},symbol:{color:"#ffa07a"},deleted:{color:"#ffa07a"},boolean:{color:"#00e0e0"},number:{color:"#00e0e0"},selector:{color:"#abe338"},"attr-name":{color:"#abe338"},string:{color:"#abe338"},char:{color:"#abe338"},builtin:{color:"#abe338"},inserted:{color:"#abe338"},operator:{color:"#00e0e0"},entity:{color:"#00e0e0",cursor:"help"},url:{color:"#00e0e0"},".language-css .token.string":{color:"#00e0e0"},".style .token.string":{color:"#00e0e0"},variable:{color:"#00e0e0"},atrule:{color:"#ffd700"},"attr-value":{color:"#ffd700"},function:{color:"#ffd700"},keyword:{color:"#00e0e0"},regex:{color:"#ffd700"},important:{color:"#ffd700",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},4441:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#c5c8c6",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#c5c8c6",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em",background:"#1d1f21"},':not(pre) > code[class*="language-"]':{background:"#1d1f21",padding:".1em",borderRadius:".3em"},comment:{color:"#7C7C7C"},prolog:{color:"#7C7C7C"},doctype:{color:"#7C7C7C"},cdata:{color:"#7C7C7C"},punctuation:{color:"#c5c8c6"},".namespace":{Opacity:".7"},property:{color:"#96CBFE"},keyword:{color:"#96CBFE"},tag:{color:"#96CBFE"},"class-name":{color:"#FFFFB6",textDecoration:"underline"},boolean:{color:"#99CC99"},constant:{color:"#99CC99"},symbol:{color:"#f92672"},deleted:{color:"#f92672"},number:{color:"#FF73FD"},selector:{color:"#A8FF60"},"attr-name":{color:"#A8FF60"},string:{color:"#A8FF60"},char:{color:"#A8FF60"},builtin:{color:"#A8FF60"},inserted:{color:"#A8FF60"},variable:{color:"#C6C5FE"},operator:{color:"#EDEDED"},entity:{color:"#FFFFB6",cursor:"help"},url:{color:"#96CBFE"},".language-css .token.string":{color:"#87C38A"},".style .token.string":{color:"#87C38A"},atrule:{color:"#F9EE98"},"attr-value":{color:"#F9EE98"},function:{color:"#DAD085"},regex:{color:"#E9C062"},important:{color:"#fd971f",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},1518:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#f5f7ff",color:"#5e6687"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#f5f7ff",color:"#5e6687",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#dfe2f1"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#dfe2f1"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#dfe2f1"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#dfe2f1"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#dfe2f1"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#dfe2f1"},'code[class*="language-"]::selection':{textShadow:"none",background:"#dfe2f1"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#dfe2f1"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#898ea4"},prolog:{color:"#898ea4"},doctype:{color:"#898ea4"},cdata:{color:"#898ea4"},punctuation:{color:"#5e6687"},namespace:{Opacity:".7"},operator:{color:"#c76b29"},boolean:{color:"#c76b29"},number:{color:"#c76b29"},property:{color:"#c08b30"},tag:{color:"#3d8fd1"},string:{color:"#22a2c9"},selector:{color:"#6679cc"},"attr-name":{color:"#c76b29"},entity:{color:"#22a2c9",cursor:"help"},url:{color:"#22a2c9"},".language-css .token.string":{color:"#22a2c9"},".style .token.string":{color:"#22a2c9"},"attr-value":{color:"#ac9739"},keyword:{color:"#ac9739"},control:{color:"#ac9739"},directive:{color:"#ac9739"},unit:{color:"#ac9739"},statement:{color:"#22a2c9"},regex:{color:"#22a2c9"},atrule:{color:"#22a2c9"},placeholder:{color:"#3d8fd1"},variable:{color:"#3d8fd1"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #202746",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#c94922"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:"0.4em solid #c94922",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#dfe2f1"},".line-numbers .line-numbers-rows > span:before":{color:"#979db4"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0))"}}},68:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#fff",textShadow:"0 1px 1px #000",fontFamily:'Menlo, Monaco, "Courier New", monospace',direction:"ltr",textAlign:"left",wordSpacing:"normal",whiteSpace:"pre",wordWrap:"normal",lineHeight:"1.4",background:"none",border:"0",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#fff",textShadow:"0 1px 1px #000",fontFamily:'Menlo, Monaco, "Courier New", monospace',direction:"ltr",textAlign:"left",wordSpacing:"normal",whiteSpace:"pre",wordWrap:"normal",lineHeight:"1.4",background:"#222",border:"0",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"15px",margin:"1em 0",overflow:"auto",MozBorderRadius:"8px",WebkitBorderRadius:"8px",borderRadius:"8px"},'pre[class*="language-"] code':{float:"left",padding:"0 15px 0 0"},':not(pre) > code[class*="language-"]':{background:"#222",padding:"5px 10px",lineHeight:"1",MozBorderRadius:"3px",WebkitBorderRadius:"3px",borderRadius:"3px"},comment:{color:"#797979"},prolog:{color:"#797979"},doctype:{color:"#797979"},cdata:{color:"#797979"},selector:{color:"#fff"},operator:{color:"#fff"},punctuation:{color:"#fff"},namespace:{Opacity:".7"},tag:{color:"#ffd893"},boolean:{color:"#ffd893"},atrule:{color:"#B0C975"},"attr-value":{color:"#B0C975"},hex:{color:"#B0C975"},string:{color:"#B0C975"},property:{color:"#c27628"},entity:{color:"#c27628",cursor:"help"},url:{color:"#c27628"},"attr-name":{color:"#c27628"},keyword:{color:"#c27628"},regex:{color:"#9B71C6"},function:{color:"#e5a638"},constant:{color:"#e5a638"},variable:{color:"#fdfba8"},number:{color:"#8799B0"},important:{color:"#E45734"},deliminator:{color:"#E45734"},".line-highlight.line-highlight":{background:"rgba(255, 255, 255, .2)"},".line-highlight.line-highlight:before":{top:".3em",backgroundColor:"rgba(255, 255, 255, .3)",color:"#fff",MozBorderRadius:"8px",WebkitBorderRadius:"8px",borderRadius:"8px"},".line-highlight.line-highlight[data-end]:after":{top:".3em",backgroundColor:"rgba(255, 255, 255, .3)",color:"#fff",MozBorderRadius:"8px",WebkitBorderRadius:"8px",borderRadius:"8px"},".line-numbers .line-numbers-rows > span":{borderRight:"3px #d9d336 solid"}}},7032:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#111b27",background:"none",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#111b27",background:"#e3eaf2",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto"},'pre[class*="language-"]::-moz-selection':{background:"#8da1b9"},'pre[class*="language-"] ::-moz-selection':{background:"#8da1b9"},'code[class*="language-"]::-moz-selection':{background:"#8da1b9"},'code[class*="language-"] ::-moz-selection':{background:"#8da1b9"},'pre[class*="language-"]::selection':{background:"#8da1b9"},'pre[class*="language-"] ::selection':{background:"#8da1b9"},'code[class*="language-"]::selection':{background:"#8da1b9"},'code[class*="language-"] ::selection':{background:"#8da1b9"},':not(pre) > code[class*="language-"]':{background:"#e3eaf2",padding:"0.1em 0.3em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"#3c526d"},prolog:{color:"#3c526d"},doctype:{color:"#3c526d"},cdata:{color:"#3c526d"},punctuation:{color:"#111b27"},"delimiter.important":{color:"#006d6d",fontWeight:"inherit"},"selector.parent":{color:"#006d6d"},tag:{color:"#006d6d"},"tag.punctuation":{color:"#006d6d"},"attr-name":{color:"#755f00"},boolean:{color:"#755f00"},"boolean.important":{color:"#755f00"},number:{color:"#755f00"},constant:{color:"#755f00"},"selector.attribute":{color:"#755f00"},"class-name":{color:"#005a8e"},key:{color:"#005a8e"},parameter:{color:"#005a8e"},property:{color:"#005a8e"},"property-access":{color:"#005a8e"},variable:{color:"#005a8e"},"attr-value":{color:"#116b00"},inserted:{color:"#116b00"},color:{color:"#116b00"},"selector.value":{color:"#116b00"},string:{color:"#116b00"},"string.url-link":{color:"#116b00"},builtin:{color:"#af00af"},"keyword-array":{color:"#af00af"},package:{color:"#af00af"},regex:{color:"#af00af"},function:{color:"#7c00aa"},"selector.class":{color:"#7c00aa"},"selector.id":{color:"#7c00aa"},"atrule.rule":{color:"#a04900"},combinator:{color:"#a04900"},keyword:{color:"#a04900"},operator:{color:"#a04900"},"pseudo-class":{color:"#a04900"},"pseudo-element":{color:"#a04900"},selector:{color:"#a04900"},unit:{color:"#a04900"},deleted:{color:"#c22f2e"},important:{color:"#c22f2e",fontWeight:"bold"},"keyword-this":{color:"#005a8e",fontWeight:"bold"},this:{color:"#005a8e",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},entity:{cursor:"help"},".language-markdown .token.title":{color:"#005a8e",fontWeight:"bold"},".language-markdown .token.title .token.punctuation":{color:"#005a8e",fontWeight:"bold"},".language-markdown .token.blockquote.punctuation":{color:"#af00af"},".language-markdown .token.code":{color:"#006d6d"},".language-markdown .token.hr.punctuation":{color:"#005a8e"},".language-markdown .token.url > .token.content":{color:"#116b00"},".language-markdown .token.url-link":{color:"#755f00"},".language-markdown .token.list.punctuation":{color:"#af00af"},".language-markdown .token.table-header":{color:"#111b27"},".language-json .token.operator":{color:"#111b27"},".language-scss .token.variable":{color:"#006d6d"},"token.tab:not(:empty):before":{color:"#3c526d"},"token.cr:before":{color:"#3c526d"},"token.lf:before":{color:"#3c526d"},"token.space:before":{color:"#3c526d"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a":{color:"#e3eaf2",background:"#005a8e"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button":{color:"#e3eaf2",background:"#005a8e"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover":{color:"#e3eaf2",background:"#005a8eda",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus":{color:"#e3eaf2",background:"#005a8eda",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover":{color:"#e3eaf2",background:"#005a8eda",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus":{color:"#e3eaf2",background:"#005a8eda",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span":{color:"#e3eaf2",background:"#3c526d"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover":{color:"#e3eaf2",background:"#3c526d"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus":{color:"#e3eaf2",background:"#3c526d"},".line-highlight.line-highlight":{background:"linear-gradient(to right, #8da1b92f 70%, #8da1b925)"},".line-highlight.line-highlight:before":{backgroundColor:"#3c526d",color:"#e3eaf2",boxShadow:"0 1px #8da1b9"},".line-highlight.line-highlight[data-end]:after":{backgroundColor:"#3c526d",color:"#e3eaf2",boxShadow:"0 1px #8da1b9"},"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":{backgroundColor:"#3c526d1f"},".line-numbers.line-numbers .line-numbers-rows":{borderRight:"1px solid #8da1b97a",background:"#d0dae77a"},".line-numbers .line-numbers-rows > span:before":{color:"#3c526dda"},".rainbow-braces .token.token.punctuation.brace-level-1":{color:"#755f00"},".rainbow-braces .token.token.punctuation.brace-level-5":{color:"#755f00"},".rainbow-braces .token.token.punctuation.brace-level-9":{color:"#755f00"},".rainbow-braces .token.token.punctuation.brace-level-2":{color:"#af00af"},".rainbow-braces .token.token.punctuation.brace-level-6":{color:"#af00af"},".rainbow-braces .token.token.punctuation.brace-level-10":{color:"#af00af"},".rainbow-braces .token.token.punctuation.brace-level-3":{color:"#005a8e"},".rainbow-braces .token.token.punctuation.brace-level-7":{color:"#005a8e"},".rainbow-braces .token.token.punctuation.brace-level-11":{color:"#005a8e"},".rainbow-braces .token.token.punctuation.brace-level-4":{color:"#7c00aa"},".rainbow-braces .token.token.punctuation.brace-level-8":{color:"#7c00aa"},".rainbow-braces .token.token.punctuation.brace-level-12":{color:"#7c00aa"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)":{backgroundColor:"#c22f2e1f"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)":{backgroundColor:"#c22f2e1f"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)":{backgroundColor:"#116b001f"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)":{backgroundColor:"#116b001f"},".command-line .command-line-prompt":{borderRight:"1px solid #8da1b97a"},".command-line .command-line-prompt > span:before":{color:"#3c526dda"}}},3611:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#e3eaf2",background:"none",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#e3eaf2",background:"#111b27",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto"},'pre[class*="language-"]::-moz-selection':{background:"#3c526d"},'pre[class*="language-"] ::-moz-selection':{background:"#3c526d"},'code[class*="language-"]::-moz-selection':{background:"#3c526d"},'code[class*="language-"] ::-moz-selection':{background:"#3c526d"},'pre[class*="language-"]::selection':{background:"#3c526d"},'pre[class*="language-"] ::selection':{background:"#3c526d"},'code[class*="language-"]::selection':{background:"#3c526d"},'code[class*="language-"] ::selection':{background:"#3c526d"},':not(pre) > code[class*="language-"]':{background:"#111b27",padding:"0.1em 0.3em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"#8da1b9"},prolog:{color:"#8da1b9"},doctype:{color:"#8da1b9"},cdata:{color:"#8da1b9"},punctuation:{color:"#e3eaf2"},"delimiter.important":{color:"#66cccc",fontWeight:"inherit"},"selector.parent":{color:"#66cccc"},tag:{color:"#66cccc"},"tag.punctuation":{color:"#66cccc"},"attr-name":{color:"#e6d37a"},boolean:{color:"#e6d37a"},"boolean.important":{color:"#e6d37a"},number:{color:"#e6d37a"},constant:{color:"#e6d37a"},"selector.attribute":{color:"#e6d37a"},"class-name":{color:"#6cb8e6"},key:{color:"#6cb8e6"},parameter:{color:"#6cb8e6"},property:{color:"#6cb8e6"},"property-access":{color:"#6cb8e6"},variable:{color:"#6cb8e6"},"attr-value":{color:"#91d076"},inserted:{color:"#91d076"},color:{color:"#91d076"},"selector.value":{color:"#91d076"},string:{color:"#91d076"},"string.url-link":{color:"#91d076"},builtin:{color:"#f4adf4"},"keyword-array":{color:"#f4adf4"},package:{color:"#f4adf4"},regex:{color:"#f4adf4"},function:{color:"#c699e3"},"selector.class":{color:"#c699e3"},"selector.id":{color:"#c699e3"},"atrule.rule":{color:"#e9ae7e"},combinator:{color:"#e9ae7e"},keyword:{color:"#e9ae7e"},operator:{color:"#e9ae7e"},"pseudo-class":{color:"#e9ae7e"},"pseudo-element":{color:"#e9ae7e"},selector:{color:"#e9ae7e"},unit:{color:"#e9ae7e"},deleted:{color:"#cd6660"},important:{color:"#cd6660",fontWeight:"bold"},"keyword-this":{color:"#6cb8e6",fontWeight:"bold"},this:{color:"#6cb8e6",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},entity:{cursor:"help"},".language-markdown .token.title":{color:"#6cb8e6",fontWeight:"bold"},".language-markdown .token.title .token.punctuation":{color:"#6cb8e6",fontWeight:"bold"},".language-markdown .token.blockquote.punctuation":{color:"#f4adf4"},".language-markdown .token.code":{color:"#66cccc"},".language-markdown .token.hr.punctuation":{color:"#6cb8e6"},".language-markdown .token.url .token.content":{color:"#91d076"},".language-markdown .token.url-link":{color:"#e6d37a"},".language-markdown .token.list.punctuation":{color:"#f4adf4"},".language-markdown .token.table-header":{color:"#e3eaf2"},".language-json .token.operator":{color:"#e3eaf2"},".language-scss .token.variable":{color:"#66cccc"},"token.tab:not(:empty):before":{color:"#8da1b9"},"token.cr:before":{color:"#8da1b9"},"token.lf:before":{color:"#8da1b9"},"token.space:before":{color:"#8da1b9"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a":{color:"#111b27",background:"#6cb8e6"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button":{color:"#111b27",background:"#6cb8e6"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover":{color:"#111b27",background:"#6cb8e6da",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus":{color:"#111b27",background:"#6cb8e6da",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover":{color:"#111b27",background:"#6cb8e6da",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus":{color:"#111b27",background:"#6cb8e6da",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span":{color:"#111b27",background:"#8da1b9"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover":{color:"#111b27",background:"#8da1b9"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus":{color:"#111b27",background:"#8da1b9"},".line-highlight.line-highlight":{background:"linear-gradient(to right, #3c526d5f 70%, #3c526d55)"},".line-highlight.line-highlight:before":{backgroundColor:"#8da1b9",color:"#111b27",boxShadow:"0 1px #3c526d"},".line-highlight.line-highlight[data-end]:after":{backgroundColor:"#8da1b9",color:"#111b27",boxShadow:"0 1px #3c526d"},"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":{backgroundColor:"#8da1b918"},".line-numbers.line-numbers .line-numbers-rows":{borderRight:"1px solid #0b121b",background:"#0b121b7a"},".line-numbers .line-numbers-rows > span:before":{color:"#8da1b9da"},".rainbow-braces .token.token.punctuation.brace-level-1":{color:"#e6d37a"},".rainbow-braces .token.token.punctuation.brace-level-5":{color:"#e6d37a"},".rainbow-braces .token.token.punctuation.brace-level-9":{color:"#e6d37a"},".rainbow-braces .token.token.punctuation.brace-level-2":{color:"#f4adf4"},".rainbow-braces .token.token.punctuation.brace-level-6":{color:"#f4adf4"},".rainbow-braces .token.token.punctuation.brace-level-10":{color:"#f4adf4"},".rainbow-braces .token.token.punctuation.brace-level-3":{color:"#6cb8e6"},".rainbow-braces .token.token.punctuation.brace-level-7":{color:"#6cb8e6"},".rainbow-braces .token.token.punctuation.brace-level-11":{color:"#6cb8e6"},".rainbow-braces .token.token.punctuation.brace-level-4":{color:"#c699e3"},".rainbow-braces .token.token.punctuation.brace-level-8":{color:"#c699e3"},".rainbow-braces .token.token.punctuation.brace-level-12":{color:"#c699e3"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)":{backgroundColor:"#cd66601f"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)":{backgroundColor:"#cd66601f"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)":{backgroundColor:"#91d0761f"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)":{backgroundColor:"#91d0761f"},".command-line .command-line-prompt":{borderRight:"1px solid #0b121b"},".command-line .command-line-prompt > span:before":{color:"#8da1b9da"}}},9500:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"black",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"black",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",position:"relative",borderLeft:"10px solid #358ccb",boxShadow:"-1px 0 0 0 #358ccb, 0 0 0 1px #dfdfdf",backgroundColor:"#fdfdfd",backgroundImage:"linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%)",backgroundSize:"3em 3em",backgroundOrigin:"content-box",backgroundAttachment:"local",margin:".5em 0",padding:"0 1em"},'pre[class*="language-"] > code':{display:"block"},':not(pre) > code[class*="language-"]':{position:"relative",padding:".2em",borderRadius:"0.3em",color:"#c92c2c",border:"1px solid rgba(0, 0, 0, 0.1)",display:"inline",whiteSpace:"normal",backgroundColor:"#fdfdfd",WebkitBoxSizing:"border-box",MozBoxSizing:"border-box",boxSizing:"border-box"},comment:{color:"#7D8B99"},"block-comment":{color:"#7D8B99"},prolog:{color:"#7D8B99"},doctype:{color:"#7D8B99"},cdata:{color:"#7D8B99"},punctuation:{color:"#5F6364"},property:{color:"#c92c2c"},tag:{color:"#c92c2c"},boolean:{color:"#c92c2c"},number:{color:"#c92c2c"},"function-name":{color:"#c92c2c"},constant:{color:"#c92c2c"},symbol:{color:"#c92c2c"},deleted:{color:"#c92c2c"},selector:{color:"#2f9c0a"},"attr-name":{color:"#2f9c0a"},string:{color:"#2f9c0a"},char:{color:"#2f9c0a"},function:{color:"#2f9c0a"},builtin:{color:"#2f9c0a"},inserted:{color:"#2f9c0a"},operator:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},entity:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)",cursor:"help"},url:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},variable:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},atrule:{color:"#1990b8"},"attr-value":{color:"#1990b8"},keyword:{color:"#1990b8"},"class-name":{color:"#1990b8"},regex:{color:"#e90"},important:{color:"#e90",fontWeight:"normal"},".language-css .token.string":{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},".style .token.string":{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},namespace:{Opacity:".7"}}},7833:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"black",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",maxHeight:"inherit",height:"inherit",padding:"0 1em",display:"block",overflow:"auto"},'pre[class*="language-"]':{color:"black",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",position:"relative",margin:".5em 0",overflow:"visible",padding:"1px",backgroundColor:"#fdfdfd",WebkitBoxSizing:"border-box",MozBoxSizing:"border-box",boxSizing:"border-box",marginBottom:"1em"},'pre[class*="language-"] > code':{position:"relative",zIndex:"1",borderLeft:"10px solid #358ccb",boxShadow:"-1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf",backgroundColor:"#fdfdfd",backgroundImage:"linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%)",backgroundSize:"3em 3em",backgroundOrigin:"content-box",backgroundAttachment:"local"},':not(pre) > code[class*="language-"]':{backgroundColor:"#fdfdfd",WebkitBoxSizing:"border-box",MozBoxSizing:"border-box",boxSizing:"border-box",marginBottom:"1em",position:"relative",padding:".2em",borderRadius:"0.3em",color:"#c92c2c",border:"1px solid rgba(0, 0, 0, 0.1)",display:"inline",whiteSpace:"normal"},'pre[class*="language-"]:before':{content:"''",display:"block",position:"absolute",bottom:"0.75em",left:"0.18em",width:"40%",height:"20%",maxHeight:"13em",boxShadow:"0px 13px 8px #979797",WebkitTransform:"rotate(-2deg)",MozTransform:"rotate(-2deg)",msTransform:"rotate(-2deg)",OTransform:"rotate(-2deg)",transform:"rotate(-2deg)"},'pre[class*="language-"]:after':{content:"''",display:"block",position:"absolute",bottom:"0.75em",left:"auto",width:"40%",height:"20%",maxHeight:"13em",boxShadow:"0px 13px 8px #979797",WebkitTransform:"rotate(2deg)",MozTransform:"rotate(2deg)",msTransform:"rotate(2deg)",OTransform:"rotate(2deg)",transform:"rotate(2deg)",right:"0.75em"},comment:{color:"#7D8B99"},"block-comment":{color:"#7D8B99"},prolog:{color:"#7D8B99"},doctype:{color:"#7D8B99"},cdata:{color:"#7D8B99"},punctuation:{color:"#5F6364"},property:{color:"#c92c2c"},tag:{color:"#c92c2c"},boolean:{color:"#c92c2c"},number:{color:"#c92c2c"},"function-name":{color:"#c92c2c"},constant:{color:"#c92c2c"},symbol:{color:"#c92c2c"},deleted:{color:"#c92c2c"},selector:{color:"#2f9c0a"},"attr-name":{color:"#2f9c0a"},string:{color:"#2f9c0a"},char:{color:"#2f9c0a"},function:{color:"#2f9c0a"},builtin:{color:"#2f9c0a"},inserted:{color:"#2f9c0a"},operator:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},entity:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)",cursor:"help"},url:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},variable:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},atrule:{color:"#1990b8"},"attr-value":{color:"#1990b8"},keyword:{color:"#1990b8"},"class-name":{color:"#1990b8"},regex:{color:"#e90"},important:{color:"#e90",fontWeight:"normal"},".language-css .token.string":{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},".style .token.string":{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},namespace:{Opacity:".7"},'pre[class*="language-"].line-numbers.line-numbers':{paddingLeft:"0"},'pre[class*="language-"].line-numbers.line-numbers code':{paddingLeft:"3.8em"},'pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows':{left:"0"},'pre[class*="language-"][data-line]':{paddingTop:"0",paddingBottom:"0",paddingLeft:"0"},"pre[data-line] code":{position:"relative",paddingLeft:"4em"},"pre .line-highlight":{marginTop:"0"}}},4560:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#a9b7c6",fontFamily:"Consolas, Monaco, 'Andale Mono', monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#a9b7c6",fontFamily:"Consolas, Monaco, 'Andale Mono', monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",background:"#2b2b2b"},'pre[class*="language-"]::-moz-selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'pre[class*="language-"] ::-moz-selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'code[class*="language-"]::-moz-selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'code[class*="language-"] ::-moz-selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'pre[class*="language-"]::selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'pre[class*="language-"] ::selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'code[class*="language-"]::selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'code[class*="language-"] ::selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},':not(pre) > code[class*="language-"]':{background:"#2b2b2b",padding:".1em",borderRadius:".3em"},comment:{color:"#808080"},prolog:{color:"#808080"},cdata:{color:"#808080"},delimiter:{color:"#cc7832"},boolean:{color:"#cc7832"},keyword:{color:"#cc7832"},selector:{color:"#cc7832"},important:{color:"#cc7832"},atrule:{color:"#cc7832"},operator:{color:"#a9b7c6"},punctuation:{color:"#a9b7c6"},"attr-name":{color:"#a9b7c6"},tag:{color:"#e8bf6a"},"tag.punctuation":{color:"#e8bf6a"},doctype:{color:"#e8bf6a"},builtin:{color:"#e8bf6a"},entity:{color:"#6897bb"},number:{color:"#6897bb"},symbol:{color:"#6897bb"},property:{color:"#9876aa"},constant:{color:"#9876aa"},variable:{color:"#9876aa"},string:{color:"#6a8759"},char:{color:"#6a8759"},"attr-value":{color:"#a5c261"},"attr-value.punctuation":{color:"#a5c261"},"attr-value.punctuation:first-child":{color:"#a9b7c6"},url:{color:"#287bde",textDecoration:"underline"},function:{color:"#ffc66d"},regex:{background:"#364135"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{background:"#294436"},deleted:{background:"#484a4a"},"code.language-css .token.property":{color:"#a9b7c6"},"code.language-css .token.property + .token.punctuation":{color:"#a9b7c6"},"code.language-css .token.id":{color:"#ffc66d"},"code.language-css .token.selector > .token.class":{color:"#ffc66d"},"code.language-css .token.selector > .token.attribute":{color:"#ffc66d"},"code.language-css .token.selector > .token.pseudo-class":{color:"#ffc66d"},"code.language-css .token.selector > .token.pseudo-element":{color:"#ffc66d"}}},3352:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"white",background:"none",textShadow:"0 -.1em .2em black",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"white",background:"hsl(30, 20%, 25%)",textShadow:"0 -.1em .2em black",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",border:".3em solid hsl(30, 20%, 40%)",borderRadius:".5em",boxShadow:"1px 1px .5em black inset"},':not(pre) > code[class*="language-"]':{background:"hsl(30, 20%, 25%)",padding:".15em .2em .05em",borderRadius:".3em",border:".13em solid hsl(30, 20%, 40%)",boxShadow:"1px 1px .3em -.1em black inset",whiteSpace:"normal"},comment:{color:"hsl(30, 20%, 50%)"},prolog:{color:"hsl(30, 20%, 50%)"},doctype:{color:"hsl(30, 20%, 50%)"},cdata:{color:"hsl(30, 20%, 50%)"},punctuation:{Opacity:".7"},namespace:{Opacity:".7"},property:{color:"hsl(350, 40%, 70%)"},tag:{color:"hsl(350, 40%, 70%)"},boolean:{color:"hsl(350, 40%, 70%)"},number:{color:"hsl(350, 40%, 70%)"},constant:{color:"hsl(350, 40%, 70%)"},symbol:{color:"hsl(350, 40%, 70%)"},selector:{color:"hsl(75, 70%, 60%)"},"attr-name":{color:"hsl(75, 70%, 60%)"},string:{color:"hsl(75, 70%, 60%)"},char:{color:"hsl(75, 70%, 60%)"},builtin:{color:"hsl(75, 70%, 60%)"},inserted:{color:"hsl(75, 70%, 60%)"},operator:{color:"hsl(40, 90%, 60%)"},entity:{color:"hsl(40, 90%, 60%)",cursor:"help"},url:{color:"hsl(40, 90%, 60%)"},".language-css .token.string":{color:"hsl(40, 90%, 60%)"},".style .token.string":{color:"hsl(40, 90%, 60%)"},variable:{color:"hsl(40, 90%, 60%)"},atrule:{color:"hsl(350, 40%, 70%)"},"attr-value":{color:"hsl(350, 40%, 70%)"},keyword:{color:"hsl(350, 40%, 70%)"},regex:{color:"#e90"},important:{color:"#e90",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},deleted:{color:"red"}}},3498:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f8f8f2",background:"none",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f8f8f2",background:"#282a36",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em"},':not(pre) > code[class*="language-"]':{background:"#282a36",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#6272a4"},prolog:{color:"#6272a4"},doctype:{color:"#6272a4"},cdata:{color:"#6272a4"},punctuation:{color:"#f8f8f2"},".namespace":{Opacity:".7"},property:{color:"#ff79c6"},tag:{color:"#ff79c6"},constant:{color:"#ff79c6"},symbol:{color:"#ff79c6"},deleted:{color:"#ff79c6"},boolean:{color:"#bd93f9"},number:{color:"#bd93f9"},selector:{color:"#50fa7b"},"attr-name":{color:"#50fa7b"},string:{color:"#50fa7b"},char:{color:"#50fa7b"},builtin:{color:"#50fa7b"},inserted:{color:"#50fa7b"},operator:{color:"#f8f8f2"},entity:{color:"#f8f8f2",cursor:"help"},url:{color:"#f8f8f2"},".language-css .token.string":{color:"#f8f8f2"},".style .token.string":{color:"#f8f8f2"},variable:{color:"#f8f8f2"},atrule:{color:"#f1fa8c"},"attr-value":{color:"#f1fa8c"},function:{color:"#f1fa8c"},"class-name":{color:"#f1fa8c"},keyword:{color:"#8be9fd"},regex:{color:"#ffb86c"},important:{color:"#ffb86c",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},1535:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#2a2734",color:"#9a86fd"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#2a2734",color:"#9a86fd",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#6a51e6"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#6a51e6"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#6a51e6"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#6a51e6"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#6a51e6"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#6a51e6"},'code[class*="language-"]::selection':{textShadow:"none",background:"#6a51e6"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#6a51e6"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#6c6783"},prolog:{color:"#6c6783"},doctype:{color:"#6c6783"},cdata:{color:"#6c6783"},punctuation:{color:"#6c6783"},namespace:{Opacity:".7"},tag:{color:"#e09142"},operator:{color:"#e09142"},number:{color:"#e09142"},property:{color:"#9a86fd"},function:{color:"#9a86fd"},"tag-id":{color:"#eeebff"},selector:{color:"#eeebff"},"atrule-id":{color:"#eeebff"},"code.language-javascript":{color:"#c4b9fe"},"attr-name":{color:"#c4b9fe"},"code.language-css":{color:"#ffcc99"},"code.language-scss":{color:"#ffcc99"},boolean:{color:"#ffcc99"},string:{color:"#ffcc99"},entity:{color:"#ffcc99",cursor:"help"},url:{color:"#ffcc99"},".language-css .token.string":{color:"#ffcc99"},".language-scss .token.string":{color:"#ffcc99"},".style .token.string":{color:"#ffcc99"},"attr-value":{color:"#ffcc99"},keyword:{color:"#ffcc99"},control:{color:"#ffcc99"},directive:{color:"#ffcc99"},unit:{color:"#ffcc99"},statement:{color:"#ffcc99"},regex:{color:"#ffcc99"},atrule:{color:"#ffcc99"},placeholder:{color:"#ffcc99"},variable:{color:"#ffcc99"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #eeebff",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#c4b9fe"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #8a75f5",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#2c2937"},".line-numbers .line-numbers-rows > span:before":{color:"#3c3949"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0))"}}},7638:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#322d29",color:"#88786d"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#322d29",color:"#88786d",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#6f5849"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#6f5849"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#6f5849"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#6f5849"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#6f5849"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#6f5849"},'code[class*="language-"]::selection':{textShadow:"none",background:"#6f5849"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#6f5849"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#6a5f58"},prolog:{color:"#6a5f58"},doctype:{color:"#6a5f58"},cdata:{color:"#6a5f58"},punctuation:{color:"#6a5f58"},namespace:{Opacity:".7"},tag:{color:"#bfa05a"},operator:{color:"#bfa05a"},number:{color:"#bfa05a"},property:{color:"#88786d"},function:{color:"#88786d"},"tag-id":{color:"#fff3eb"},selector:{color:"#fff3eb"},"atrule-id":{color:"#fff3eb"},"code.language-javascript":{color:"#a48774"},"attr-name":{color:"#a48774"},"code.language-css":{color:"#fcc440"},"code.language-scss":{color:"#fcc440"},boolean:{color:"#fcc440"},string:{color:"#fcc440"},entity:{color:"#fcc440",cursor:"help"},url:{color:"#fcc440"},".language-css .token.string":{color:"#fcc440"},".language-scss .token.string":{color:"#fcc440"},".style .token.string":{color:"#fcc440"},"attr-value":{color:"#fcc440"},keyword:{color:"#fcc440"},control:{color:"#fcc440"},directive:{color:"#fcc440"},unit:{color:"#fcc440"},statement:{color:"#fcc440"},regex:{color:"#fcc440"},atrule:{color:"#fcc440"},placeholder:{color:"#fcc440"},variable:{color:"#fcc440"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #fff3eb",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#a48774"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #816d5f",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#35302b"},".line-numbers .line-numbers-rows > span:before":{color:"#46403d"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0))"}}},6777:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#2a2d2a",color:"#687d68"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#2a2d2a",color:"#687d68",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#435643"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#435643"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#435643"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#435643"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#435643"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#435643"},'code[class*="language-"]::selection':{textShadow:"none",background:"#435643"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#435643"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#535f53"},prolog:{color:"#535f53"},doctype:{color:"#535f53"},cdata:{color:"#535f53"},punctuation:{color:"#535f53"},namespace:{Opacity:".7"},tag:{color:"#a2b34d"},operator:{color:"#a2b34d"},number:{color:"#a2b34d"},property:{color:"#687d68"},function:{color:"#687d68"},"tag-id":{color:"#f0fff0"},selector:{color:"#f0fff0"},"atrule-id":{color:"#f0fff0"},"code.language-javascript":{color:"#b3d6b3"},"attr-name":{color:"#b3d6b3"},"code.language-css":{color:"#e5fb79"},"code.language-scss":{color:"#e5fb79"},boolean:{color:"#e5fb79"},string:{color:"#e5fb79"},entity:{color:"#e5fb79",cursor:"help"},url:{color:"#e5fb79"},".language-css .token.string":{color:"#e5fb79"},".language-scss .token.string":{color:"#e5fb79"},".style .token.string":{color:"#e5fb79"},"attr-value":{color:"#e5fb79"},keyword:{color:"#e5fb79"},control:{color:"#e5fb79"},directive:{color:"#e5fb79"},unit:{color:"#e5fb79"},statement:{color:"#e5fb79"},regex:{color:"#e5fb79"},atrule:{color:"#e5fb79"},placeholder:{color:"#e5fb79"},variable:{color:"#e5fb79"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #f0fff0",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#b3d6b3"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #5c705c",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#2c302c"},".line-numbers .line-numbers-rows > span:before":{color:"#3b423b"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0))"}}},5002:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#faf8f5",color:"#728fcb"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#faf8f5",color:"#728fcb",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#faf8f5"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#faf8f5"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#faf8f5"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#faf8f5"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#faf8f5"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#faf8f5"},'code[class*="language-"]::selection':{textShadow:"none",background:"#faf8f5"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#faf8f5"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#b6ad9a"},prolog:{color:"#b6ad9a"},doctype:{color:"#b6ad9a"},cdata:{color:"#b6ad9a"},punctuation:{color:"#b6ad9a"},namespace:{Opacity:".7"},tag:{color:"#063289"},operator:{color:"#063289"},number:{color:"#063289"},property:{color:"#b29762"},function:{color:"#b29762"},"tag-id":{color:"#2d2006"},selector:{color:"#2d2006"},"atrule-id":{color:"#2d2006"},"code.language-javascript":{color:"#896724"},"attr-name":{color:"#896724"},"code.language-css":{color:"#728fcb"},"code.language-scss":{color:"#728fcb"},boolean:{color:"#728fcb"},string:{color:"#728fcb"},entity:{color:"#728fcb",cursor:"help"},url:{color:"#728fcb"},".language-css .token.string":{color:"#728fcb"},".language-scss .token.string":{color:"#728fcb"},".style .token.string":{color:"#728fcb"},"attr-value":{color:"#728fcb"},keyword:{color:"#728fcb"},control:{color:"#728fcb"},directive:{color:"#728fcb"},unit:{color:"#728fcb"},statement:{color:"#728fcb"},regex:{color:"#728fcb"},atrule:{color:"#728fcb"},placeholder:{color:"#93abdc"},variable:{color:"#93abdc"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #2d2006",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#896724"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #896724",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#ece8de"},".line-numbers .line-numbers-rows > span:before":{color:"#cdc4b1"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0))"}}},465:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#1d262f",color:"#57718e"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#1d262f",color:"#57718e",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#004a9e"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#004a9e"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#004a9e"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#004a9e"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#004a9e"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#004a9e"},'code[class*="language-"]::selection':{textShadow:"none",background:"#004a9e"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#004a9e"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#4a5f78"},prolog:{color:"#4a5f78"},doctype:{color:"#4a5f78"},cdata:{color:"#4a5f78"},punctuation:{color:"#4a5f78"},namespace:{Opacity:".7"},tag:{color:"#0aa370"},operator:{color:"#0aa370"},number:{color:"#0aa370"},property:{color:"#57718e"},function:{color:"#57718e"},"tag-id":{color:"#ebf4ff"},selector:{color:"#ebf4ff"},"atrule-id":{color:"#ebf4ff"},"code.language-javascript":{color:"#7eb6f6"},"attr-name":{color:"#7eb6f6"},"code.language-css":{color:"#47ebb4"},"code.language-scss":{color:"#47ebb4"},boolean:{color:"#47ebb4"},string:{color:"#47ebb4"},entity:{color:"#47ebb4",cursor:"help"},url:{color:"#47ebb4"},".language-css .token.string":{color:"#47ebb4"},".language-scss .token.string":{color:"#47ebb4"},".style .token.string":{color:"#47ebb4"},"attr-value":{color:"#47ebb4"},keyword:{color:"#47ebb4"},control:{color:"#47ebb4"},directive:{color:"#47ebb4"},unit:{color:"#47ebb4"},statement:{color:"#47ebb4"},regex:{color:"#47ebb4"},atrule:{color:"#47ebb4"},placeholder:{color:"#47ebb4"},variable:{color:"#47ebb4"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #ebf4ff",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#7eb6f6"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #34659d",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#1f2932"},".line-numbers .line-numbers-rows > span:before":{color:"#2c3847"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0))"}}},8129:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#24242e",color:"#767693"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#24242e",color:"#767693",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#5151e6"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#5151e6"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#5151e6"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#5151e6"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#5151e6"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#5151e6"},'code[class*="language-"]::selection':{textShadow:"none",background:"#5151e6"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#5151e6"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#5b5b76"},prolog:{color:"#5b5b76"},doctype:{color:"#5b5b76"},cdata:{color:"#5b5b76"},punctuation:{color:"#5b5b76"},namespace:{Opacity:".7"},tag:{color:"#dd672c"},operator:{color:"#dd672c"},number:{color:"#dd672c"},property:{color:"#767693"},function:{color:"#767693"},"tag-id":{color:"#ebebff"},selector:{color:"#ebebff"},"atrule-id":{color:"#ebebff"},"code.language-javascript":{color:"#aaaaca"},"attr-name":{color:"#aaaaca"},"code.language-css":{color:"#fe8c52"},"code.language-scss":{color:"#fe8c52"},boolean:{color:"#fe8c52"},string:{color:"#fe8c52"},entity:{color:"#fe8c52",cursor:"help"},url:{color:"#fe8c52"},".language-css .token.string":{color:"#fe8c52"},".language-scss .token.string":{color:"#fe8c52"},".style .token.string":{color:"#fe8c52"},"attr-value":{color:"#fe8c52"},keyword:{color:"#fe8c52"},control:{color:"#fe8c52"},directive:{color:"#fe8c52"},unit:{color:"#fe8c52"},statement:{color:"#fe8c52"},regex:{color:"#fe8c52"},atrule:{color:"#fe8c52"},placeholder:{color:"#fe8c52"},variable:{color:"#fe8c52"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #ebebff",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#aaaaca"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #7676f4",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#262631"},".line-numbers .line-numbers-rows > span:before":{color:"#393949"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0))"}}},4457:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"black",color:"white",boxShadow:"-.3em 0 0 .3em black, .3em 0 0 .3em black"},'pre[class*="language-"]':{fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:".4em .8em",margin:".5em 0",overflow:"auto",background:'url(\'data:image/svg+xml;charset=utf-8,%0D%0A%0D%0A%0D%0A<%2Fsvg>\')',backgroundSize:"1em 1em"},':not(pre) > code[class*="language-"]':{padding:".2em",borderRadius:".3em",boxShadow:"none",whiteSpace:"normal"},comment:{color:"#aaa"},prolog:{color:"#aaa"},doctype:{color:"#aaa"},cdata:{color:"#aaa"},punctuation:{color:"#999"},namespace:{Opacity:".7"},property:{color:"#0cf"},tag:{color:"#0cf"},boolean:{color:"#0cf"},number:{color:"#0cf"},constant:{color:"#0cf"},symbol:{color:"#0cf"},selector:{color:"yellow"},"attr-name":{color:"yellow"},string:{color:"yellow"},char:{color:"yellow"},builtin:{color:"yellow"},operator:{color:"yellowgreen"},entity:{color:"yellowgreen",cursor:"help"},url:{color:"yellowgreen"},".language-css .token.string":{color:"yellowgreen"},variable:{color:"yellowgreen"},inserted:{color:"yellowgreen"},atrule:{color:"deeppink"},"attr-value":{color:"deeppink"},keyword:{color:"deeppink"},regex:{color:"orange"},important:{color:"orange",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},deleted:{color:"red"},"pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix)":{backgroundColor:"rgba(255, 0, 0, .3)",display:"inline"},"pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix)":{backgroundColor:"rgba(255, 0, 0, .3)",display:"inline"},"pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix)":{backgroundColor:"rgba(0, 255, 128, .3)",display:"inline"},"pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix)":{backgroundColor:"rgba(0, 255, 128, .3)",display:"inline"}}},9447:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#393A34",fontFamily:'"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",fontSize:".9em",lineHeight:"1.2em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#393A34",fontFamily:'"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",fontSize:".9em",lineHeight:"1.2em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",border:"1px solid #dddddd",backgroundColor:"white"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{background:"#b3d4fc"},'pre[class*="language-"] ::-moz-selection':{background:"#b3d4fc"},'code[class*="language-"]::-moz-selection':{background:"#b3d4fc"},'code[class*="language-"] ::-moz-selection':{background:"#b3d4fc"},'pre[class*="language-"]::selection':{background:"#b3d4fc"},'pre[class*="language-"] ::selection':{background:"#b3d4fc"},'code[class*="language-"]::selection':{background:"#b3d4fc"},'code[class*="language-"] ::selection':{background:"#b3d4fc"},':not(pre) > code[class*="language-"]':{padding:".2em",paddingTop:"1px",paddingBottom:"1px",background:"#f8f8f8",border:"1px solid #dddddd"},comment:{color:"#999988",fontStyle:"italic"},prolog:{color:"#999988",fontStyle:"italic"},doctype:{color:"#999988",fontStyle:"italic"},cdata:{color:"#999988",fontStyle:"italic"},namespace:{Opacity:".7"},string:{color:"#e3116c"},"attr-value":{color:"#e3116c"},punctuation:{color:"#393A34"},operator:{color:"#393A34"},entity:{color:"#36acaa"},url:{color:"#36acaa"},symbol:{color:"#36acaa"},number:{color:"#36acaa"},boolean:{color:"#36acaa"},variable:{color:"#36acaa"},constant:{color:"#36acaa"},property:{color:"#36acaa"},regex:{color:"#36acaa"},inserted:{color:"#36acaa"},atrule:{color:"#00a4db"},keyword:{color:"#00a4db"},"attr-name":{color:"#00a4db"},".language-autohotkey .token.selector":{color:"#00a4db"},function:{color:"#9a050f",fontWeight:"bold"},deleted:{color:"#9a050f"},".language-autohotkey .token.tag":{color:"#9a050f"},tag:{color:"#00009f"},selector:{color:"#00009f"},".language-autohotkey .token.keyword":{color:"#00009f"},important:{fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},8868:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#ebdbb2",fontFamily:'Consolas, Monaco, "Andale Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#ebdbb2",fontFamily:'Consolas, Monaco, "Andale Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",background:"#1d2021"},'pre[class*="language-"]::-moz-selection':{color:"#fbf1c7",background:"#7c6f64"},'pre[class*="language-"] ::-moz-selection':{color:"#fbf1c7",background:"#7c6f64"},'code[class*="language-"]::-moz-selection':{color:"#fbf1c7",background:"#7c6f64"},'code[class*="language-"] ::-moz-selection':{color:"#fbf1c7",background:"#7c6f64"},'pre[class*="language-"]::selection':{color:"#fbf1c7",background:"#7c6f64"},'pre[class*="language-"] ::selection':{color:"#fbf1c7",background:"#7c6f64"},'code[class*="language-"]::selection':{color:"#fbf1c7",background:"#7c6f64"},'code[class*="language-"] ::selection':{color:"#fbf1c7",background:"#7c6f64"},':not(pre) > code[class*="language-"]':{background:"#1d2021",padding:"0.1em",borderRadius:"0.3em"},comment:{color:"#a89984"},prolog:{color:"#a89984"},cdata:{color:"#a89984"},delimiter:{color:"#fb4934"},boolean:{color:"#fb4934"},keyword:{color:"#fb4934"},selector:{color:"#fb4934"},important:{color:"#fb4934"},atrule:{color:"#fb4934"},operator:{color:"#a89984"},punctuation:{color:"#a89984"},"attr-name":{color:"#a89984"},tag:{color:"#fabd2f"},"tag.punctuation":{color:"#fabd2f"},doctype:{color:"#fabd2f"},builtin:{color:"#fabd2f"},entity:{color:"#d3869b"},number:{color:"#d3869b"},symbol:{color:"#d3869b"},property:{color:"#fb4934"},constant:{color:"#fb4934"},variable:{color:"#fb4934"},string:{color:"#b8bb26"},char:{color:"#b8bb26"},"attr-value":{color:"#a89984"},"attr-value.punctuation":{color:"#a89984"},url:{color:"#b8bb26",textDecoration:"underline"},function:{color:"#fabd2f"},regex:{background:"#b8bb26"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{background:"#a89984"},deleted:{background:"#fb4934"}}},6303:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#3c3836",fontFamily:'Consolas, Monaco, "Andale Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#3c3836",fontFamily:'Consolas, Monaco, "Andale Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",background:"#f9f5d7"},'pre[class*="language-"]::-moz-selection':{color:"#282828",background:"#a89984"},'pre[class*="language-"] ::-moz-selection':{color:"#282828",background:"#a89984"},'code[class*="language-"]::-moz-selection':{color:"#282828",background:"#a89984"},'code[class*="language-"] ::-moz-selection':{color:"#282828",background:"#a89984"},'pre[class*="language-"]::selection':{color:"#282828",background:"#a89984"},'pre[class*="language-"] ::selection':{color:"#282828",background:"#a89984"},'code[class*="language-"]::selection':{color:"#282828",background:"#a89984"},'code[class*="language-"] ::selection':{color:"#282828",background:"#a89984"},':not(pre) > code[class*="language-"]':{background:"#f9f5d7",padding:"0.1em",borderRadius:"0.3em"},comment:{color:"#7c6f64"},prolog:{color:"#7c6f64"},cdata:{color:"#7c6f64"},delimiter:{color:"#9d0006"},boolean:{color:"#9d0006"},keyword:{color:"#9d0006"},selector:{color:"#9d0006"},important:{color:"#9d0006"},atrule:{color:"#9d0006"},operator:{color:"#7c6f64"},punctuation:{color:"#7c6f64"},"attr-name":{color:"#7c6f64"},tag:{color:"#b57614"},"tag.punctuation":{color:"#b57614"},doctype:{color:"#b57614"},builtin:{color:"#b57614"},entity:{color:"#8f3f71"},number:{color:"#8f3f71"},symbol:{color:"#8f3f71"},property:{color:"#9d0006"},constant:{color:"#9d0006"},variable:{color:"#9d0006"},string:{color:"#797403"},char:{color:"#797403"},"attr-value":{color:"#7c6f64"},"attr-value.punctuation":{color:"#7c6f64"},url:{color:"#797403",textDecoration:"underline"},function:{color:"#b57614"},regex:{background:"#797403"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{background:"#7c6f64"},deleted:{background:"#9d0006"}}},457:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={"code[class*='language-']":{color:"#d6e7ff",background:"#030314",textShadow:"none",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',fontSize:"1em",lineHeight:"1.5",letterSpacing:".2px",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",textAlign:"left",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},"pre[class*='language-']":{color:"#d6e7ff",background:"#030314",textShadow:"none",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',fontSize:"1em",lineHeight:"1.5",letterSpacing:".2px",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",textAlign:"left",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",border:"1px solid #2a4555",borderRadius:"5px",padding:"1.5em 1em",margin:"1em 0",overflow:"auto"},"pre[class*='language-']::-moz-selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"pre[class*='language-'] ::-moz-selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"code[class*='language-']::-moz-selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"code[class*='language-'] ::-moz-selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"pre[class*='language-']::selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"pre[class*='language-'] ::selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"code[class*='language-']::selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"code[class*='language-'] ::selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},":not(pre) > code[class*='language-']":{color:"#f0f6f6",background:"#2a4555",padding:"0.2em 0.3em",borderRadius:"0.2em",boxDecorationBreak:"clone"},comment:{color:"#446e69"},prolog:{color:"#446e69"},doctype:{color:"#446e69"},cdata:{color:"#446e69"},punctuation:{color:"#d6b007"},property:{color:"#d6e7ff"},tag:{color:"#d6e7ff"},boolean:{color:"#d6e7ff"},number:{color:"#d6e7ff"},constant:{color:"#d6e7ff"},symbol:{color:"#d6e7ff"},deleted:{color:"#d6e7ff"},selector:{color:"#e60067"},"attr-name":{color:"#e60067"},builtin:{color:"#e60067"},inserted:{color:"#e60067"},string:{color:"#49c6ec"},char:{color:"#49c6ec"},operator:{color:"#ec8e01",background:"transparent"},entity:{color:"#ec8e01",background:"transparent"},url:{color:"#ec8e01",background:"transparent"},".language-css .token.string":{color:"#ec8e01",background:"transparent"},".style .token.string":{color:"#ec8e01",background:"transparent"},atrule:{color:"#0fe468"},"attr-value":{color:"#0fe468"},keyword:{color:"#0fe468"},function:{color:"#78f3e9"},"class-name":{color:"#78f3e9"},regex:{color:"#d6e7ff"},important:{color:"#d6e7ff"},variable:{color:"#d6e7ff"}}},8616:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'"Fira Mono", Menlo, Monaco, "Lucida Console", "Courier New", Courier, monospace',fontSize:"16px",lineHeight:"1.375",direction:"ltr",textAlign:"left",wordSpacing:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordBreak:"break-all",wordWrap:"break-word",background:"#322931",color:"#b9b5b8"},'pre[class*="language-"]':{fontFamily:'"Fira Mono", Menlo, Monaco, "Lucida Console", "Courier New", Courier, monospace',fontSize:"16px",lineHeight:"1.375",direction:"ltr",textAlign:"left",wordSpacing:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordBreak:"break-all",wordWrap:"break-word",background:"#322931",color:"#b9b5b8",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#797379"},prolog:{color:"#797379"},doctype:{color:"#797379"},cdata:{color:"#797379"},punctuation:{color:"#b9b5b8"},".namespace":{Opacity:".7"},null:{color:"#fd8b19"},operator:{color:"#fd8b19"},boolean:{color:"#fd8b19"},number:{color:"#fd8b19"},property:{color:"#fdcc59"},tag:{color:"#1290bf"},string:{color:"#149b93"},selector:{color:"#c85e7c"},"attr-name":{color:"#fd8b19"},entity:{color:"#149b93",cursor:"help"},url:{color:"#149b93"},".language-css .token.string":{color:"#149b93"},".style .token.string":{color:"#149b93"},"attr-value":{color:"#8fc13e"},keyword:{color:"#8fc13e"},control:{color:"#8fc13e"},directive:{color:"#8fc13e"},unit:{color:"#8fc13e"},statement:{color:"#149b93"},regex:{color:"#149b93"},atrule:{color:"#149b93"},placeholder:{color:"#1290bf"},variable:{color:"#1290bf"},important:{color:"#dd464c",fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid red",OutlineOffset:".4em"}}},4283:function(e,t,n){"use strict";var o=n(4836);Object.defineProperty(t,"pJ",{enumerable:!0,get:function(){return r.default}}),o(n(7833)),o(n(3352)),o(n(4457)),o(n(1836)),o(n(9698)),o(n(9623)),o(n(9343)),o(n(5570)),o(n(4400));var r=o(n(4441));o(n(1518)),o(n(68)),o(n(7032)),o(n(3611)),o(n(9500)),o(n(4560)),o(n(3498)),o(n(1535)),o(n(7638)),o(n(6777)),o(n(5002)),o(n(465)),o(n(8129)),o(n(9447)),o(n(8868)),o(n(6303)),o(n(457)),o(n(8616)),o(n(8980)),o(n(1074)),o(n(6526)),o(n(3357)),o(n(2894)),o(n(7822)),o(n(5875)),o(n(9477)),o(n(966)),o(n(3362)),o(n(8154)),o(n(2884)),o(n(6732)),o(n(5901)),o(n(5004)),o(n(4104))},8980:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f8f8f2",background:"none",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f8f8f2",background:"#263E52",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em"},':not(pre) > code[class*="language-"]':{background:"#263E52",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#5c98cd"},prolog:{color:"#5c98cd"},doctype:{color:"#5c98cd"},cdata:{color:"#5c98cd"},punctuation:{color:"#f8f8f2"},".namespace":{Opacity:".7"},property:{color:"#F05E5D"},tag:{color:"#F05E5D"},constant:{color:"#F05E5D"},symbol:{color:"#F05E5D"},deleted:{color:"#F05E5D"},boolean:{color:"#BC94F9"},number:{color:"#BC94F9"},selector:{color:"#FCFCD6"},"attr-name":{color:"#FCFCD6"},string:{color:"#FCFCD6"},char:{color:"#FCFCD6"},builtin:{color:"#FCFCD6"},inserted:{color:"#FCFCD6"},operator:{color:"#f8f8f2"},entity:{color:"#f8f8f2",cursor:"help"},url:{color:"#f8f8f2"},".language-css .token.string":{color:"#f8f8f2"},".style .token.string":{color:"#f8f8f2"},variable:{color:"#f8f8f2"},atrule:{color:"#66D8EF"},"attr-value":{color:"#66D8EF"},function:{color:"#66D8EF"},"class-name":{color:"#66D8EF"},keyword:{color:"#6EB26E"},regex:{color:"#F05E5D"},important:{color:"#F05E5D",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},1074:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#eee",background:"#2f2f2f",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#eee",background:"#2f2f2f",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",overflow:"auto",position:"relative",margin:"0.5em 0",padding:"1.25em 1em"},'code[class*="language-"]::-moz-selection':{background:"#363636"},'pre[class*="language-"]::-moz-selection':{background:"#363636"},'code[class*="language-"] ::-moz-selection':{background:"#363636"},'pre[class*="language-"] ::-moz-selection':{background:"#363636"},'code[class*="language-"]::selection':{background:"#363636"},'pre[class*="language-"]::selection':{background:"#363636"},'code[class*="language-"] ::selection':{background:"#363636"},'pre[class*="language-"] ::selection':{background:"#363636"},':not(pre) > code[class*="language-"]':{whiteSpace:"normal",borderRadius:"0.2em",padding:"0.1em"},".language-css > code":{color:"#fd9170"},".language-sass > code":{color:"#fd9170"},".language-scss > code":{color:"#fd9170"},'[class*="language-"] .namespace':{Opacity:"0.7"},atrule:{color:"#c792ea"},"attr-name":{color:"#ffcb6b"},"attr-value":{color:"#a5e844"},attribute:{color:"#a5e844"},boolean:{color:"#c792ea"},builtin:{color:"#ffcb6b"},cdata:{color:"#80cbc4"},char:{color:"#80cbc4"},class:{color:"#ffcb6b"},"class-name":{color:"#f2ff00"},comment:{color:"#616161"},constant:{color:"#c792ea"},deleted:{color:"#ff6666"},doctype:{color:"#616161"},entity:{color:"#ff6666"},function:{color:"#c792ea"},hexcode:{color:"#f2ff00"},id:{color:"#c792ea",fontWeight:"bold"},important:{color:"#c792ea",fontWeight:"bold"},inserted:{color:"#80cbc4"},keyword:{color:"#c792ea"},number:{color:"#fd9170"},operator:{color:"#89ddff"},prolog:{color:"#616161"},property:{color:"#80cbc4"},"pseudo-class":{color:"#a5e844"},"pseudo-element":{color:"#a5e844"},punctuation:{color:"#89ddff"},regex:{color:"#f2ff00"},selector:{color:"#ff6666"},string:{color:"#a5e844"},symbol:{color:"#c792ea"},tag:{color:"#ff6666"},unit:{color:"#fd9170"},url:{color:"#ff6666"},variable:{color:"#ff6666"}}},6526:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#90a4ae",background:"#fafafa",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#90a4ae",background:"#fafafa",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",overflow:"auto",position:"relative",margin:"0.5em 0",padding:"1.25em 1em"},'code[class*="language-"]::-moz-selection':{background:"#cceae7",color:"#263238"},'pre[class*="language-"]::-moz-selection':{background:"#cceae7",color:"#263238"},'code[class*="language-"] ::-moz-selection':{background:"#cceae7",color:"#263238"},'pre[class*="language-"] ::-moz-selection':{background:"#cceae7",color:"#263238"},'code[class*="language-"]::selection':{background:"#cceae7",color:"#263238"},'pre[class*="language-"]::selection':{background:"#cceae7",color:"#263238"},'code[class*="language-"] ::selection':{background:"#cceae7",color:"#263238"},'pre[class*="language-"] ::selection':{background:"#cceae7",color:"#263238"},':not(pre) > code[class*="language-"]':{whiteSpace:"normal",borderRadius:"0.2em",padding:"0.1em"},".language-css > code":{color:"#f76d47"},".language-sass > code":{color:"#f76d47"},".language-scss > code":{color:"#f76d47"},'[class*="language-"] .namespace':{Opacity:"0.7"},atrule:{color:"#7c4dff"},"attr-name":{color:"#39adb5"},"attr-value":{color:"#f6a434"},attribute:{color:"#f6a434"},boolean:{color:"#7c4dff"},builtin:{color:"#39adb5"},cdata:{color:"#39adb5"},char:{color:"#39adb5"},class:{color:"#39adb5"},"class-name":{color:"#6182b8"},comment:{color:"#aabfc9"},constant:{color:"#7c4dff"},deleted:{color:"#e53935"},doctype:{color:"#aabfc9"},entity:{color:"#e53935"},function:{color:"#7c4dff"},hexcode:{color:"#f76d47"},id:{color:"#7c4dff",fontWeight:"bold"},important:{color:"#7c4dff",fontWeight:"bold"},inserted:{color:"#39adb5"},keyword:{color:"#7c4dff"},number:{color:"#f76d47"},operator:{color:"#39adb5"},prolog:{color:"#aabfc9"},property:{color:"#39adb5"},"pseudo-class":{color:"#f6a434"},"pseudo-element":{color:"#f6a434"},punctuation:{color:"#39adb5"},regex:{color:"#6182b8"},selector:{color:"#e53935"},string:{color:"#f6a434"},symbol:{color:"#7c4dff"},tag:{color:"#e53935"},unit:{color:"#f76d47"},url:{color:"#e53935"},variable:{color:"#e53935"}}},3357:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#c3cee3",background:"#263238",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#c3cee3",background:"#263238",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",overflow:"auto",position:"relative",margin:"0.5em 0",padding:"1.25em 1em"},'code[class*="language-"]::-moz-selection':{background:"#363636"},'pre[class*="language-"]::-moz-selection':{background:"#363636"},'code[class*="language-"] ::-moz-selection':{background:"#363636"},'pre[class*="language-"] ::-moz-selection':{background:"#363636"},'code[class*="language-"]::selection':{background:"#363636"},'pre[class*="language-"]::selection':{background:"#363636"},'code[class*="language-"] ::selection':{background:"#363636"},'pre[class*="language-"] ::selection':{background:"#363636"},':not(pre) > code[class*="language-"]':{whiteSpace:"normal",borderRadius:"0.2em",padding:"0.1em"},".language-css > code":{color:"#fd9170"},".language-sass > code":{color:"#fd9170"},".language-scss > code":{color:"#fd9170"},'[class*="language-"] .namespace':{Opacity:"0.7"},atrule:{color:"#c792ea"},"attr-name":{color:"#ffcb6b"},"attr-value":{color:"#c3e88d"},attribute:{color:"#c3e88d"},boolean:{color:"#c792ea"},builtin:{color:"#ffcb6b"},cdata:{color:"#80cbc4"},char:{color:"#80cbc4"},class:{color:"#ffcb6b"},"class-name":{color:"#f2ff00"},color:{color:"#f2ff00"},comment:{color:"#546e7a"},constant:{color:"#c792ea"},deleted:{color:"#f07178"},doctype:{color:"#546e7a"},entity:{color:"#f07178"},function:{color:"#c792ea"},hexcode:{color:"#f2ff00"},id:{color:"#c792ea",fontWeight:"bold"},important:{color:"#c792ea",fontWeight:"bold"},inserted:{color:"#80cbc4"},keyword:{color:"#c792ea",fontStyle:"italic"},number:{color:"#fd9170"},operator:{color:"#89ddff"},prolog:{color:"#546e7a"},property:{color:"#80cbc4"},"pseudo-class":{color:"#c3e88d"},"pseudo-element":{color:"#c3e88d"},punctuation:{color:"#89ddff"},regex:{color:"#f2ff00"},selector:{color:"#f07178"},string:{color:"#c3e88d"},symbol:{color:"#c792ea"},tag:{color:"#f07178"},unit:{color:"#f07178"},url:{color:"#fd9170"},variable:{color:"#f07178"}}},2894:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#d6deeb",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",fontSize:"1em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"white",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",fontSize:"1em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",background:"#011627"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"]::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"]::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"] ::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},':not(pre) > code[class*="language-"]':{color:"white",background:"#011627",padding:"0.1em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"rgb(99, 119, 119)",fontStyle:"italic"},prolog:{color:"rgb(99, 119, 119)",fontStyle:"italic"},cdata:{color:"rgb(99, 119, 119)",fontStyle:"italic"},punctuation:{color:"rgb(199, 146, 234)"},".namespace":{color:"rgb(178, 204, 214)"},deleted:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"},symbol:{color:"rgb(128, 203, 196)"},property:{color:"rgb(128, 203, 196)"},tag:{color:"rgb(127, 219, 202)"},operator:{color:"rgb(127, 219, 202)"},keyword:{color:"rgb(127, 219, 202)"},boolean:{color:"rgb(255, 88, 116)"},number:{color:"rgb(247, 140, 108)"},constant:{color:"rgb(130, 170, 255)"},function:{color:"rgb(130, 170, 255)"},builtin:{color:"rgb(130, 170, 255)"},char:{color:"rgb(130, 170, 255)"},selector:{color:"rgb(199, 146, 234)",fontStyle:"italic"},doctype:{color:"rgb(199, 146, 234)",fontStyle:"italic"},"attr-name":{color:"rgb(173, 219, 103)",fontStyle:"italic"},inserted:{color:"rgb(173, 219, 103)",fontStyle:"italic"},string:{color:"rgb(173, 219, 103)"},url:{color:"rgb(173, 219, 103)"},entity:{color:"rgb(173, 219, 103)"},".language-css .token.string":{color:"rgb(173, 219, 103)"},".style .token.string":{color:"rgb(173, 219, 103)"},"class-name":{color:"rgb(255, 203, 139)"},atrule:{color:"rgb(255, 203, 139)"},"attr-value":{color:"rgb(255, 203, 139)"},regex:{color:"rgb(214, 222, 235)"},important:{color:"rgb(214, 222, 235)",fontWeight:"bold"},variable:{color:"rgb(214, 222, 235)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},7822:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f8f8f2",background:"none",fontFamily:"\"Fira Code\", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f8f8f2",background:"#2E3440",fontFamily:"\"Fira Code\", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em"},':not(pre) > code[class*="language-"]':{background:"#2E3440",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#636f88"},prolog:{color:"#636f88"},doctype:{color:"#636f88"},cdata:{color:"#636f88"},punctuation:{color:"#81A1C1"},".namespace":{Opacity:".7"},property:{color:"#81A1C1"},tag:{color:"#81A1C1"},constant:{color:"#81A1C1"},symbol:{color:"#81A1C1"},deleted:{color:"#81A1C1"},number:{color:"#B48EAD"},boolean:{color:"#81A1C1"},selector:{color:"#A3BE8C"},"attr-name":{color:"#A3BE8C"},string:{color:"#A3BE8C"},char:{color:"#A3BE8C"},builtin:{color:"#A3BE8C"},inserted:{color:"#A3BE8C"},operator:{color:"#81A1C1"},entity:{color:"#81A1C1",cursor:"help"},url:{color:"#81A1C1"},".language-css .token.string":{color:"#81A1C1"},".style .token.string":{color:"#81A1C1"},variable:{color:"#81A1C1"},atrule:{color:"#88C0D0"},"attr-value":{color:"#88C0D0"},function:{color:"#88C0D0"},"class-name":{color:"#88C0D0"},keyword:{color:"#81A1C1"},regex:{color:"#EBCB8B"},important:{color:"#EBCB8B",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},1836:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f8f8f2",background:"none",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f8f8f2",background:"#272822",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em"},':not(pre) > code[class*="language-"]':{background:"#272822",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#8292a2"},prolog:{color:"#8292a2"},doctype:{color:"#8292a2"},cdata:{color:"#8292a2"},punctuation:{color:"#f8f8f2"},namespace:{Opacity:".7"},property:{color:"#f92672"},tag:{color:"#f92672"},constant:{color:"#f92672"},symbol:{color:"#f92672"},deleted:{color:"#f92672"},boolean:{color:"#ae81ff"},number:{color:"#ae81ff"},selector:{color:"#a6e22e"},"attr-name":{color:"#a6e22e"},string:{color:"#a6e22e"},char:{color:"#a6e22e"},builtin:{color:"#a6e22e"},inserted:{color:"#a6e22e"},operator:{color:"#f8f8f2"},entity:{color:"#f8f8f2",cursor:"help"},url:{color:"#f8f8f2"},".language-css .token.string":{color:"#f8f8f2"},".style .token.string":{color:"#f8f8f2"},variable:{color:"#f8f8f2"},atrule:{color:"#e6db74"},"attr-value":{color:"#e6db74"},function:{color:"#e6db74"},"class-name":{color:"#e6db74"},keyword:{color:"#66d9ef"},regex:{color:"#fd971f"},important:{color:"#fd971f",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},5875:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{background:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:'"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{background:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:'"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",borderRadius:"0.3em"},'code[class*="language-"]::-moz-selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'code[class*="language-"] *::-moz-selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'pre[class*="language-"] *::-moz-selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'code[class*="language-"]::selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'code[class*="language-"] *::selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'pre[class*="language-"] *::selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},':not(pre) > code[class*="language-"]':{padding:"0.2em 0.3em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"hsl(220, 10%, 40%)",fontStyle:"italic"},prolog:{color:"hsl(220, 10%, 40%)"},cdata:{color:"hsl(220, 10%, 40%)"},doctype:{color:"hsl(220, 14%, 71%)"},punctuation:{color:"hsl(220, 14%, 71%)"},entity:{color:"hsl(220, 14%, 71%)",cursor:"help"},"attr-name":{color:"hsl(29, 54%, 61%)"},"class-name":{color:"hsl(29, 54%, 61%)"},boolean:{color:"hsl(29, 54%, 61%)"},constant:{color:"hsl(29, 54%, 61%)"},number:{color:"hsl(29, 54%, 61%)"},atrule:{color:"hsl(29, 54%, 61%)"},keyword:{color:"hsl(286, 60%, 67%)"},property:{color:"hsl(355, 65%, 65%)"},tag:{color:"hsl(355, 65%, 65%)"},symbol:{color:"hsl(355, 65%, 65%)"},deleted:{color:"hsl(355, 65%, 65%)"},important:{color:"hsl(355, 65%, 65%)"},selector:{color:"hsl(95, 38%, 62%)"},string:{color:"hsl(95, 38%, 62%)"},char:{color:"hsl(95, 38%, 62%)"},builtin:{color:"hsl(95, 38%, 62%)"},inserted:{color:"hsl(95, 38%, 62%)"},regex:{color:"hsl(95, 38%, 62%)"},"attr-value":{color:"hsl(95, 38%, 62%)"},"attr-value > .token.punctuation":{color:"hsl(95, 38%, 62%)"},variable:{color:"hsl(207, 82%, 66%)"},operator:{color:"hsl(207, 82%, 66%)"},function:{color:"hsl(207, 82%, 66%)"},url:{color:"hsl(187, 47%, 55%)"},"attr-value > .token.punctuation.attr-equals":{color:"hsl(220, 14%, 71%)"},"special-attr > .token.attr-value > .token.value.css":{color:"hsl(220, 14%, 71%)"},".language-css .token.selector":{color:"hsl(355, 65%, 65%)"},".language-css .token.property":{color:"hsl(220, 14%, 71%)"},".language-css .token.function":{color:"hsl(187, 47%, 55%)"},".language-css .token.url > .token.function":{color:"hsl(187, 47%, 55%)"},".language-css .token.url > .token.string.url":{color:"hsl(95, 38%, 62%)"},".language-css .token.important":{color:"hsl(286, 60%, 67%)"},".language-css .token.atrule .token.rule":{color:"hsl(286, 60%, 67%)"},".language-javascript .token.operator":{color:"hsl(286, 60%, 67%)"},".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":{color:"hsl(5, 48%, 51%)"},".language-json .token.operator":{color:"hsl(220, 14%, 71%)"},".language-json .token.null.keyword":{color:"hsl(29, 54%, 61%)"},".language-markdown .token.url":{color:"hsl(220, 14%, 71%)"},".language-markdown .token.url > .token.operator":{color:"hsl(220, 14%, 71%)"},".language-markdown .token.url-reference.url > .token.string":{color:"hsl(220, 14%, 71%)"},".language-markdown .token.url > .token.content":{color:"hsl(207, 82%, 66%)"},".language-markdown .token.url > .token.url":{color:"hsl(187, 47%, 55%)"},".language-markdown .token.url-reference.url":{color:"hsl(187, 47%, 55%)"},".language-markdown .token.blockquote.punctuation":{color:"hsl(220, 10%, 40%)",fontStyle:"italic"},".language-markdown .token.hr.punctuation":{color:"hsl(220, 10%, 40%)",fontStyle:"italic"},".language-markdown .token.code-snippet":{color:"hsl(95, 38%, 62%)"},".language-markdown .token.bold .token.content":{color:"hsl(29, 54%, 61%)"},".language-markdown .token.italic .token.content":{color:"hsl(286, 60%, 67%)"},".language-markdown .token.strike .token.content":{color:"hsl(355, 65%, 65%)"},".language-markdown .token.strike .token.punctuation":{color:"hsl(355, 65%, 65%)"},".language-markdown .token.list.punctuation":{color:"hsl(355, 65%, 65%)"},".language-markdown .token.title.important > .token.punctuation":{color:"hsl(355, 65%, 65%)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},namespace:{Opacity:"0.8"},"token.tab:not(:empty):before":{color:"hsla(220, 14%, 71%, 0.15)",textShadow:"none"},"token.cr:before":{color:"hsla(220, 14%, 71%, 0.15)",textShadow:"none"},"token.lf:before":{color:"hsla(220, 14%, 71%, 0.15)",textShadow:"none"},"token.space:before":{color:"hsla(220, 14%, 71%, 0.15)",textShadow:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item":{marginRight:"0.4em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 9%, 55%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 9%, 55%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 9%, 55%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},".line-highlight.line-highlight":{background:"hsla(220, 100%, 80%, 0.04)"},".line-highlight.line-highlight:before":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 14%, 71%)",padding:"0.1em 0.6em",borderRadius:"0.3em",boxShadow:"0 2px 0 0 rgba(0, 0, 0, 0.2)"},".line-highlight.line-highlight[data-end]:after":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 14%, 71%)",padding:"0.1em 0.6em",borderRadius:"0.3em",boxShadow:"0 2px 0 0 rgba(0, 0, 0, 0.2)"},"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":{backgroundColor:"hsla(220, 100%, 80%, 0.04)"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"hsla(220, 14%, 71%, 0.15)"},".command-line .command-line-prompt":{borderRightColor:"hsla(220, 14%, 71%, 0.15)"},".line-numbers .line-numbers-rows > span:before":{color:"hsl(220, 14%, 45%)"},".command-line .command-line-prompt > span:before":{color:"hsl(220, 14%, 45%)"},".rainbow-braces .token.token.punctuation.brace-level-1":{color:"hsl(355, 65%, 65%)"},".rainbow-braces .token.token.punctuation.brace-level-5":{color:"hsl(355, 65%, 65%)"},".rainbow-braces .token.token.punctuation.brace-level-9":{color:"hsl(355, 65%, 65%)"},".rainbow-braces .token.token.punctuation.brace-level-2":{color:"hsl(95, 38%, 62%)"},".rainbow-braces .token.token.punctuation.brace-level-6":{color:"hsl(95, 38%, 62%)"},".rainbow-braces .token.token.punctuation.brace-level-10":{color:"hsl(95, 38%, 62%)"},".rainbow-braces .token.token.punctuation.brace-level-3":{color:"hsl(207, 82%, 66%)"},".rainbow-braces .token.token.punctuation.brace-level-7":{color:"hsl(207, 82%, 66%)"},".rainbow-braces .token.token.punctuation.brace-level-11":{color:"hsl(207, 82%, 66%)"},".rainbow-braces .token.token.punctuation.brace-level-4":{color:"hsl(286, 60%, 67%)"},".rainbow-braces .token.token.punctuation.brace-level-8":{color:"hsl(286, 60%, 67%)"},".rainbow-braces .token.token.punctuation.brace-level-12":{color:"hsl(286, 60%, 67%)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)":{backgroundColor:"hsla(353, 100%, 66%, 0.15)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)":{backgroundColor:"hsla(353, 100%, 66%, 0.15)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)":{backgroundColor:"hsla(137, 100%, 55%, 0.15)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)":{backgroundColor:"hsla(137, 100%, 55%, 0.15)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},".prism-previewer.prism-previewer:before":{borderColor:"hsl(224, 13%, 17%)"},".prism-previewer-gradient.prism-previewer-gradient div":{borderColor:"hsl(224, 13%, 17%)",borderRadius:"0.3em"},".prism-previewer-color.prism-previewer-color:before":{borderRadius:"0.3em"},".prism-previewer-easing.prism-previewer-easing:before":{borderRadius:"0.3em"},".prism-previewer.prism-previewer:after":{borderTopColor:"hsl(224, 13%, 17%)"},".prism-previewer-flipped.prism-previewer-flipped.after":{borderBottomColor:"hsl(224, 13%, 17%)"},".prism-previewer-angle.prism-previewer-angle:before":{background:"hsl(219, 13%, 22%)"},".prism-previewer-time.prism-previewer-time:before":{background:"hsl(219, 13%, 22%)"},".prism-previewer-easing.prism-previewer-easing":{background:"hsl(219, 13%, 22%)"},".prism-previewer-angle.prism-previewer-angle circle":{stroke:"hsl(220, 14%, 71%)",strokeOpacity:"1"},".prism-previewer-time.prism-previewer-time circle":{stroke:"hsl(220, 14%, 71%)",strokeOpacity:"1"},".prism-previewer-easing.prism-previewer-easing circle":{stroke:"hsl(220, 14%, 71%)",fill:"transparent"},".prism-previewer-easing.prism-previewer-easing path":{stroke:"hsl(220, 14%, 71%)"},".prism-previewer-easing.prism-previewer-easing line":{stroke:"hsl(220, 14%, 71%)"}}},9477:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{background:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)",fontFamily:'"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{background:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)",fontFamily:'"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",borderRadius:"0.3em"},'code[class*="language-"]::-moz-selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'code[class*="language-"] *::-moz-selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'pre[class*="language-"] *::-moz-selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'code[class*="language-"]::selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'code[class*="language-"] *::selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'pre[class*="language-"] *::selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},':not(pre) > code[class*="language-"]':{padding:"0.2em 0.3em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"hsl(230, 4%, 64%)",fontStyle:"italic"},prolog:{color:"hsl(230, 4%, 64%)"},cdata:{color:"hsl(230, 4%, 64%)"},doctype:{color:"hsl(230, 8%, 24%)"},punctuation:{color:"hsl(230, 8%, 24%)"},entity:{color:"hsl(230, 8%, 24%)",cursor:"help"},"attr-name":{color:"hsl(35, 99%, 36%)"},"class-name":{color:"hsl(35, 99%, 36%)"},boolean:{color:"hsl(35, 99%, 36%)"},constant:{color:"hsl(35, 99%, 36%)"},number:{color:"hsl(35, 99%, 36%)"},atrule:{color:"hsl(35, 99%, 36%)"},keyword:{color:"hsl(301, 63%, 40%)"},property:{color:"hsl(5, 74%, 59%)"},tag:{color:"hsl(5, 74%, 59%)"},symbol:{color:"hsl(5, 74%, 59%)"},deleted:{color:"hsl(5, 74%, 59%)"},important:{color:"hsl(5, 74%, 59%)"},selector:{color:"hsl(119, 34%, 47%)"},string:{color:"hsl(119, 34%, 47%)"},char:{color:"hsl(119, 34%, 47%)"},builtin:{color:"hsl(119, 34%, 47%)"},inserted:{color:"hsl(119, 34%, 47%)"},regex:{color:"hsl(119, 34%, 47%)"},"attr-value":{color:"hsl(119, 34%, 47%)"},"attr-value > .token.punctuation":{color:"hsl(119, 34%, 47%)"},variable:{color:"hsl(221, 87%, 60%)"},operator:{color:"hsl(221, 87%, 60%)"},function:{color:"hsl(221, 87%, 60%)"},url:{color:"hsl(198, 99%, 37%)"},"attr-value > .token.punctuation.attr-equals":{color:"hsl(230, 8%, 24%)"},"special-attr > .token.attr-value > .token.value.css":{color:"hsl(230, 8%, 24%)"},".language-css .token.selector":{color:"hsl(5, 74%, 59%)"},".language-css .token.property":{color:"hsl(230, 8%, 24%)"},".language-css .token.function":{color:"hsl(198, 99%, 37%)"},".language-css .token.url > .token.function":{color:"hsl(198, 99%, 37%)"},".language-css .token.url > .token.string.url":{color:"hsl(119, 34%, 47%)"},".language-css .token.important":{color:"hsl(301, 63%, 40%)"},".language-css .token.atrule .token.rule":{color:"hsl(301, 63%, 40%)"},".language-javascript .token.operator":{color:"hsl(301, 63%, 40%)"},".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":{color:"hsl(344, 84%, 43%)"},".language-json .token.operator":{color:"hsl(230, 8%, 24%)"},".language-json .token.null.keyword":{color:"hsl(35, 99%, 36%)"},".language-markdown .token.url":{color:"hsl(230, 8%, 24%)"},".language-markdown .token.url > .token.operator":{color:"hsl(230, 8%, 24%)"},".language-markdown .token.url-reference.url > .token.string":{color:"hsl(230, 8%, 24%)"},".language-markdown .token.url > .token.content":{color:"hsl(221, 87%, 60%)"},".language-markdown .token.url > .token.url":{color:"hsl(198, 99%, 37%)"},".language-markdown .token.url-reference.url":{color:"hsl(198, 99%, 37%)"},".language-markdown .token.blockquote.punctuation":{color:"hsl(230, 4%, 64%)",fontStyle:"italic"},".language-markdown .token.hr.punctuation":{color:"hsl(230, 4%, 64%)",fontStyle:"italic"},".language-markdown .token.code-snippet":{color:"hsl(119, 34%, 47%)"},".language-markdown .token.bold .token.content":{color:"hsl(35, 99%, 36%)"},".language-markdown .token.italic .token.content":{color:"hsl(301, 63%, 40%)"},".language-markdown .token.strike .token.content":{color:"hsl(5, 74%, 59%)"},".language-markdown .token.strike .token.punctuation":{color:"hsl(5, 74%, 59%)"},".language-markdown .token.list.punctuation":{color:"hsl(5, 74%, 59%)"},".language-markdown .token.title.important > .token.punctuation":{color:"hsl(5, 74%, 59%)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},namespace:{Opacity:"0.8"},"token.tab:not(:empty):before":{color:"hsla(230, 8%, 24%, 0.2)"},"token.cr:before":{color:"hsla(230, 8%, 24%, 0.2)"},"token.lf:before":{color:"hsla(230, 8%, 24%, 0.2)"},"token.space:before":{color:"hsla(230, 8%, 24%, 0.2)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item":{marginRight:"0.4em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 6%, 44%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 6%, 44%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 6%, 44%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},".line-highlight.line-highlight":{background:"hsla(230, 8%, 24%, 0.05)"},".line-highlight.line-highlight:before":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 8%, 24%)",padding:"0.1em 0.6em",borderRadius:"0.3em",boxShadow:"0 2px 0 0 rgba(0, 0, 0, 0.2)"},".line-highlight.line-highlight[data-end]:after":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 8%, 24%)",padding:"0.1em 0.6em",borderRadius:"0.3em",boxShadow:"0 2px 0 0 rgba(0, 0, 0, 0.2)"},"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":{backgroundColor:"hsla(230, 8%, 24%, 0.05)"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"hsla(230, 8%, 24%, 0.2)"},".command-line .command-line-prompt":{borderRightColor:"hsla(230, 8%, 24%, 0.2)"},".line-numbers .line-numbers-rows > span:before":{color:"hsl(230, 1%, 62%)"},".command-line .command-line-prompt > span:before":{color:"hsl(230, 1%, 62%)"},".rainbow-braces .token.token.punctuation.brace-level-1":{color:"hsl(5, 74%, 59%)"},".rainbow-braces .token.token.punctuation.brace-level-5":{color:"hsl(5, 74%, 59%)"},".rainbow-braces .token.token.punctuation.brace-level-9":{color:"hsl(5, 74%, 59%)"},".rainbow-braces .token.token.punctuation.brace-level-2":{color:"hsl(119, 34%, 47%)"},".rainbow-braces .token.token.punctuation.brace-level-6":{color:"hsl(119, 34%, 47%)"},".rainbow-braces .token.token.punctuation.brace-level-10":{color:"hsl(119, 34%, 47%)"},".rainbow-braces .token.token.punctuation.brace-level-3":{color:"hsl(221, 87%, 60%)"},".rainbow-braces .token.token.punctuation.brace-level-7":{color:"hsl(221, 87%, 60%)"},".rainbow-braces .token.token.punctuation.brace-level-11":{color:"hsl(221, 87%, 60%)"},".rainbow-braces .token.token.punctuation.brace-level-4":{color:"hsl(301, 63%, 40%)"},".rainbow-braces .token.token.punctuation.brace-level-8":{color:"hsl(301, 63%, 40%)"},".rainbow-braces .token.token.punctuation.brace-level-12":{color:"hsl(301, 63%, 40%)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)":{backgroundColor:"hsla(353, 100%, 66%, 0.15)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)":{backgroundColor:"hsla(353, 100%, 66%, 0.15)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)":{backgroundColor:"hsla(137, 100%, 55%, 0.15)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)":{backgroundColor:"hsla(137, 100%, 55%, 0.15)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},".prism-previewer.prism-previewer:before":{borderColor:"hsl(0, 0, 95%)"},".prism-previewer-gradient.prism-previewer-gradient div":{borderColor:"hsl(0, 0, 95%)",borderRadius:"0.3em"},".prism-previewer-color.prism-previewer-color:before":{borderRadius:"0.3em"},".prism-previewer-easing.prism-previewer-easing:before":{borderRadius:"0.3em"},".prism-previewer.prism-previewer:after":{borderTopColor:"hsl(0, 0, 95%)"},".prism-previewer-flipped.prism-previewer-flipped.after":{borderBottomColor:"hsl(0, 0, 95%)"},".prism-previewer-angle.prism-previewer-angle:before":{background:"hsl(0, 0%, 100%)"},".prism-previewer-time.prism-previewer-time:before":{background:"hsl(0, 0%, 100%)"},".prism-previewer-easing.prism-previewer-easing":{background:"hsl(0, 0%, 100%)"},".prism-previewer-angle.prism-previewer-angle circle":{stroke:"hsl(230, 8%, 24%)",strokeOpacity:"1"},".prism-previewer-time.prism-previewer-time circle":{stroke:"hsl(230, 8%, 24%)",strokeOpacity:"1"},".prism-previewer-easing.prism-previewer-easing circle":{stroke:"hsl(230, 8%, 24%)",fill:"transparent"},".prism-previewer-easing.prism-previewer-easing path":{stroke:"hsl(230, 8%, 24%)"},".prism-previewer-easing.prism-previewer-easing line":{stroke:"hsl(230, 8%, 24%)"}}},966:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordBreak:"break-all",wordWrap:"break-word",fontFamily:'Menlo, Monaco, "Courier New", monospace',fontSize:"15px",lineHeight:"1.5",color:"#dccf8f",textShadow:"0"},'pre[class*="language-"]':{MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordBreak:"break-all",wordWrap:"break-word",fontFamily:'Menlo, Monaco, "Courier New", monospace',fontSize:"15px",lineHeight:"1.5",color:"#DCCF8F",textShadow:"0",borderRadius:"5px",border:"1px solid #000",background:"#181914 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQACQYGBgcGCQcHCQ0IBwgNDwsJCQsPEQ4ODw4OERENDg4ODg0RERQUFhQUERoaHBwaGiYmJiYmKysrKysrKysrKwEJCAgJCgkMCgoMDwwODA8TDg4ODhMVDg4PDg4VGhMRERERExoXGhYWFhoXHR0aGh0dJCQjJCQrKysrKysrKysr/8AAEQgAjACMAwEiAAIRAQMRAf/EAF4AAQEBAAAAAAAAAAAAAAAAAAABBwEBAQAAAAAAAAAAAAAAAAAAAAIQAAEDAwIHAQEAAAAAAAAAAADwAREhYaExkUFRcYGxwdHh8REBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AyGFEjHaBS2fDDs2zkhKmBKktb7km+ZwwCnXPkLVmCTMItj6AXFxRS465/BTnkAJvkLkJe+7AKKoi2AtRS2zuAWsCb5GOlBN8gKfmuGHZ8MFqIth3ALmFoFwbwKWyAlTAp17uKqBvgBD8sM4fTjhvAhkzhaRkBMKBrfs7jGPIpzy7gFrAqnC0C0gB0EWwBDW2cBVQwm+QtPpa3wBO3sVvszCnLAhkzgL5/RLf13cLQd8/AGlu0Cb5HTx9KuAEieGJEdcehS3eRTp2ATdt3CpIm+QtZwAhROXFeb7swp/ahaM3kBE/jSIUBc/AWrgBN8uNFAl+b7sAXFxFn2YLUU5Ns7gFX8C4ib+hN8gFWXwK3bZglxEJm+gKdciLPsFV/TClsgJUwKJ5FVA7tvIFrfZhVfGJDcsCKaYgAqv6YRbE+RWOWBtu7+AL3yRalXLyKqAIIfk+zARbDgFyEsncYwJvlgFRW+GEWntIi2P0BooyFxcNr8Ep3+ANLbMO+QyhvbiqdgC0kVvgUUiLYgBS2QtPbiVI1/sgOmG9uO+Y8DW+7jS2zAOnj6O2BndwuIAUtkdRN8gFoK3wwXMQyZwHVbClsuNLd4E3yAUR6FVDBR+BafQGt93LVMxJTv8ABts4CVLhcfYWsCb5kC9/BHdU8CLYFY5bMAd+eX9MGthhpbA1vu4B7+RKkaW2Yq4AQtVBBFsAJU/AuIXBhN8gGWnstefhiZyWvLAEnbYS1uzSFP6Jvn4Baxx70JKkQojLib5AVTey1jjgkKJGO0AKWyOm7N7cSpgSpAdPH0Tfd/gp1z5C1ZgKqN9J2wFxcUUuAFLZAm+QC0Fb4YUVRFsAOvj4KW2dwtYE3yAWk/wS/PLMKfmuGHZ8MAXF/Ja32Yi5haAKWz4Ydm2cSpgU693Atb7km+Zwwh+WGcPpxw3gAkzCLY+iYUDW/Z3Adc/gpzyFrAqnALkJe+7DoItgAtRS2zuKqGE3yAx0oJvkdvYrfZmALURbDuL5/RLf13cAuDeBS2RpbtAm+QFVA3wR+3fUtFHoBDJnC0jIXH0HWsgMY8inPLuOkd9chp4z20ALQLSA8cI9jYAIa2zjzjBd8gRafS1vgiUho/kAKcsCGTOGWvoOpkAtB3z8Hm8x2Ff5ADp4+lXAlIvcmwH/2Q==') repeat left top",padding:"12px",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},':not(pre) > code[class*="language-"]':{borderRadius:"5px",border:"1px solid #000",color:"#DCCF8F",background:"#181914 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQACQYGBgcGCQcHCQ0IBwgNDwsJCQsPEQ4ODw4OERENDg4ODg0RERQUFhQUERoaHBwaGiYmJiYmKysrKysrKysrKwEJCAgJCgkMCgoMDwwODA8TDg4ODhMVDg4PDg4VGhMRERERExoXGhYWFhoXHR0aGh0dJCQjJCQrKysrKysrKysr/8AAEQgAjACMAwEiAAIRAQMRAf/EAF4AAQEBAAAAAAAAAAAAAAAAAAABBwEBAQAAAAAAAAAAAAAAAAAAAAIQAAEDAwIHAQEAAAAAAAAAAADwAREhYaExkUFRcYGxwdHh8REBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AyGFEjHaBS2fDDs2zkhKmBKktb7km+ZwwCnXPkLVmCTMItj6AXFxRS465/BTnkAJvkLkJe+7AKKoi2AtRS2zuAWsCb5GOlBN8gKfmuGHZ8MFqIth3ALmFoFwbwKWyAlTAp17uKqBvgBD8sM4fTjhvAhkzhaRkBMKBrfs7jGPIpzy7gFrAqnC0C0gB0EWwBDW2cBVQwm+QtPpa3wBO3sVvszCnLAhkzgL5/RLf13cLQd8/AGlu0Cb5HTx9KuAEieGJEdcehS3eRTp2ATdt3CpIm+QtZwAhROXFeb7swp/ahaM3kBE/jSIUBc/AWrgBN8uNFAl+b7sAXFxFn2YLUU5Ns7gFX8C4ib+hN8gFWXwK3bZglxEJm+gKdciLPsFV/TClsgJUwKJ5FVA7tvIFrfZhVfGJDcsCKaYgAqv6YRbE+RWOWBtu7+AL3yRalXLyKqAIIfk+zARbDgFyEsncYwJvlgFRW+GEWntIi2P0BooyFxcNr8Ep3+ANLbMO+QyhvbiqdgC0kVvgUUiLYgBS2QtPbiVI1/sgOmG9uO+Y8DW+7jS2zAOnj6O2BndwuIAUtkdRN8gFoK3wwXMQyZwHVbClsuNLd4E3yAUR6FVDBR+BafQGt93LVMxJTv8ABts4CVLhcfYWsCb5kC9/BHdU8CLYFY5bMAd+eX9MGthhpbA1vu4B7+RKkaW2Yq4AQtVBBFsAJU/AuIXBhN8gGWnstefhiZyWvLAEnbYS1uzSFP6Jvn4Baxx70JKkQojLib5AVTey1jjgkKJGO0AKWyOm7N7cSpgSpAdPH0Tfd/gp1z5C1ZgKqN9J2wFxcUUuAFLZAm+QC0Fb4YUVRFsAOvj4KW2dwtYE3yAWk/wS/PLMKfmuGHZ8MAXF/Ja32Yi5haAKWz4Ydm2cSpgU693Atb7km+Zwwh+WGcPpxw3gAkzCLY+iYUDW/Z3Adc/gpzyFrAqnALkJe+7DoItgAtRS2zuKqGE3yAx0oJvkdvYrfZmALURbDuL5/RLf13cAuDeBS2RpbtAm+QFVA3wR+3fUtFHoBDJnC0jIXH0HWsgMY8inPLuOkd9chp4z20ALQLSA8cI9jYAIa2zjzjBd8gRafS1vgiUho/kAKcsCGTOGWvoOpkAtB3z8Hm8x2Ff5ADp4+lXAlIvcmwH/2Q==') repeat left top",padding:"2px 6px"},namespace:{Opacity:".7"},comment:{color:"#586e75",fontStyle:"italic"},prolog:{color:"#586e75",fontStyle:"italic"},doctype:{color:"#586e75",fontStyle:"italic"},cdata:{color:"#586e75",fontStyle:"italic"},number:{color:"#b89859"},string:{color:"#468966"},char:{color:"#468966"},builtin:{color:"#468966"},inserted:{color:"#468966"},"attr-name":{color:"#b89859"},operator:{color:"#dccf8f"},entity:{color:"#dccf8f",cursor:"help"},url:{color:"#dccf8f"},".language-css .token.string":{color:"#dccf8f"},".style .token.string":{color:"#dccf8f"},selector:{color:"#859900"},regex:{color:"#859900"},atrule:{color:"#cb4b16"},keyword:{color:"#cb4b16"},"attr-value":{color:"#468966"},function:{color:"#b58900"},variable:{color:"#b58900"},placeholder:{color:"#b58900"},property:{color:"#b89859"},tag:{color:"#ffb03b"},boolean:{color:"#b89859"},constant:{color:"#b89859"},symbol:{color:"#b89859"},important:{color:"#dc322f"},statement:{color:"#dc322f"},deleted:{color:"#dc322f"},punctuation:{color:"#dccf8f"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},5570:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"black",background:"none",textShadow:"0 1px white",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"black",background:"#f5f2f0",textShadow:"0 1px white",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#b3d4fc"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#b3d4fc"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#b3d4fc"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#b3d4fc"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#b3d4fc"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#b3d4fc"},'code[class*="language-"]::selection':{textShadow:"none",background:"#b3d4fc"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#b3d4fc"},':not(pre) > code[class*="language-"]':{background:"#f5f2f0",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"slategray"},prolog:{color:"slategray"},doctype:{color:"slategray"},cdata:{color:"slategray"},punctuation:{color:"#999"},namespace:{Opacity:".7"},property:{color:"#905"},tag:{color:"#905"},boolean:{color:"#905"},number:{color:"#905"},constant:{color:"#905"},symbol:{color:"#905"},deleted:{color:"#905"},selector:{color:"#690"},"attr-name":{color:"#690"},string:{color:"#690"},char:{color:"#690"},builtin:{color:"#690"},inserted:{color:"#690"},operator:{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)"},entity:{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)",cursor:"help"},url:{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)"},".language-css .token.string":{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)"},".style .token.string":{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)"},atrule:{color:"#07a"},"attr-value":{color:"#07a"},keyword:{color:"#07a"},function:{color:"#DD4A68"},"class-name":{color:"#DD4A68"},regex:{color:"#e90"},important:{color:"#e90",fontWeight:"bold"},variable:{color:"#e90"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},3362:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={"code[class*='language-']":{color:"#9efeff",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",fontFamily:"'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontWeight:"400",fontSize:"17px",lineHeight:"25px",letterSpacing:"0.5px",textShadow:"0 1px #222245"},"pre[class*='language-']":{color:"#9efeff",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",fontFamily:"'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontWeight:"400",fontSize:"17px",lineHeight:"25px",letterSpacing:"0.5px",textShadow:"0 1px #222245",padding:"2em",margin:"0.5em 0",overflow:"auto",background:"#1e1e3f"},"pre[class*='language-']::-moz-selection":{color:"inherit",background:"#a599e9"},"pre[class*='language-'] ::-moz-selection":{color:"inherit",background:"#a599e9"},"code[class*='language-']::-moz-selection":{color:"inherit",background:"#a599e9"},"code[class*='language-'] ::-moz-selection":{color:"inherit",background:"#a599e9"},"pre[class*='language-']::selection":{color:"inherit",background:"#a599e9"},"pre[class*='language-'] ::selection":{color:"inherit",background:"#a599e9"},"code[class*='language-']::selection":{color:"inherit",background:"#a599e9"},"code[class*='language-'] ::selection":{color:"inherit",background:"#a599e9"},":not(pre) > code[class*='language-']":{background:"#1e1e3f",padding:"0.1em",borderRadius:"0.3em"},"":{fontWeight:"400"},comment:{color:"#b362ff"},prolog:{color:"#b362ff"},cdata:{color:"#b362ff"},delimiter:{color:"#ff9d00"},keyword:{color:"#ff9d00"},selector:{color:"#ff9d00"},important:{color:"#ff9d00"},atrule:{color:"#ff9d00"},operator:{color:"rgb(255, 180, 84)",background:"none"},"attr-name":{color:"rgb(255, 180, 84)"},punctuation:{color:"#ffffff"},boolean:{color:"rgb(255, 98, 140)"},tag:{color:"rgb(255, 157, 0)"},"tag.punctuation":{color:"rgb(255, 157, 0)"},doctype:{color:"rgb(255, 157, 0)"},builtin:{color:"rgb(255, 157, 0)"},entity:{color:"#6897bb",background:"none"},symbol:{color:"#6897bb"},number:{color:"#ff628c"},property:{color:"#ff628c"},constant:{color:"#ff628c"},variable:{color:"#ff628c"},string:{color:"#a5ff90"},char:{color:"#a5ff90"},"attr-value":{color:"#a5c261"},"attr-value.punctuation":{color:"#a5c261"},"attr-value.punctuation:first-child":{color:"#a9b7c6"},url:{color:"#287bde",textDecoration:"underline",background:"none"},function:{color:"rgb(250, 208, 0)"},regex:{background:"#364135"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{background:"#00ff00"},deleted:{background:"#ff000d"},"code.language-css .token.property":{color:"#a9b7c6"},"code.language-css .token.property + .token.punctuation":{color:"#a9b7c6"},"code.language-css .token.id":{color:"#ffc66d"},"code.language-css .token.selector > .token.class":{color:"#ffc66d"},"code.language-css .token.selector > .token.attribute":{color:"#ffc66d"},"code.language-css .token.selector > .token.pseudo-class":{color:"#ffc66d"},"code.language-css .token.selector > .token.pseudo-element":{color:"#ffc66d"},"class-name":{color:"#fb94ff"},".language-css .token.string":{background:"none"},".style .token.string":{background:"none"},".line-highlight.line-highlight":{marginTop:"36px",background:"linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent)"},".line-highlight.line-highlight:before":{content:"''"},".line-highlight.line-highlight[data-end]:after":{content:"''"}}},8154:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#839496",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#839496",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em",background:"#002b36"},':not(pre) > code[class*="language-"]':{background:"#002b36",padding:".1em",borderRadius:".3em"},comment:{color:"#586e75"},prolog:{color:"#586e75"},doctype:{color:"#586e75"},cdata:{color:"#586e75"},punctuation:{color:"#93a1a1"},".namespace":{Opacity:".7"},property:{color:"#268bd2"},keyword:{color:"#268bd2"},tag:{color:"#268bd2"},"class-name":{color:"#FFFFB6",textDecoration:"underline"},boolean:{color:"#b58900"},constant:{color:"#b58900"},symbol:{color:"#dc322f"},deleted:{color:"#dc322f"},number:{color:"#859900"},selector:{color:"#859900"},"attr-name":{color:"#859900"},string:{color:"#859900"},char:{color:"#859900"},builtin:{color:"#859900"},inserted:{color:"#859900"},variable:{color:"#268bd2"},operator:{color:"#EDEDED"},function:{color:"#268bd2"},regex:{color:"#E9C062"},important:{color:"#fd971f",fontWeight:"bold"},entity:{color:"#FFFFB6",cursor:"help"},url:{color:"#96CBFE"},".language-css .token.string":{color:"#87C38A"},".style .token.string":{color:"#87C38A"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},atrule:{color:"#F9EE98"},"attr-value":{color:"#F9EE98"}}},9698:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#657b83",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#657b83",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em",backgroundColor:"#fdf6e3"},'pre[class*="language-"]::-moz-selection':{background:"#073642"},'pre[class*="language-"] ::-moz-selection':{background:"#073642"},'code[class*="language-"]::-moz-selection':{background:"#073642"},'code[class*="language-"] ::-moz-selection':{background:"#073642"},'pre[class*="language-"]::selection':{background:"#073642"},'pre[class*="language-"] ::selection':{background:"#073642"},'code[class*="language-"]::selection':{background:"#073642"},'code[class*="language-"] ::selection':{background:"#073642"},':not(pre) > code[class*="language-"]':{backgroundColor:"#fdf6e3",padding:".1em",borderRadius:".3em"},comment:{color:"#93a1a1"},prolog:{color:"#93a1a1"},doctype:{color:"#93a1a1"},cdata:{color:"#93a1a1"},punctuation:{color:"#586e75"},namespace:{Opacity:".7"},property:{color:"#268bd2"},tag:{color:"#268bd2"},boolean:{color:"#268bd2"},number:{color:"#268bd2"},constant:{color:"#268bd2"},symbol:{color:"#268bd2"},deleted:{color:"#268bd2"},selector:{color:"#2aa198"},"attr-name":{color:"#2aa198"},string:{color:"#2aa198"},char:{color:"#2aa198"},builtin:{color:"#2aa198"},url:{color:"#2aa198"},inserted:{color:"#2aa198"},entity:{color:"#657b83",background:"#eee8d5",cursor:"help"},atrule:{color:"#859900"},"attr-value":{color:"#859900"},keyword:{color:"#859900"},function:{color:"#b58900"},"class-name":{color:"#b58900"},regex:{color:"#cb4b16"},important:{color:"#cb4b16",fontWeight:"bold"},variable:{color:"#cb4b16"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},2884:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",backgroundColor:"transparent !important",backgroundImage:"linear-gradient(to bottom, #2a2139 75%, #34294f)"},':not(pre) > code[class*="language-"]':{backgroundColor:"transparent !important",backgroundImage:"linear-gradient(to bottom, #2a2139 75%, #34294f)",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#8e8e8e"},"block-comment":{color:"#8e8e8e"},prolog:{color:"#8e8e8e"},doctype:{color:"#8e8e8e"},cdata:{color:"#8e8e8e"},punctuation:{color:"#ccc"},tag:{color:"#e2777a"},"attr-name":{color:"#e2777a"},namespace:{color:"#e2777a"},number:{color:"#e2777a"},unit:{color:"#e2777a"},hexcode:{color:"#e2777a"},deleted:{color:"#e2777a"},property:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"},selector:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"},"function-name":{color:"#6196cc"},boolean:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"},"selector.id":{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"},function:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"},"class-name":{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"},constant:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},symbol:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},important:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575",fontWeight:"bold"},atrule:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"},keyword:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"},"selector.class":{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"},builtin:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"},string:{color:"#f87c32"},char:{color:"#f87c32"},"attr-value":{color:"#f87c32"},regex:{color:"#f87c32"},variable:{color:"#f87c32"},operator:{color:"#67cdcc"},entity:{color:"#67cdcc",cursor:"help"},url:{color:"#67cdcc"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{color:"green"}}},9623:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#ccc",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#ccc",background:"#2d2d2d",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto"},':not(pre) > code[class*="language-"]':{background:"#2d2d2d",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#999"},"block-comment":{color:"#999"},prolog:{color:"#999"},doctype:{color:"#999"},cdata:{color:"#999"},punctuation:{color:"#ccc"},tag:{color:"#e2777a"},"attr-name":{color:"#e2777a"},namespace:{color:"#e2777a"},deleted:{color:"#e2777a"},"function-name":{color:"#6196cc"},boolean:{color:"#f08d49"},number:{color:"#f08d49"},function:{color:"#f08d49"},property:{color:"#f8c555"},"class-name":{color:"#f8c555"},constant:{color:"#f8c555"},symbol:{color:"#f8c555"},selector:{color:"#cc99cd"},important:{color:"#cc99cd",fontWeight:"bold"},atrule:{color:"#cc99cd"},keyword:{color:"#cc99cd"},builtin:{color:"#cc99cd"},string:{color:"#7ec699"},char:{color:"#7ec699"},"attr-value":{color:"#7ec699"},regex:{color:"#7ec699"},variable:{color:"#7ec699"},operator:{color:"#67cdcc"},entity:{color:"#67cdcc",cursor:"help"},url:{color:"#67cdcc"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{color:"green"}}},9343:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"white",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",textShadow:"0 -.1em .2em black",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"white",background:"hsl(0, 0%, 8%)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",textShadow:"0 -.1em .2em black",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",borderRadius:".5em",border:".3em solid hsl(0, 0%, 33%)",boxShadow:"1px 1px .5em black inset",margin:".5em 0",overflow:"auto",padding:"1em"},':not(pre) > code[class*="language-"]':{background:"hsl(0, 0%, 8%)",borderRadius:".3em",border:".13em solid hsl(0, 0%, 33%)",boxShadow:"1px 1px .3em -.1em black inset",padding:".15em .2em .05em",whiteSpace:"normal"},'pre[class*="language-"]::-moz-selection':{background:"hsla(0, 0%, 93%, 0.15)",textShadow:"none"},'pre[class*="language-"]::selection':{background:"hsla(0, 0%, 93%, 0.15)",textShadow:"none"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'code[class*="language-"]::selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'code[class*="language-"] ::selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},comment:{color:"hsl(0, 0%, 47%)"},prolog:{color:"hsl(0, 0%, 47%)"},doctype:{color:"hsl(0, 0%, 47%)"},cdata:{color:"hsl(0, 0%, 47%)"},punctuation:{Opacity:".7"},namespace:{Opacity:".7"},tag:{color:"hsl(14, 58%, 55%)"},boolean:{color:"hsl(14, 58%, 55%)"},number:{color:"hsl(14, 58%, 55%)"},deleted:{color:"hsl(14, 58%, 55%)"},keyword:{color:"hsl(53, 89%, 79%)"},property:{color:"hsl(53, 89%, 79%)"},selector:{color:"hsl(53, 89%, 79%)"},constant:{color:"hsl(53, 89%, 79%)"},symbol:{color:"hsl(53, 89%, 79%)"},builtin:{color:"hsl(53, 89%, 79%)"},"attr-name":{color:"hsl(76, 21%, 52%)"},"attr-value":{color:"hsl(76, 21%, 52%)"},string:{color:"hsl(76, 21%, 52%)"},char:{color:"hsl(76, 21%, 52%)"},operator:{color:"hsl(76, 21%, 52%)"},entity:{color:"hsl(76, 21%, 52%)",cursor:"help"},url:{color:"hsl(76, 21%, 52%)"},".language-css .token.string":{color:"hsl(76, 21%, 52%)"},".style .token.string":{color:"hsl(76, 21%, 52%)"},variable:{color:"hsl(76, 21%, 52%)"},inserted:{color:"hsl(76, 21%, 52%)"},atrule:{color:"hsl(218, 22%, 55%)"},regex:{color:"hsl(42, 75%, 65%)"},important:{color:"hsl(42, 75%, 65%)",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},".language-markup .token.tag":{color:"hsl(33, 33%, 52%)"},".language-markup .token.attr-name":{color:"hsl(33, 33%, 52%)"},".language-markup .token.punctuation":{color:"hsl(33, 33%, 52%)"},"":{position:"relative",zIndex:"1"},".line-highlight.line-highlight":{background:"linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0))",borderBottom:"1px dashed hsl(0, 0%, 33%)",borderTop:"1px dashed hsl(0, 0%, 33%)",marginTop:"0.75em",zIndex:"0"},".line-highlight.line-highlight:before":{backgroundColor:"hsl(215, 15%, 59%)",color:"hsl(24, 20%, 95%)"},".line-highlight.line-highlight[data-end]:after":{backgroundColor:"hsl(215, 15%, 59%)",color:"hsl(24, 20%, 95%)"}}},6732:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#393A34",fontFamily:'"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",fontSize:".9em",lineHeight:"1.2em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#393A34",fontFamily:'"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",fontSize:".9em",lineHeight:"1.2em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",border:"1px solid #dddddd",backgroundColor:"white"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{background:"#C1DEF1"},'pre[class*="language-"] ::-moz-selection':{background:"#C1DEF1"},'code[class*="language-"]::-moz-selection':{background:"#C1DEF1"},'code[class*="language-"] ::-moz-selection':{background:"#C1DEF1"},'pre[class*="language-"]::selection':{background:"#C1DEF1"},'pre[class*="language-"] ::selection':{background:"#C1DEF1"},'code[class*="language-"]::selection':{background:"#C1DEF1"},'code[class*="language-"] ::selection':{background:"#C1DEF1"},':not(pre) > code[class*="language-"]':{padding:".2em",paddingTop:"1px",paddingBottom:"1px",background:"#f8f8f8",border:"1px solid #dddddd"},comment:{color:"#008000",fontStyle:"italic"},prolog:{color:"#008000",fontStyle:"italic"},doctype:{color:"#008000",fontStyle:"italic"},cdata:{color:"#008000",fontStyle:"italic"},namespace:{Opacity:".7"},string:{color:"#A31515"},punctuation:{color:"#393A34"},operator:{color:"#393A34"},url:{color:"#36acaa"},symbol:{color:"#36acaa"},number:{color:"#36acaa"},boolean:{color:"#36acaa"},variable:{color:"#36acaa"},constant:{color:"#36acaa"},inserted:{color:"#36acaa"},atrule:{color:"#0000ff"},keyword:{color:"#0000ff"},"attr-value":{color:"#0000ff"},".language-autohotkey .token.selector":{color:"#0000ff"},".language-json .token.boolean":{color:"#0000ff"},".language-json .token.number":{color:"#0000ff"},'code[class*="language-css"]':{color:"#0000ff"},function:{color:"#393A34"},deleted:{color:"#9a050f"},".language-autohotkey .token.tag":{color:"#9a050f"},selector:{color:"#800000"},".language-autohotkey .token.keyword":{color:"#00009f"},important:{color:"#e90",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},"class-name":{color:"#2B91AF"},".language-json .token.property":{color:"#2B91AF"},tag:{color:"#800000"},"attr-name":{color:"#ff0000"},property:{color:"#ff0000"},regex:{color:"#ff0000"},entity:{color:"#ff0000"},"directive.tag.tag":{background:"#ffff00",color:"#393A34"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#a5a5a5"},".line-numbers .line-numbers-rows > span:before":{color:"#2B91AF"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0))"}}},5901:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'pre[class*="language-"]':{color:"#d4d4d4",fontSize:"13px",textShadow:"none",fontFamily:'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",background:"#1e1e1e"},'code[class*="language-"]':{color:"#d4d4d4",fontSize:"13px",textShadow:"none",fontFamily:'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#264F78"},'code[class*="language-"]::selection':{textShadow:"none",background:"#264F78"},'pre[class*="language-"] *::selection':{textShadow:"none",background:"#264F78"},'code[class*="language-"] *::selection':{textShadow:"none",background:"#264F78"},':not(pre) > code[class*="language-"]':{padding:".1em .3em",borderRadius:".3em",color:"#db4c69",background:"#1e1e1e"},".namespace":{Opacity:".7"},"doctype.doctype-tag":{color:"#569CD6"},"doctype.name":{color:"#9cdcfe"},comment:{color:"#6a9955"},prolog:{color:"#6a9955"},punctuation:{color:"#d4d4d4"},".language-html .language-css .token.punctuation":{color:"#d4d4d4"},".language-html .language-javascript .token.punctuation":{color:"#d4d4d4"},property:{color:"#9cdcfe"},tag:{color:"#569cd6"},boolean:{color:"#569cd6"},number:{color:"#b5cea8"},constant:{color:"#9cdcfe"},symbol:{color:"#b5cea8"},inserted:{color:"#b5cea8"},unit:{color:"#b5cea8"},selector:{color:"#d7ba7d"},"attr-name":{color:"#9cdcfe"},string:{color:"#ce9178"},char:{color:"#ce9178"},builtin:{color:"#ce9178"},deleted:{color:"#ce9178"},".language-css .token.string.url":{textDecoration:"underline"},operator:{color:"#d4d4d4"},entity:{color:"#569cd6"},"operator.arrow":{color:"#569CD6"},atrule:{color:"#ce9178"},"atrule.rule":{color:"#c586c0"},"atrule.url":{color:"#9cdcfe"},"atrule.url.function":{color:"#dcdcaa"},"atrule.url.punctuation":{color:"#d4d4d4"},keyword:{color:"#569CD6"},"keyword.module":{color:"#c586c0"},"keyword.control-flow":{color:"#c586c0"},function:{color:"#dcdcaa"},"function.maybe-class-name":{color:"#dcdcaa"},regex:{color:"#d16969"},important:{color:"#569cd6"},italic:{fontStyle:"italic"},"class-name":{color:"#4ec9b0"},"maybe-class-name":{color:"#4ec9b0"},console:{color:"#9cdcfe"},parameter:{color:"#9cdcfe"},interpolation:{color:"#9cdcfe"},"punctuation.interpolation-punctuation":{color:"#569cd6"},variable:{color:"#9cdcfe"},"imports.maybe-class-name":{color:"#9cdcfe"},"exports.maybe-class-name":{color:"#9cdcfe"},escape:{color:"#d7ba7d"},"tag.punctuation":{color:"#808080"},cdata:{color:"#808080"},"attr-value":{color:"#ce9178"},"attr-value.punctuation":{color:"#ce9178"},"attr-value.punctuation.attr-equals":{color:"#d4d4d4"},namespace:{color:"#4ec9b0"},'pre[class*="language-javascript"]':{color:"#9cdcfe"},'code[class*="language-javascript"]':{color:"#9cdcfe"},'pre[class*="language-jsx"]':{color:"#9cdcfe"},'code[class*="language-jsx"]':{color:"#9cdcfe"},'pre[class*="language-typescript"]':{color:"#9cdcfe"},'code[class*="language-typescript"]':{color:"#9cdcfe"},'pre[class*="language-tsx"]':{color:"#9cdcfe"},'code[class*="language-tsx"]':{color:"#9cdcfe"},'pre[class*="language-css"]':{color:"#ce9178"},'code[class*="language-css"]':{color:"#ce9178"},'pre[class*="language-html"]':{color:"#d4d4d4"},'code[class*="language-html"]':{color:"#d4d4d4"},".language-regex .token.anchor":{color:"#dcdcaa"},".language-html .token.punctuation":{color:"#808080"},'pre[class*="language-"] > code[class*="language-"]':{position:"relative",zIndex:"1"},".line-highlight.line-highlight":{background:"#f7ebc6",boxShadow:"inset 5px 0 0 #f7d87c",zIndex:"0"}}},5004:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordWrap:"normal",fontFamily:'Menlo, Monaco, "Courier New", monospace',fontSize:"14px",color:"#76d9e6",textShadow:"none"},'pre[class*="language-"]':{MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordWrap:"normal",fontFamily:'Menlo, Monaco, "Courier New", monospace',fontSize:"14px",color:"#76d9e6",textShadow:"none",background:"#2a2a2a",padding:"15px",borderRadius:"4px",border:"1px solid #e1e1e8",overflow:"auto",position:"relative"},'pre > code[class*="language-"]':{fontSize:"1em"},':not(pre) > code[class*="language-"]':{background:"#2a2a2a",padding:"0.15em 0.2em 0.05em",borderRadius:".3em",border:"0.13em solid #7a6652",boxShadow:"1px 1px 0.3em -0.1em #000 inset"},'pre[class*="language-"] code':{whiteSpace:"pre",display:"block"},namespace:{Opacity:".7"},comment:{color:"#6f705e"},prolog:{color:"#6f705e"},doctype:{color:"#6f705e"},cdata:{color:"#6f705e"},operator:{color:"#a77afe"},boolean:{color:"#a77afe"},number:{color:"#a77afe"},"attr-name":{color:"#e6d06c"},string:{color:"#e6d06c"},entity:{color:"#e6d06c",cursor:"help"},url:{color:"#e6d06c"},".language-css .token.string":{color:"#e6d06c"},".style .token.string":{color:"#e6d06c"},selector:{color:"#a6e22d"},inserted:{color:"#a6e22d"},atrule:{color:"#ef3b7d"},"attr-value":{color:"#ef3b7d"},keyword:{color:"#ef3b7d"},important:{color:"#ef3b7d",fontWeight:"bold"},deleted:{color:"#ef3b7d"},regex:{color:"#76d9e6"},statement:{color:"#76d9e6",fontWeight:"bold"},placeholder:{color:"#fff"},variable:{color:"#fff"},bold:{fontWeight:"bold"},punctuation:{color:"#bebec5"},italic:{fontStyle:"italic"},"code.language-markup":{color:"#f9f9f9"},"code.language-markup .token.tag":{color:"#ef3b7d"},"code.language-markup .token.attr-name":{color:"#a6e22d"},"code.language-markup .token.attr-value":{color:"#e6d06c"},"code.language-markup .token.style":{color:"#76d9e6"},"code.language-markup .token.script":{color:"#76d9e6"},"code.language-markup .token.script .token.keyword":{color:"#76d9e6"},".line-highlight.line-highlight":{padding:"0",background:"rgba(255, 255, 255, 0.08)"},".line-highlight.line-highlight:before":{padding:"0.2em 0.5em",backgroundColor:"rgba(255, 255, 255, 0.4)",color:"black",height:"1em",lineHeight:"1em",boxShadow:"0 1px 1px rgba(255, 255, 255, 0.7)"},".line-highlight.line-highlight[data-end]:after":{padding:"0.2em 0.5em",backgroundColor:"rgba(255, 255, 255, 0.4)",color:"black",height:"1em",lineHeight:"1em",boxShadow:"0 1px 1px rgba(255, 255, 255, 0.7)"}}},4104:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#22da17",fontFamily:"monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",lineHeight:"25px",fontSize:"18px",margin:"5px 0"},'pre[class*="language-"]':{color:"white",fontFamily:"monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",lineHeight:"25px",fontSize:"18px",margin:"0.5em 0",background:"#0a143c",padding:"1em",overflow:"auto"},'pre[class*="language-"] *':{fontFamily:"monospace"},':not(pre) > code[class*="language-"]':{color:"white",background:"#0a143c",padding:"0.1em",borderRadius:"0.3em",whiteSpace:"normal"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"]::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"]::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"] ::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},comment:{color:"rgb(99, 119, 119)",fontStyle:"italic"},prolog:{color:"rgb(99, 119, 119)",fontStyle:"italic"},cdata:{color:"rgb(99, 119, 119)",fontStyle:"italic"},punctuation:{color:"rgb(199, 146, 234)"},".namespace":{color:"rgb(178, 204, 214)"},deleted:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"},symbol:{color:"rgb(128, 203, 196)"},property:{color:"rgb(128, 203, 196)"},tag:{color:"rgb(127, 219, 202)"},operator:{color:"rgb(127, 219, 202)"},keyword:{color:"rgb(127, 219, 202)"},boolean:{color:"rgb(255, 88, 116)"},number:{color:"rgb(247, 140, 108)"},constant:{color:"rgb(34 183 199)"},function:{color:"rgb(34 183 199)"},builtin:{color:"rgb(34 183 199)"},char:{color:"rgb(34 183 199)"},selector:{color:"rgb(199, 146, 234)",fontStyle:"italic"},doctype:{color:"rgb(199, 146, 234)",fontStyle:"italic"},"attr-name":{color:"rgb(173, 219, 103)",fontStyle:"italic"},inserted:{color:"rgb(173, 219, 103)",fontStyle:"italic"},string:{color:"rgb(173, 219, 103)"},url:{color:"rgb(173, 219, 103)"},entity:{color:"rgb(173, 219, 103)"},".language-css .token.string":{color:"rgb(173, 219, 103)"},".style .token.string":{color:"rgb(173, 219, 103)"},"class-name":{color:"rgb(255, 203, 139)"},atrule:{color:"rgb(255, 203, 139)"},"attr-value":{color:"rgb(255, 203, 139)"},regex:{color:"rgb(214, 222, 235)"},important:{color:"rgb(214, 222, 235)",fontWeight:"bold"},variable:{color:"rgb(214, 222, 235)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},8152:function(e,t,n){"use strict";function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=Array(t);n1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2?arguments[2]:void 0;return(function(e){if(0===e.length||1===e.length)return e;var t,n=e.join(".");return p[n]||(p[n]=0===(t=e.length)||1===t?e:2===t?[e[0],e[1],"".concat(e[0],".").concat(e[1]),"".concat(e[1],".").concat(e[0])]:3===t?[e[0],e[1],e[2],"".concat(e[0],".").concat(e[1]),"".concat(e[0],".").concat(e[2]),"".concat(e[1],".").concat(e[0]),"".concat(e[1],".").concat(e[2]),"".concat(e[2],".").concat(e[0]),"".concat(e[2],".").concat(e[1]),"".concat(e[0],".").concat(e[1],".").concat(e[2]),"".concat(e[0],".").concat(e[2],".").concat(e[1]),"".concat(e[1],".").concat(e[0],".").concat(e[2]),"".concat(e[1],".").concat(e[2],".").concat(e[0]),"".concat(e[2],".").concat(e[0],".").concat(e[1]),"".concat(e[2],".").concat(e[1],".").concat(e[0])]:t>=4?[e[0],e[1],e[2],e[3],"".concat(e[0],".").concat(e[1]),"".concat(e[0],".").concat(e[2]),"".concat(e[0],".").concat(e[3]),"".concat(e[1],".").concat(e[0]),"".concat(e[1],".").concat(e[2]),"".concat(e[1],".").concat(e[3]),"".concat(e[2],".").concat(e[0]),"".concat(e[2],".").concat(e[1]),"".concat(e[2],".").concat(e[3]),"".concat(e[3],".").concat(e[0]),"".concat(e[3],".").concat(e[1]),"".concat(e[3],".").concat(e[2]),"".concat(e[0],".").concat(e[1],".").concat(e[2]),"".concat(e[0],".").concat(e[1],".").concat(e[3]),"".concat(e[0],".").concat(e[2],".").concat(e[1]),"".concat(e[0],".").concat(e[2],".").concat(e[3]),"".concat(e[0],".").concat(e[3],".").concat(e[1]),"".concat(e[0],".").concat(e[3],".").concat(e[2]),"".concat(e[1],".").concat(e[0],".").concat(e[2]),"".concat(e[1],".").concat(e[0],".").concat(e[3]),"".concat(e[1],".").concat(e[2],".").concat(e[0]),"".concat(e[1],".").concat(e[2],".").concat(e[3]),"".concat(e[1],".").concat(e[3],".").concat(e[0]),"".concat(e[1],".").concat(e[3],".").concat(e[2]),"".concat(e[2],".").concat(e[0],".").concat(e[1]),"".concat(e[2],".").concat(e[0],".").concat(e[3]),"".concat(e[2],".").concat(e[1],".").concat(e[0]),"".concat(e[2],".").concat(e[1],".").concat(e[3]),"".concat(e[2],".").concat(e[3],".").concat(e[0]),"".concat(e[2],".").concat(e[3],".").concat(e[1]),"".concat(e[3],".").concat(e[0],".").concat(e[1]),"".concat(e[3],".").concat(e[0],".").concat(e[2]),"".concat(e[3],".").concat(e[1],".").concat(e[0]),"".concat(e[3],".").concat(e[1],".").concat(e[2]),"".concat(e[3],".").concat(e[2],".").concat(e[0]),"".concat(e[3],".").concat(e[2],".").concat(e[1]),"".concat(e[0],".").concat(e[1],".").concat(e[2],".").concat(e[3]),"".concat(e[0],".").concat(e[1],".").concat(e[3],".").concat(e[2]),"".concat(e[0],".").concat(e[2],".").concat(e[1],".").concat(e[3]),"".concat(e[0],".").concat(e[2],".").concat(e[3],".").concat(e[1]),"".concat(e[0],".").concat(e[3],".").concat(e[1],".").concat(e[2]),"".concat(e[0],".").concat(e[3],".").concat(e[2],".").concat(e[1]),"".concat(e[1],".").concat(e[0],".").concat(e[2],".").concat(e[3]),"".concat(e[1],".").concat(e[0],".").concat(e[3],".").concat(e[2]),"".concat(e[1],".").concat(e[2],".").concat(e[0],".").concat(e[3]),"".concat(e[1],".").concat(e[2],".").concat(e[3],".").concat(e[0]),"".concat(e[1],".").concat(e[3],".").concat(e[0],".").concat(e[2]),"".concat(e[1],".").concat(e[3],".").concat(e[2],".").concat(e[0]),"".concat(e[2],".").concat(e[0],".").concat(e[1],".").concat(e[3]),"".concat(e[2],".").concat(e[0],".").concat(e[3],".").concat(e[1]),"".concat(e[2],".").concat(e[1],".").concat(e[0],".").concat(e[3]),"".concat(e[2],".").concat(e[1],".").concat(e[3],".").concat(e[0]),"".concat(e[2],".").concat(e[3],".").concat(e[0],".").concat(e[1]),"".concat(e[2],".").concat(e[3],".").concat(e[1],".").concat(e[0]),"".concat(e[3],".").concat(e[0],".").concat(e[1],".").concat(e[2]),"".concat(e[3],".").concat(e[0],".").concat(e[2],".").concat(e[1]),"".concat(e[3],".").concat(e[1],".").concat(e[0],".").concat(e[2]),"".concat(e[3],".").concat(e[1],".").concat(e[2],".").concat(e[0]),"".concat(e[3],".").concat(e[2],".").concat(e[0],".").concat(e[1]),"".concat(e[3],".").concat(e[2],".").concat(e[1],".").concat(e[0])]:void 0),p[n]})(e.filter(function(e){return"token"!==e})).reduce(function(e,t){return d(d({},e),n[t])},t)}(l.className,Object.assign({},l.style,void 0===r?{}:r),o)})}else m=d(d({},l),{},{className:l.className.join(" ")});var k=b(n.children);return s.createElement(h,c({key:i},m),k)}}({node:e,stylesheet:n,useInlineStyles:o,key:"code-segement".concat(t)})})}function S(e){return e&&void 0!==e.highlightAuto}var y=n(1215),C=n.n(y),_=(i=C(),l={},function(e){var t=e.language,n=e.children,r=e.style,a=void 0===r?l:r,c=e.customStyle,u=void 0===c?{}:c,d=e.codeTagProps,p=void 0===d?{className:t?"language-".concat(t):void 0,style:g(g({},a['code[class*="language-"]']),a['code[class*="language-'.concat(t,'"]')])}:d,f=e.useInlineStyles,y=void 0===f||f,C=e.showLineNumbers,_=void 0!==C&&C,D=e.showInlineLineNumbers,N=void 0===D||D,I=e.startingLineNumber,O=void 0===I?1:I,x=e.lineNumberContainerStyle,w=e.lineNumberStyle,v=void 0===w?{}:w,F=e.wrapLines,R=e.wrapLongLines,M=void 0!==R&&R,L=e.lineProps,P=e.renderer,B=e.PreTag,H=void 0===B?"pre":B,z=e.CodeTag,U=void 0===z?"code":z,G=e.code,W=void 0===G?(Array.isArray(n)?n[0]:n)||"":G,j=e.astGenerator,Y=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(e,h);j=j||i;var Q=_?s.createElement(b,{containerStyle:x,codeStyle:p.style||{},numberStyle:v,startingLineNumber:O,codeString:W}):null,V=a.hljs||a['pre[class*="language-"]']||{backgroundColor:"#fff"},q=S(j)?"hljs":"prismjs",K=y?Object.assign({},Y,{style:Object.assign({},V,u)}):Object.assign({},Y,{className:Y.className?"".concat(q," ").concat(Y.className):q,style:Object.assign({},u)});if(M?p.style=g(g({},p.style),{},{whiteSpace:"pre-wrap"}):p.style=g(g({},p.style),{},{whiteSpace:"pre"}),!j)return s.createElement(H,K,Q,s.createElement(U,p,W));(void 0===F&&P||M)&&(F=!0),P=P||k;var X=[{type:"text",value:W}],J=function(e){var t=e.astGenerator,n=e.language,o=e.code,r=e.defaultCodeValue;if(S(t)){var a=-1!==t.listLanguages().indexOf(n);return"text"===n?{value:r,language:"text"}:a?t.highlight(n,o):t.highlightAuto(o)}try{return n&&"text"!==n?{value:t.highlight(o,n)}:{value:r}}catch(e){return{value:r}}}({astGenerator:j,language:t,code:W,defaultCodeValue:X});null===J.language&&(J.value=X);var Z=J.value.length+O,$=function(e,t,n,r,a,i,l,s,c){var u,d=function e(t){for(var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],a=0;a2&&void 0!==arguments[2]?arguments[2]:[];return t||i.length>0?function(e,t){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];return A({children:e,lineNumber:t,lineNumberStyle:s,largestLineNumber:l,showInlineLineNumbers:a,lineProps:n,className:o,showLineNumbers:r,wrapLongLines:c})}(e,o,i):function(e,t){if(r&&t&&a){var n=T(s,t,l);e.unshift(E(t,n))}return e}(e,o)}for(;f]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}}e.exports=t,t.displayName="clike",t.aliases=[]},2049:function(e){"use strict";function t(e){var t,n;t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/,e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css,(n=e.languages.markup)&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}e.exports=t,t.displayName="css",t.aliases=[]},6155:function(e){"use strict";function t(e){e.languages.javascript=e.languages.extend("clike",{"class-name":[e.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+(/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|")+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),e.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,e.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:e.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:e.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:e.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:e.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:e.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),e.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:e.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),e.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),e.languages.markup&&(e.languages.markup.tag.addInlined("script","javascript"),e.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),e.languages.js=e.languages.javascript}e.exports=t,t.displayName="javascript",t.aliases=["js"]},2717:function(e){"use strict";function t(e){e.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},e.languages.markup.tag.inside["attr-value"].inside.entity=e.languages.markup.entity,e.languages.markup.doctype.inside["internal-subset"].inside=e.languages.markup,e.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.value.replace(/&/,"&"))}),Object.defineProperty(e.languages.markup.tag,"addInlined",{value:function(t,n){var o={};o["language-"+n]={pattern:/(^$)/i,lookbehind:!0,inside:e.languages[n]},o.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:o}};r["language-"+n]={pattern:/[\s\S]+/,inside:e.languages[n]};var a={};a[t]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,function(){return t}),"i"),lookbehind:!0,greedy:!0,inside:r},e.languages.insertBefore("markup","cdata",a)}}),Object.defineProperty(e.languages.markup.tag,"addAttribute",{value:function(t,n){e.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+t+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[n,"language-"+n],inside:e.languages[n]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),e.languages.html=e.languages.markup,e.languages.mathml=e.languages.markup,e.languages.svg=e.languages.markup,e.languages.xml=e.languages.extend("markup",{}),e.languages.ssml=e.languages.xml,e.languages.atom=e.languages.xml,e.languages.rss=e.languages.xml}e.exports=t,t.displayName="markup",t.aliases=["html","mathml","svg","xml","ssml","atom","rss"]},2992:function(e){"use strict";function t(e){e.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},e.languages.python["string-interpolation"].inside.interpolation.inside.rest=e.languages.python,e.languages.py=e.languages.python}e.exports=t,t.displayName="python",t.aliases=["py"]},166:function(e){"use strict";e.exports=function(e){var t="string"==typeof e?e.charCodeAt(0):e;return t>=97&&t<=122||t>=65&&t<=90}},2783:function(e,t,n){"use strict";var o=n(166),r=n(1250);e.exports=function(e){return o(e)||r(e)}},1250:function(e){"use strict";e.exports=function(e){var t="string"==typeof e?e.charCodeAt(0):e;return t>=48&&t<=57}},9956:function(e){"use strict";e.exports=function(e){var t="string"==typeof e?e.charCodeAt(0):e;return t>=97&&t<=102||t>=65&&t<=70||t>=48&&t<=57}},1e3:function(e){"use strict";var t;e.exports=function(e){var n,o="&"+e+";";return(t=t||document.createElement("i")).innerHTML=o,(59!==(n=t.textContent).charCodeAt(n.length-1)||"semi"===e)&&n!==o&&n}},2921:function(e,t,n){"use strict";var o=n(8223),r=n(7710),a=n(1250),i=n(9956),l=n(2783),s=n(1e3);e.exports=function(e,t){var n,a,i={};for(a in t||(t={}),p)n=t[a],i[a]=null==n?p[a]:n;return(i.position.indent||i.position.start)&&(i.indent=i.position.indent||[],i.position=i.position.start),function(e,t){var n,a,i,p,T,A,k,S,y,C,_,D,N,I,O,x,w,v,F,R,M,L=t.additional,P=t.nonTerminated,B=t.text,H=t.reference,z=t.warning,U=t.textContext,G=t.referenceContext,W=t.warningContext,j=t.position,Y=t.indent||[],Q=e.length,V=0,q=-1,K=j.column||1,X=j.line||1,J="",Z=[];for("string"==typeof L&&(L=L.charCodeAt(0)),v=$(),C=z?function(e,t){var n=$();n.column+=t,n.offset+=t,z.call(W,E[e],n,e)}:d,V--,Q++;++V=55296&&n<=57343||n>1114111?(C(7,R),S=u(65533)):S in r?(C(6,R),S=r[S]):(D="",((a=S)>=1&&a<=8||11===a||a>=13&&a<=31||a>=127&&a<=159||a>=64976&&a<=65007||(65535&a)==65535||(65535&a)==65534)&&C(6,R),S>65535&&(S-=65536,D+=u(S>>>10|55296),S=56320|1023&S),S=D+u(S))):x!==h&&C(4,R)),S?(ee(),v=$(),V=M-1,K+=M-O+1,Z.push(S),F=$(),F.offset++,H&&H.call(G,S,{start:v,end:F},e.slice(O-1,M)),v=F):(A=e.slice(O-1,M),J+=A,K+=A.length,V=M-1)}else 10===k&&(X++,q++,K=0),k==k?(J+=u(k),K++):ee();return Z.join("");function $(){return{line:X,column:K,offset:V+(j.offset||0)}}function ee(){J&&(Z.push(J),B&&B.call(U,J,{start:v,end:$()}),J="")}}(e,i)};var c={}.hasOwnProperty,u=String.fromCharCode,d=Function.prototype,p={warning:null,reference:null,text:null,warningContext:null,referenceContext:null,textContext:null,position:{},additional:null,attribute:!1,nonTerminated:!0},h="named",f="hexadecimal",g="decimal",m={};m[f]=16,m[g]=10;var b={};b[h]=l,b[g]=a,b[f]=i;var E={};E[1]="Named character references must be terminated by a semicolon",E[2]="Numeric character references must be terminated by a semicolon",E[3]="Named character references cannot be empty",E[4]="Numeric character references cannot be empty",E[5]="Named character references must be known",E[6]="Numeric character references cannot be disallowed",E[7]="Numeric character references cannot be outside the permissible Unicode range"},9216:function(e,t,n){/** +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[393],{4470:function(e){"use strict";var t=Object.prototype.hasOwnProperty,n=Object.prototype.toString,o=Object.defineProperty,r=Object.getOwnPropertyDescriptor,a=function(e){return"function"==typeof Array.isArray?Array.isArray(e):"[object Array]"===n.call(e)},i=function(e){if(!e||"[object Object]"!==n.call(e))return!1;var o,r=t.call(e,"constructor"),a=e.constructor&&e.constructor.prototype&&t.call(e.constructor.prototype,"isPrototypeOf");if(e.constructor&&!r&&!a)return!1;for(o in e);return void 0===o||t.call(e,o)},l=function(e,t){o&&"__proto__"===t.name?o(e,t.name,{enumerable:!0,configurable:!0,value:t.newValue,writable:!0}):e[t.name]=t.newValue},s=function(e,n){if("__proto__"===n){if(!t.call(e,n))return;if(r)return r(e,n).value}return e[n]};e.exports=function e(){var t,n,o,r,c,u,d=arguments[0],p=1,h=arguments.length,f=!1;for("boolean"==typeof d&&(f=d,d=arguments[1]||{},p=2),(null==d||"object"!=typeof d&&"function"!=typeof d)&&(d={});p4&&f.slice(0,4)===i&&l.test(t)&&("-"===t.charAt(4)?g=i+(n=t.slice(5).replace(s,d)).charAt(0).toUpperCase()+n.slice(1):(h=(p=t).slice(4),t=s.test(h)?p:("-"!==(h=h.replace(c,u)).charAt(0)&&(h="-"+h),i+h)),m=r),new m(g,t))};var l=/^data[-\w.:]+$/i,s=/-[a-z]/g,c=/[A-Z]/g;function u(e){return"-"+e.toLowerCase()}function d(e){return e.charAt(1).toUpperCase()}},8055:function(e,t,n){"use strict";var o=n(6230),r=n(3970),a=n(629),i=n(647),l=n(1305),s=n(2537);e.exports=o([a,r,i,l,s])},1305:function(e,t,n){"use strict";var o=n(1422),r=n(7589),a=o.booleanish,i=o.number,l=o.spaceSeparated;e.exports=r({transform:function(e,t){return"role"===t?t:"aria-"+t.slice(4).toLowerCase()},properties:{ariaActiveDescendant:null,ariaAtomic:a,ariaAutoComplete:null,ariaBusy:a,ariaChecked:a,ariaColCount:i,ariaColIndex:i,ariaColSpan:i,ariaControls:l,ariaCurrent:null,ariaDescribedBy:l,ariaDetails:null,ariaDisabled:a,ariaDropEffect:l,ariaErrorMessage:null,ariaExpanded:a,ariaFlowTo:l,ariaGrabbed:a,ariaHasPopup:null,ariaHidden:a,ariaInvalid:null,ariaKeyShortcuts:null,ariaLabel:null,ariaLabelledBy:l,ariaLevel:i,ariaLive:null,ariaModal:a,ariaMultiLine:a,ariaMultiSelectable:a,ariaOrientation:null,ariaOwns:l,ariaPlaceholder:null,ariaPosInSet:i,ariaPressed:a,ariaReadOnly:a,ariaRelevant:null,ariaRequired:a,ariaRoleDescription:l,ariaRowCount:i,ariaRowIndex:i,ariaRowSpan:i,ariaSelected:a,ariaSetSize:i,ariaSort:null,ariaValueMax:i,ariaValueMin:i,ariaValueNow:i,ariaValueText:null,role:null}})},2537:function(e,t,n){"use strict";var o=n(1422),r=n(7589),a=n(9348),i=o.boolean,l=o.overloadedBoolean,s=o.booleanish,c=o.number,u=o.spaceSeparated,d=o.commaSeparated;e.exports=r({space:"html",attributes:{acceptcharset:"accept-charset",classname:"class",htmlfor:"for",httpequiv:"http-equiv"},transform:a,mustUseProperty:["checked","multiple","muted","selected"],properties:{abbr:null,accept:d,acceptCharset:u,accessKey:u,action:null,allow:null,allowFullScreen:i,allowPaymentRequest:i,allowUserMedia:i,alt:null,as:null,async:i,autoCapitalize:null,autoComplete:u,autoFocus:i,autoPlay:i,capture:i,charSet:null,checked:i,cite:null,className:u,cols:c,colSpan:null,content:null,contentEditable:s,controls:i,controlsList:u,coords:c|d,crossOrigin:null,data:null,dateTime:null,decoding:null,default:i,defer:i,dir:null,dirName:null,disabled:i,download:l,draggable:s,encType:null,enterKeyHint:null,form:null,formAction:null,formEncType:null,formMethod:null,formNoValidate:i,formTarget:null,headers:u,height:c,hidden:i,high:c,href:null,hrefLang:null,htmlFor:u,httpEquiv:u,id:null,imageSizes:null,imageSrcSet:d,inputMode:null,integrity:null,is:null,isMap:i,itemId:null,itemProp:u,itemRef:u,itemScope:i,itemType:u,kind:null,label:null,lang:null,language:null,list:null,loading:null,loop:i,low:c,manifest:null,max:null,maxLength:c,media:null,method:null,min:null,minLength:c,multiple:i,muted:i,name:null,nonce:null,noModule:i,noValidate:i,onAbort:null,onAfterPrint:null,onAuxClick:null,onBeforePrint:null,onBeforeUnload:null,onBlur:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onContextMenu:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnded:null,onError:null,onFocus:null,onFormData:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLanguageChange:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadEnd:null,onLoadStart:null,onMessage:null,onMessageError:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRejectionHandled:null,onReset:null,onResize:null,onScroll:null,onSecurityPolicyViolation:null,onSeeked:null,onSeeking:null,onSelect:null,onSlotChange:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnhandledRejection:null,onUnload:null,onVolumeChange:null,onWaiting:null,onWheel:null,open:i,optimum:c,pattern:null,ping:u,placeholder:null,playsInline:i,poster:null,preload:null,readOnly:i,referrerPolicy:null,rel:u,required:i,reversed:i,rows:c,rowSpan:c,sandbox:u,scope:null,scoped:i,seamless:i,selected:i,shape:null,size:c,sizes:null,slot:null,span:c,spellCheck:s,src:null,srcDoc:null,srcLang:null,srcSet:d,start:c,step:null,style:null,tabIndex:c,target:null,title:null,translate:null,type:null,typeMustMatch:i,useMap:null,value:s,width:c,wrap:null,align:null,aLink:null,archive:u,axis:null,background:null,bgColor:null,border:c,borderColor:null,bottomMargin:c,cellPadding:null,cellSpacing:null,char:null,charOff:null,classId:null,clear:null,code:null,codeBase:null,codeType:null,color:null,compact:i,declare:i,event:null,face:null,frame:null,frameBorder:null,hSpace:c,leftMargin:c,link:null,longDesc:null,lowSrc:null,marginHeight:c,marginWidth:c,noResize:i,noHref:i,noShade:i,noWrap:i,object:null,profile:null,prompt:null,rev:null,rightMargin:c,rules:null,scheme:null,scrolling:s,standby:null,summary:null,text:null,topMargin:c,valueType:null,version:null,vAlign:null,vLink:null,vSpace:c,allowTransparency:null,autoCorrect:null,autoSave:null,disablePictureInPicture:i,disableRemotePlayback:i,prefix:null,property:null,results:c,security:null,unselectable:null}})},9348:function(e,t,n){"use strict";var o=n(1098);e.exports=function(e,t){return o(e,t.toLowerCase())}},1098:function(e){"use strict";e.exports=function(e,t){return t in e?e[t]:t}},7589:function(e,t,n){"use strict";var o=n(4977),r=n(6038),a=n(8444);e.exports=function(e){var t,n,i=e.space,l=e.mustUseProperty||[],s=e.attributes||{},c=e.properties,u=e.transform,d={},p={};for(t in c)n=new a(t,u(s,t),c[t],i),-1!==l.indexOf(t)&&(n.mustUseProperty=!0),d[t]=n,p[o(t)]=t,p[o(n.attribute)]=t;return new r(d,p,i)}},8444:function(e,t,n){"use strict";var o=n(313),r=n(1422);e.exports=l,l.prototype=new o,l.prototype.defined=!0;var a=["boolean","booleanish","overloadedBoolean","number","commaSeparated","spaceSeparated","commaOrSpaceSeparated"],i=a.length;function l(e,t,n,l){var s,c,u,d=-1;for(l&&(this.space=l),o.call(this,e,t);++d=t||n<0||p&&o>=i}function k(){var e,n,o,r=m();if(A(r))return S(r);s=setTimeout(k,(e=r-c,n=r-u,o=t-e,p?g(o,i-n):o))}function S(e){return(s=void 0,h&&r)?T(e):(r=a=void 0,l)}function y(){var e,n=m(),o=A(n);if(r=arguments,a=this,c=n,o){if(void 0===s)return u=e=c,s=setTimeout(k,t),d?T(e):l;if(p)return s=setTimeout(k,t),T(c)}return void 0===s&&(s=setTimeout(k,t)),l}return t=E(t)||0,b(n)&&(d=!!n.leading,i=(p="maxWait"in n)?f(E(n.maxWait)||0,t):i,h="trailing"in n?!!n.trailing:h),y.cancel=function(){void 0!==s&&clearTimeout(s),u=0,r=c=a=s=void 0},y.flush=function(){return void 0===s?l:S(m())},y}(e,t,{leading:r,maxWait:t,trailing:a})}},1163:function(e,t,n){e.exports=n(9974)},2703:function(e,t,n){"use strict";var o=n(414);function r(){}function a(){}a.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,a,i){if(i!==o){var l=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:r};return n.PropTypes=n,n}},5697:function(e,t,n){e.exports=n(2703)()},414:function(e){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},8477:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n=Math.floor(i)&&d=Math.floor(l),g=n.getActiveLink();return f?(r===g&&n.setActiveLink(void 0),e.props.hashSpy&&p.getHash()===r&&p.changeHash(),e.props.spy&&e.state.active&&(e.setState({active:!1}),e.props.onSetInactive&&e.props.onSetInactive()),c.updateStates()):h&&g!==r?(n.setActiveLink(r),e.props.hashSpy&&p.changeHash(r),e.props.spy&&(e.setState({active:!0}),e.props.onSetActive&&e.props.onSetActive(r)),c.updateStates()):void 0}}};return d.propTypes=h,d.defaultProps={offset:0},d},Element:function(e){console.warn("Helpers.Element is deprecated since v1.7.0");var Element=function(t){function Element(e){a(this,Element);var t=i(this,(Element.__proto__||Object.getPrototypeOf(Element)).call(this,e));return t.childBindings={domNode:null},t}return l(Element,t),r(Element,[{key:"componentDidMount",value:function(){if("undefined"==typeof window)return!1;this.registerElems(this.props.name)}},{key:"componentDidUpdate",value:function(e){this.props.name!==e.name&&this.registerElems(this.props.name)}},{key:"componentWillUnmount",value:function(){if("undefined"==typeof window)return!1;u.unregister(this.props.name)}},{key:"registerElems",value:function(e){u.register(e,this.childBindings.domNode)}},{key:"render",value:function(){return s.createElement(e,o({},this.props,{parentBindings:this.childBindings}))}}]),Element}(s.Component);return Element.propTypes={name:d.string,id:d.string},Element}}},3200:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t=r.duration?1:t(r.progress/r.duration),r.currentPosition=r.startPosition+Math.ceil(r.delta*r.percent),r.containerElement&&r.containerElement!==document&&r.containerElement!==document.body?n.horizontal?r.containerElement.scrollLeft=r.currentPosition:r.containerElement.scrollTop=r.currentPosition:n.horizontal?window.scrollTo(r.currentPosition,0):window.scrollTo(0,r.currentPosition),r.percent<1){var a=e.bind(null,t,n);c.call(window,a);return}i.default.registered.end&&i.default.registered.end(r.to,r.target,r.currentPosition)},m=function(e){e.data.containerElement=e?e.containerId?document.getElementById(e.containerId):e.container&&e.container.nodeType?e.container:document:null},b=function(e,t,n,o){if(t.data=t.data||u(),window.clearTimeout(t.data.delayTimeout),a.default.subscribe(function(){t.data.cancel=!0}),m(t),t.data.start=null,t.data.cancel=!1,t.data.startPosition=t.horizontal?d(t):p(t),t.data.targetPosition=t.absolute?e:e+t.data.startPosition,t.data.startPosition===t.data.targetPosition){i.default.registered.end&&i.default.registered.end(t.data.to,t.data.target,t.data.currentPosition);return}t.data.delta=Math.round(t.data.targetPosition-t.data.startPosition),t.data.duration=("function"==typeof(r=t.duration)?r:function(){return r})(t.data.delta),t.data.duration=isNaN(parseFloat(t.data.duration))?1e3:parseFloat(t.data.duration),t.data.to=n,t.data.target=o;var r,l=s(t),h=g.bind(null,l,t);if(t&&t.delay>0){t.data.delayTimeout=window.setTimeout(function(){i.default.registered.begin&&i.default.registered.begin(t.data.to,t.data.target),c.call(window,h)},t.delay);return}i.default.registered.begin&&i.default.registered.begin(t.data.to,t.data.target),c.call(window,h)},E=function(e){return(e=o({},e)).data=e.data||u(),e.absolute=!0,e};t.default={animateTopScroll:b,getAnimationType:s,scrollToTop:function(e){b(0,E(e))},scrollToBottom:function(e){m(e=E(e)),b(e.horizontal?h(e):f(e),e)},scrollTo:function(e,t){b(e,E(t))},scrollMore:function(e,t){m(t=E(t)),b(e+(t.horizontal?d(t):p(t)),t)}}},140:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(5236),r=["mousedown","mousewheel","touchmove","keydown"];t.default={subscribe:function(e){return"undefined"!=typeof document&&r.forEach(function(t){return(0,o.addPassiveEventListener)(document,t,e)})}}},5236:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPassiveEventListener=function(e,t,o){var r=o.name;r||(r=t,console.warn("Listener must be a named function.")),n.has(t)||n.set(t,new Set);var a=n.get(t);if(!a.has(r)){var i=function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(e){}return e}();e.addEventListener(t,o,!!i&&{passive:!0}),a.add(r)}},t.removePassiveEventListener=function(e,t,o){e.removeEventListener(t,o),n.get(t).delete(o.name||t)};var n=new Map},8e3:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t=Math.floor(d)&&g=Math.floor(p)}else{var m=0,b=0,E=0;if(r.getBoundingClientRect&&(E=r.getBoundingClientRect().top),!l||e.props.isDynamic){if(!(l=n.get(i)))return;var T=l.getBoundingClientRect();b=(m=T.top-E+o)+T.height}var A=o-e.props.offset;s=A>=Math.floor(m)&&A=Math.floor(b)}var k=n.getActiveLink();if(u){if(i===k&&n.setActiveLink(void 0),e.props.hashSpy&&c.default.getHash()===i){var S=e.props.saveHashHistory;c.default.changeHash("",void 0!==S&&S)}e.props.spy&&e.state.active&&(e.setState({active:!1}),e.props.onSetInactive&&e.props.onSetInactive(i,l))}if(s&&(k!==i||!1===e.state.active)){n.setActiveLink(i);var y=e.props.saveHashHistory;e.props.hashSpy&&c.default.changeHash(i,void 0!==y&&y),e.props.spy&&(e.setState({active:!0}),e.props.onSetActive&&e.props.onSetActive(i,l))}}}};return s.propTypes=d,s.defaultProps={offset:0},s}},7606:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,r=(o=n(3096))&&o.__esModule?o:{default:o},a=n(5236),i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:66;return(0,r.default)(e,t)},l={spyCallbacks:[],spySetState:[],scrollSpyContainers:[],mount:function(e,t){if(e){var n=i(function(t){l.scrollHandler(e)},t);l.scrollSpyContainers.push(e),(0,a.addPassiveEventListener)(e,"scroll",n)}},isMounted:function(e){return -1!==l.scrollSpyContainers.indexOf(e)},currentPositionX:function(e){if(e!==document)return e.scrollLeft;var t=void 0!==window.pageYOffset,n="CSS1Compat"===(document.compatMode||"");return t?window.pageXOffset:n?document.documentElement.scrollLeft:document.body.scrollLeft},currentPositionY:function(e){if(e!==document)return e.scrollTop;var t=void 0!==window.pageXOffset,n="CSS1Compat"===(document.compatMode||"");return t?window.pageYOffset:n?document.documentElement.scrollTop:document.body.scrollTop},scrollHandler:function(e){(l.scrollSpyContainers[l.scrollSpyContainers.indexOf(e)].spyCallbacks||[]).forEach(function(t){return t(l.currentPositionX(e),l.currentPositionY(e))})},addStateHandler:function(e){l.spySetState.push(e)},addSpyHandler:function(e,t){var n=l.scrollSpyContainers[l.scrollSpyContainers.indexOf(t)];n.spyCallbacks||(n.spyCallbacks=[]),n.spyCallbacks.push(e),e(l.currentPositionX(t),l.currentPositionY(t))},updateStates:function(){l.spySetState.forEach(function(e){return e()})},unmount:function(e,t){l.scrollSpyContainers.forEach(function(e){return e.spyCallbacks&&e.spyCallbacks.length&&e.spyCallbacks.indexOf(t)>-1&&e.spyCallbacks.splice(e.spyCallbacks.indexOf(t),1)}),l.spySetState&&l.spySetState.length&&l.spySetState.indexOf(e)>-1&&l.spySetState.splice(l.spySetState.indexOf(e),1),document.removeEventListener("scroll",l.scrollHandler)},update:function(){return l.scrollSpyContainers.forEach(function(e){return l.scrollHandler(e)})}};t.default=l},2628:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t code[class*="language-"]':{background:"#2b2b2b",padding:"0.1em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"#d4d0ab"},prolog:{color:"#d4d0ab"},doctype:{color:"#d4d0ab"},cdata:{color:"#d4d0ab"},punctuation:{color:"#fefefe"},property:{color:"#ffa07a"},tag:{color:"#ffa07a"},constant:{color:"#ffa07a"},symbol:{color:"#ffa07a"},deleted:{color:"#ffa07a"},boolean:{color:"#00e0e0"},number:{color:"#00e0e0"},selector:{color:"#abe338"},"attr-name":{color:"#abe338"},string:{color:"#abe338"},char:{color:"#abe338"},builtin:{color:"#abe338"},inserted:{color:"#abe338"},operator:{color:"#00e0e0"},entity:{color:"#00e0e0",cursor:"help"},url:{color:"#00e0e0"},".language-css .token.string":{color:"#00e0e0"},".style .token.string":{color:"#00e0e0"},variable:{color:"#00e0e0"},atrule:{color:"#ffd700"},"attr-value":{color:"#ffd700"},function:{color:"#ffd700"},keyword:{color:"#00e0e0"},regex:{color:"#ffd700"},important:{color:"#ffd700",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},4441:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#c5c8c6",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#c5c8c6",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em",background:"#1d1f21"},':not(pre) > code[class*="language-"]':{background:"#1d1f21",padding:".1em",borderRadius:".3em"},comment:{color:"#7C7C7C"},prolog:{color:"#7C7C7C"},doctype:{color:"#7C7C7C"},cdata:{color:"#7C7C7C"},punctuation:{color:"#c5c8c6"},".namespace":{Opacity:".7"},property:{color:"#96CBFE"},keyword:{color:"#96CBFE"},tag:{color:"#96CBFE"},"class-name":{color:"#FFFFB6",textDecoration:"underline"},boolean:{color:"#99CC99"},constant:{color:"#99CC99"},symbol:{color:"#f92672"},deleted:{color:"#f92672"},number:{color:"#FF73FD"},selector:{color:"#A8FF60"},"attr-name":{color:"#A8FF60"},string:{color:"#A8FF60"},char:{color:"#A8FF60"},builtin:{color:"#A8FF60"},inserted:{color:"#A8FF60"},variable:{color:"#C6C5FE"},operator:{color:"#EDEDED"},entity:{color:"#FFFFB6",cursor:"help"},url:{color:"#96CBFE"},".language-css .token.string":{color:"#87C38A"},".style .token.string":{color:"#87C38A"},atrule:{color:"#F9EE98"},"attr-value":{color:"#F9EE98"},function:{color:"#DAD085"},regex:{color:"#E9C062"},important:{color:"#fd971f",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},1518:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#f5f7ff",color:"#5e6687"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#f5f7ff",color:"#5e6687",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#dfe2f1"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#dfe2f1"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#dfe2f1"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#dfe2f1"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#dfe2f1"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#dfe2f1"},'code[class*="language-"]::selection':{textShadow:"none",background:"#dfe2f1"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#dfe2f1"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#898ea4"},prolog:{color:"#898ea4"},doctype:{color:"#898ea4"},cdata:{color:"#898ea4"},punctuation:{color:"#5e6687"},namespace:{Opacity:".7"},operator:{color:"#c76b29"},boolean:{color:"#c76b29"},number:{color:"#c76b29"},property:{color:"#c08b30"},tag:{color:"#3d8fd1"},string:{color:"#22a2c9"},selector:{color:"#6679cc"},"attr-name":{color:"#c76b29"},entity:{color:"#22a2c9",cursor:"help"},url:{color:"#22a2c9"},".language-css .token.string":{color:"#22a2c9"},".style .token.string":{color:"#22a2c9"},"attr-value":{color:"#ac9739"},keyword:{color:"#ac9739"},control:{color:"#ac9739"},directive:{color:"#ac9739"},unit:{color:"#ac9739"},statement:{color:"#22a2c9"},regex:{color:"#22a2c9"},atrule:{color:"#22a2c9"},placeholder:{color:"#3d8fd1"},variable:{color:"#3d8fd1"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #202746",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#c94922"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:"0.4em solid #c94922",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#dfe2f1"},".line-numbers .line-numbers-rows > span:before":{color:"#979db4"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0))"}}},68:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#fff",textShadow:"0 1px 1px #000",fontFamily:'Menlo, Monaco, "Courier New", monospace',direction:"ltr",textAlign:"left",wordSpacing:"normal",whiteSpace:"pre",wordWrap:"normal",lineHeight:"1.4",background:"none",border:"0",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#fff",textShadow:"0 1px 1px #000",fontFamily:'Menlo, Monaco, "Courier New", monospace',direction:"ltr",textAlign:"left",wordSpacing:"normal",whiteSpace:"pre",wordWrap:"normal",lineHeight:"1.4",background:"#222",border:"0",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"15px",margin:"1em 0",overflow:"auto",MozBorderRadius:"8px",WebkitBorderRadius:"8px",borderRadius:"8px"},'pre[class*="language-"] code':{float:"left",padding:"0 15px 0 0"},':not(pre) > code[class*="language-"]':{background:"#222",padding:"5px 10px",lineHeight:"1",MozBorderRadius:"3px",WebkitBorderRadius:"3px",borderRadius:"3px"},comment:{color:"#797979"},prolog:{color:"#797979"},doctype:{color:"#797979"},cdata:{color:"#797979"},selector:{color:"#fff"},operator:{color:"#fff"},punctuation:{color:"#fff"},namespace:{Opacity:".7"},tag:{color:"#ffd893"},boolean:{color:"#ffd893"},atrule:{color:"#B0C975"},"attr-value":{color:"#B0C975"},hex:{color:"#B0C975"},string:{color:"#B0C975"},property:{color:"#c27628"},entity:{color:"#c27628",cursor:"help"},url:{color:"#c27628"},"attr-name":{color:"#c27628"},keyword:{color:"#c27628"},regex:{color:"#9B71C6"},function:{color:"#e5a638"},constant:{color:"#e5a638"},variable:{color:"#fdfba8"},number:{color:"#8799B0"},important:{color:"#E45734"},deliminator:{color:"#E45734"},".line-highlight.line-highlight":{background:"rgba(255, 255, 255, .2)"},".line-highlight.line-highlight:before":{top:".3em",backgroundColor:"rgba(255, 255, 255, .3)",color:"#fff",MozBorderRadius:"8px",WebkitBorderRadius:"8px",borderRadius:"8px"},".line-highlight.line-highlight[data-end]:after":{top:".3em",backgroundColor:"rgba(255, 255, 255, .3)",color:"#fff",MozBorderRadius:"8px",WebkitBorderRadius:"8px",borderRadius:"8px"},".line-numbers .line-numbers-rows > span":{borderRight:"3px #d9d336 solid"}}},7032:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#111b27",background:"none",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#111b27",background:"#e3eaf2",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto"},'pre[class*="language-"]::-moz-selection':{background:"#8da1b9"},'pre[class*="language-"] ::-moz-selection':{background:"#8da1b9"},'code[class*="language-"]::-moz-selection':{background:"#8da1b9"},'code[class*="language-"] ::-moz-selection':{background:"#8da1b9"},'pre[class*="language-"]::selection':{background:"#8da1b9"},'pre[class*="language-"] ::selection':{background:"#8da1b9"},'code[class*="language-"]::selection':{background:"#8da1b9"},'code[class*="language-"] ::selection':{background:"#8da1b9"},':not(pre) > code[class*="language-"]':{background:"#e3eaf2",padding:"0.1em 0.3em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"#3c526d"},prolog:{color:"#3c526d"},doctype:{color:"#3c526d"},cdata:{color:"#3c526d"},punctuation:{color:"#111b27"},"delimiter.important":{color:"#006d6d",fontWeight:"inherit"},"selector.parent":{color:"#006d6d"},tag:{color:"#006d6d"},"tag.punctuation":{color:"#006d6d"},"attr-name":{color:"#755f00"},boolean:{color:"#755f00"},"boolean.important":{color:"#755f00"},number:{color:"#755f00"},constant:{color:"#755f00"},"selector.attribute":{color:"#755f00"},"class-name":{color:"#005a8e"},key:{color:"#005a8e"},parameter:{color:"#005a8e"},property:{color:"#005a8e"},"property-access":{color:"#005a8e"},variable:{color:"#005a8e"},"attr-value":{color:"#116b00"},inserted:{color:"#116b00"},color:{color:"#116b00"},"selector.value":{color:"#116b00"},string:{color:"#116b00"},"string.url-link":{color:"#116b00"},builtin:{color:"#af00af"},"keyword-array":{color:"#af00af"},package:{color:"#af00af"},regex:{color:"#af00af"},function:{color:"#7c00aa"},"selector.class":{color:"#7c00aa"},"selector.id":{color:"#7c00aa"},"atrule.rule":{color:"#a04900"},combinator:{color:"#a04900"},keyword:{color:"#a04900"},operator:{color:"#a04900"},"pseudo-class":{color:"#a04900"},"pseudo-element":{color:"#a04900"},selector:{color:"#a04900"},unit:{color:"#a04900"},deleted:{color:"#c22f2e"},important:{color:"#c22f2e",fontWeight:"bold"},"keyword-this":{color:"#005a8e",fontWeight:"bold"},this:{color:"#005a8e",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},entity:{cursor:"help"},".language-markdown .token.title":{color:"#005a8e",fontWeight:"bold"},".language-markdown .token.title .token.punctuation":{color:"#005a8e",fontWeight:"bold"},".language-markdown .token.blockquote.punctuation":{color:"#af00af"},".language-markdown .token.code":{color:"#006d6d"},".language-markdown .token.hr.punctuation":{color:"#005a8e"},".language-markdown .token.url > .token.content":{color:"#116b00"},".language-markdown .token.url-link":{color:"#755f00"},".language-markdown .token.list.punctuation":{color:"#af00af"},".language-markdown .token.table-header":{color:"#111b27"},".language-json .token.operator":{color:"#111b27"},".language-scss .token.variable":{color:"#006d6d"},"token.tab:not(:empty):before":{color:"#3c526d"},"token.cr:before":{color:"#3c526d"},"token.lf:before":{color:"#3c526d"},"token.space:before":{color:"#3c526d"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a":{color:"#e3eaf2",background:"#005a8e"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button":{color:"#e3eaf2",background:"#005a8e"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover":{color:"#e3eaf2",background:"#005a8eda",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus":{color:"#e3eaf2",background:"#005a8eda",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover":{color:"#e3eaf2",background:"#005a8eda",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus":{color:"#e3eaf2",background:"#005a8eda",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span":{color:"#e3eaf2",background:"#3c526d"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover":{color:"#e3eaf2",background:"#3c526d"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus":{color:"#e3eaf2",background:"#3c526d"},".line-highlight.line-highlight":{background:"linear-gradient(to right, #8da1b92f 70%, #8da1b925)"},".line-highlight.line-highlight:before":{backgroundColor:"#3c526d",color:"#e3eaf2",boxShadow:"0 1px #8da1b9"},".line-highlight.line-highlight[data-end]:after":{backgroundColor:"#3c526d",color:"#e3eaf2",boxShadow:"0 1px #8da1b9"},"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":{backgroundColor:"#3c526d1f"},".line-numbers.line-numbers .line-numbers-rows":{borderRight:"1px solid #8da1b97a",background:"#d0dae77a"},".line-numbers .line-numbers-rows > span:before":{color:"#3c526dda"},".rainbow-braces .token.token.punctuation.brace-level-1":{color:"#755f00"},".rainbow-braces .token.token.punctuation.brace-level-5":{color:"#755f00"},".rainbow-braces .token.token.punctuation.brace-level-9":{color:"#755f00"},".rainbow-braces .token.token.punctuation.brace-level-2":{color:"#af00af"},".rainbow-braces .token.token.punctuation.brace-level-6":{color:"#af00af"},".rainbow-braces .token.token.punctuation.brace-level-10":{color:"#af00af"},".rainbow-braces .token.token.punctuation.brace-level-3":{color:"#005a8e"},".rainbow-braces .token.token.punctuation.brace-level-7":{color:"#005a8e"},".rainbow-braces .token.token.punctuation.brace-level-11":{color:"#005a8e"},".rainbow-braces .token.token.punctuation.brace-level-4":{color:"#7c00aa"},".rainbow-braces .token.token.punctuation.brace-level-8":{color:"#7c00aa"},".rainbow-braces .token.token.punctuation.brace-level-12":{color:"#7c00aa"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)":{backgroundColor:"#c22f2e1f"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)":{backgroundColor:"#c22f2e1f"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)":{backgroundColor:"#116b001f"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)":{backgroundColor:"#116b001f"},".command-line .command-line-prompt":{borderRight:"1px solid #8da1b97a"},".command-line .command-line-prompt > span:before":{color:"#3c526dda"}}},3611:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#e3eaf2",background:"none",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#e3eaf2",background:"#111b27",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto"},'pre[class*="language-"]::-moz-selection':{background:"#3c526d"},'pre[class*="language-"] ::-moz-selection':{background:"#3c526d"},'code[class*="language-"]::-moz-selection':{background:"#3c526d"},'code[class*="language-"] ::-moz-selection':{background:"#3c526d"},'pre[class*="language-"]::selection':{background:"#3c526d"},'pre[class*="language-"] ::selection':{background:"#3c526d"},'code[class*="language-"]::selection':{background:"#3c526d"},'code[class*="language-"] ::selection':{background:"#3c526d"},':not(pre) > code[class*="language-"]':{background:"#111b27",padding:"0.1em 0.3em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"#8da1b9"},prolog:{color:"#8da1b9"},doctype:{color:"#8da1b9"},cdata:{color:"#8da1b9"},punctuation:{color:"#e3eaf2"},"delimiter.important":{color:"#66cccc",fontWeight:"inherit"},"selector.parent":{color:"#66cccc"},tag:{color:"#66cccc"},"tag.punctuation":{color:"#66cccc"},"attr-name":{color:"#e6d37a"},boolean:{color:"#e6d37a"},"boolean.important":{color:"#e6d37a"},number:{color:"#e6d37a"},constant:{color:"#e6d37a"},"selector.attribute":{color:"#e6d37a"},"class-name":{color:"#6cb8e6"},key:{color:"#6cb8e6"},parameter:{color:"#6cb8e6"},property:{color:"#6cb8e6"},"property-access":{color:"#6cb8e6"},variable:{color:"#6cb8e6"},"attr-value":{color:"#91d076"},inserted:{color:"#91d076"},color:{color:"#91d076"},"selector.value":{color:"#91d076"},string:{color:"#91d076"},"string.url-link":{color:"#91d076"},builtin:{color:"#f4adf4"},"keyword-array":{color:"#f4adf4"},package:{color:"#f4adf4"},regex:{color:"#f4adf4"},function:{color:"#c699e3"},"selector.class":{color:"#c699e3"},"selector.id":{color:"#c699e3"},"atrule.rule":{color:"#e9ae7e"},combinator:{color:"#e9ae7e"},keyword:{color:"#e9ae7e"},operator:{color:"#e9ae7e"},"pseudo-class":{color:"#e9ae7e"},"pseudo-element":{color:"#e9ae7e"},selector:{color:"#e9ae7e"},unit:{color:"#e9ae7e"},deleted:{color:"#cd6660"},important:{color:"#cd6660",fontWeight:"bold"},"keyword-this":{color:"#6cb8e6",fontWeight:"bold"},this:{color:"#6cb8e6",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},entity:{cursor:"help"},".language-markdown .token.title":{color:"#6cb8e6",fontWeight:"bold"},".language-markdown .token.title .token.punctuation":{color:"#6cb8e6",fontWeight:"bold"},".language-markdown .token.blockquote.punctuation":{color:"#f4adf4"},".language-markdown .token.code":{color:"#66cccc"},".language-markdown .token.hr.punctuation":{color:"#6cb8e6"},".language-markdown .token.url .token.content":{color:"#91d076"},".language-markdown .token.url-link":{color:"#e6d37a"},".language-markdown .token.list.punctuation":{color:"#f4adf4"},".language-markdown .token.table-header":{color:"#e3eaf2"},".language-json .token.operator":{color:"#e3eaf2"},".language-scss .token.variable":{color:"#66cccc"},"token.tab:not(:empty):before":{color:"#8da1b9"},"token.cr:before":{color:"#8da1b9"},"token.lf:before":{color:"#8da1b9"},"token.space:before":{color:"#8da1b9"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a":{color:"#111b27",background:"#6cb8e6"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button":{color:"#111b27",background:"#6cb8e6"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover":{color:"#111b27",background:"#6cb8e6da",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus":{color:"#111b27",background:"#6cb8e6da",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover":{color:"#111b27",background:"#6cb8e6da",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus":{color:"#111b27",background:"#6cb8e6da",textDecoration:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span":{color:"#111b27",background:"#8da1b9"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover":{color:"#111b27",background:"#8da1b9"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus":{color:"#111b27",background:"#8da1b9"},".line-highlight.line-highlight":{background:"linear-gradient(to right, #3c526d5f 70%, #3c526d55)"},".line-highlight.line-highlight:before":{backgroundColor:"#8da1b9",color:"#111b27",boxShadow:"0 1px #3c526d"},".line-highlight.line-highlight[data-end]:after":{backgroundColor:"#8da1b9",color:"#111b27",boxShadow:"0 1px #3c526d"},"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":{backgroundColor:"#8da1b918"},".line-numbers.line-numbers .line-numbers-rows":{borderRight:"1px solid #0b121b",background:"#0b121b7a"},".line-numbers .line-numbers-rows > span:before":{color:"#8da1b9da"},".rainbow-braces .token.token.punctuation.brace-level-1":{color:"#e6d37a"},".rainbow-braces .token.token.punctuation.brace-level-5":{color:"#e6d37a"},".rainbow-braces .token.token.punctuation.brace-level-9":{color:"#e6d37a"},".rainbow-braces .token.token.punctuation.brace-level-2":{color:"#f4adf4"},".rainbow-braces .token.token.punctuation.brace-level-6":{color:"#f4adf4"},".rainbow-braces .token.token.punctuation.brace-level-10":{color:"#f4adf4"},".rainbow-braces .token.token.punctuation.brace-level-3":{color:"#6cb8e6"},".rainbow-braces .token.token.punctuation.brace-level-7":{color:"#6cb8e6"},".rainbow-braces .token.token.punctuation.brace-level-11":{color:"#6cb8e6"},".rainbow-braces .token.token.punctuation.brace-level-4":{color:"#c699e3"},".rainbow-braces .token.token.punctuation.brace-level-8":{color:"#c699e3"},".rainbow-braces .token.token.punctuation.brace-level-12":{color:"#c699e3"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)":{backgroundColor:"#cd66601f"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)":{backgroundColor:"#cd66601f"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)":{backgroundColor:"#91d0761f"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)":{backgroundColor:"#91d0761f"},".command-line .command-line-prompt":{borderRight:"1px solid #0b121b"},".command-line .command-line-prompt > span:before":{color:"#8da1b9da"}}},9500:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"black",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"black",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",position:"relative",borderLeft:"10px solid #358ccb",boxShadow:"-1px 0 0 0 #358ccb, 0 0 0 1px #dfdfdf",backgroundColor:"#fdfdfd",backgroundImage:"linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%)",backgroundSize:"3em 3em",backgroundOrigin:"content-box",backgroundAttachment:"local",margin:".5em 0",padding:"0 1em"},'pre[class*="language-"] > code':{display:"block"},':not(pre) > code[class*="language-"]':{position:"relative",padding:".2em",borderRadius:"0.3em",color:"#c92c2c",border:"1px solid rgba(0, 0, 0, 0.1)",display:"inline",whiteSpace:"normal",backgroundColor:"#fdfdfd",WebkitBoxSizing:"border-box",MozBoxSizing:"border-box",boxSizing:"border-box"},comment:{color:"#7D8B99"},"block-comment":{color:"#7D8B99"},prolog:{color:"#7D8B99"},doctype:{color:"#7D8B99"},cdata:{color:"#7D8B99"},punctuation:{color:"#5F6364"},property:{color:"#c92c2c"},tag:{color:"#c92c2c"},boolean:{color:"#c92c2c"},number:{color:"#c92c2c"},"function-name":{color:"#c92c2c"},constant:{color:"#c92c2c"},symbol:{color:"#c92c2c"},deleted:{color:"#c92c2c"},selector:{color:"#2f9c0a"},"attr-name":{color:"#2f9c0a"},string:{color:"#2f9c0a"},char:{color:"#2f9c0a"},function:{color:"#2f9c0a"},builtin:{color:"#2f9c0a"},inserted:{color:"#2f9c0a"},operator:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},entity:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)",cursor:"help"},url:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},variable:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},atrule:{color:"#1990b8"},"attr-value":{color:"#1990b8"},keyword:{color:"#1990b8"},"class-name":{color:"#1990b8"},regex:{color:"#e90"},important:{color:"#e90",fontWeight:"normal"},".language-css .token.string":{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},".style .token.string":{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},namespace:{Opacity:".7"}}},7833:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"black",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",maxHeight:"inherit",height:"inherit",padding:"0 1em",display:"block",overflow:"auto"},'pre[class*="language-"]':{color:"black",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",position:"relative",margin:".5em 0",overflow:"visible",padding:"1px",backgroundColor:"#fdfdfd",WebkitBoxSizing:"border-box",MozBoxSizing:"border-box",boxSizing:"border-box",marginBottom:"1em"},'pre[class*="language-"] > code':{position:"relative",zIndex:"1",borderLeft:"10px solid #358ccb",boxShadow:"-1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf",backgroundColor:"#fdfdfd",backgroundImage:"linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%)",backgroundSize:"3em 3em",backgroundOrigin:"content-box",backgroundAttachment:"local"},':not(pre) > code[class*="language-"]':{backgroundColor:"#fdfdfd",WebkitBoxSizing:"border-box",MozBoxSizing:"border-box",boxSizing:"border-box",marginBottom:"1em",position:"relative",padding:".2em",borderRadius:"0.3em",color:"#c92c2c",border:"1px solid rgba(0, 0, 0, 0.1)",display:"inline",whiteSpace:"normal"},'pre[class*="language-"]:before':{content:"''",display:"block",position:"absolute",bottom:"0.75em",left:"0.18em",width:"40%",height:"20%",maxHeight:"13em",boxShadow:"0px 13px 8px #979797",WebkitTransform:"rotate(-2deg)",MozTransform:"rotate(-2deg)",msTransform:"rotate(-2deg)",OTransform:"rotate(-2deg)",transform:"rotate(-2deg)"},'pre[class*="language-"]:after':{content:"''",display:"block",position:"absolute",bottom:"0.75em",left:"auto",width:"40%",height:"20%",maxHeight:"13em",boxShadow:"0px 13px 8px #979797",WebkitTransform:"rotate(2deg)",MozTransform:"rotate(2deg)",msTransform:"rotate(2deg)",OTransform:"rotate(2deg)",transform:"rotate(2deg)",right:"0.75em"},comment:{color:"#7D8B99"},"block-comment":{color:"#7D8B99"},prolog:{color:"#7D8B99"},doctype:{color:"#7D8B99"},cdata:{color:"#7D8B99"},punctuation:{color:"#5F6364"},property:{color:"#c92c2c"},tag:{color:"#c92c2c"},boolean:{color:"#c92c2c"},number:{color:"#c92c2c"},"function-name":{color:"#c92c2c"},constant:{color:"#c92c2c"},symbol:{color:"#c92c2c"},deleted:{color:"#c92c2c"},selector:{color:"#2f9c0a"},"attr-name":{color:"#2f9c0a"},string:{color:"#2f9c0a"},char:{color:"#2f9c0a"},function:{color:"#2f9c0a"},builtin:{color:"#2f9c0a"},inserted:{color:"#2f9c0a"},operator:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},entity:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)",cursor:"help"},url:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},variable:{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},atrule:{color:"#1990b8"},"attr-value":{color:"#1990b8"},keyword:{color:"#1990b8"},"class-name":{color:"#1990b8"},regex:{color:"#e90"},important:{color:"#e90",fontWeight:"normal"},".language-css .token.string":{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},".style .token.string":{color:"#a67f59",background:"rgba(255, 255, 255, 0.5)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},namespace:{Opacity:".7"},'pre[class*="language-"].line-numbers.line-numbers':{paddingLeft:"0"},'pre[class*="language-"].line-numbers.line-numbers code':{paddingLeft:"3.8em"},'pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows':{left:"0"},'pre[class*="language-"][data-line]':{paddingTop:"0",paddingBottom:"0",paddingLeft:"0"},"pre[data-line] code":{position:"relative",paddingLeft:"4em"},"pre .line-highlight":{marginTop:"0"}}},4560:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#a9b7c6",fontFamily:"Consolas, Monaco, 'Andale Mono', monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#a9b7c6",fontFamily:"Consolas, Monaco, 'Andale Mono', monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",background:"#2b2b2b"},'pre[class*="language-"]::-moz-selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'pre[class*="language-"] ::-moz-selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'code[class*="language-"]::-moz-selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'code[class*="language-"] ::-moz-selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'pre[class*="language-"]::selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'pre[class*="language-"] ::selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'code[class*="language-"]::selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},'code[class*="language-"] ::selection':{color:"inherit",background:"rgba(33, 66, 131, .85)"},':not(pre) > code[class*="language-"]':{background:"#2b2b2b",padding:".1em",borderRadius:".3em"},comment:{color:"#808080"},prolog:{color:"#808080"},cdata:{color:"#808080"},delimiter:{color:"#cc7832"},boolean:{color:"#cc7832"},keyword:{color:"#cc7832"},selector:{color:"#cc7832"},important:{color:"#cc7832"},atrule:{color:"#cc7832"},operator:{color:"#a9b7c6"},punctuation:{color:"#a9b7c6"},"attr-name":{color:"#a9b7c6"},tag:{color:"#e8bf6a"},"tag.punctuation":{color:"#e8bf6a"},doctype:{color:"#e8bf6a"},builtin:{color:"#e8bf6a"},entity:{color:"#6897bb"},number:{color:"#6897bb"},symbol:{color:"#6897bb"},property:{color:"#9876aa"},constant:{color:"#9876aa"},variable:{color:"#9876aa"},string:{color:"#6a8759"},char:{color:"#6a8759"},"attr-value":{color:"#a5c261"},"attr-value.punctuation":{color:"#a5c261"},"attr-value.punctuation:first-child":{color:"#a9b7c6"},url:{color:"#287bde",textDecoration:"underline"},function:{color:"#ffc66d"},regex:{background:"#364135"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{background:"#294436"},deleted:{background:"#484a4a"},"code.language-css .token.property":{color:"#a9b7c6"},"code.language-css .token.property + .token.punctuation":{color:"#a9b7c6"},"code.language-css .token.id":{color:"#ffc66d"},"code.language-css .token.selector > .token.class":{color:"#ffc66d"},"code.language-css .token.selector > .token.attribute":{color:"#ffc66d"},"code.language-css .token.selector > .token.pseudo-class":{color:"#ffc66d"},"code.language-css .token.selector > .token.pseudo-element":{color:"#ffc66d"}}},3352:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"white",background:"none",textShadow:"0 -.1em .2em black",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"white",background:"hsl(30, 20%, 25%)",textShadow:"0 -.1em .2em black",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",border:".3em solid hsl(30, 20%, 40%)",borderRadius:".5em",boxShadow:"1px 1px .5em black inset"},':not(pre) > code[class*="language-"]':{background:"hsl(30, 20%, 25%)",padding:".15em .2em .05em",borderRadius:".3em",border:".13em solid hsl(30, 20%, 40%)",boxShadow:"1px 1px .3em -.1em black inset",whiteSpace:"normal"},comment:{color:"hsl(30, 20%, 50%)"},prolog:{color:"hsl(30, 20%, 50%)"},doctype:{color:"hsl(30, 20%, 50%)"},cdata:{color:"hsl(30, 20%, 50%)"},punctuation:{Opacity:".7"},namespace:{Opacity:".7"},property:{color:"hsl(350, 40%, 70%)"},tag:{color:"hsl(350, 40%, 70%)"},boolean:{color:"hsl(350, 40%, 70%)"},number:{color:"hsl(350, 40%, 70%)"},constant:{color:"hsl(350, 40%, 70%)"},symbol:{color:"hsl(350, 40%, 70%)"},selector:{color:"hsl(75, 70%, 60%)"},"attr-name":{color:"hsl(75, 70%, 60%)"},string:{color:"hsl(75, 70%, 60%)"},char:{color:"hsl(75, 70%, 60%)"},builtin:{color:"hsl(75, 70%, 60%)"},inserted:{color:"hsl(75, 70%, 60%)"},operator:{color:"hsl(40, 90%, 60%)"},entity:{color:"hsl(40, 90%, 60%)",cursor:"help"},url:{color:"hsl(40, 90%, 60%)"},".language-css .token.string":{color:"hsl(40, 90%, 60%)"},".style .token.string":{color:"hsl(40, 90%, 60%)"},variable:{color:"hsl(40, 90%, 60%)"},atrule:{color:"hsl(350, 40%, 70%)"},"attr-value":{color:"hsl(350, 40%, 70%)"},keyword:{color:"hsl(350, 40%, 70%)"},regex:{color:"#e90"},important:{color:"#e90",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},deleted:{color:"red"}}},3498:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f8f8f2",background:"none",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f8f8f2",background:"#282a36",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em"},':not(pre) > code[class*="language-"]':{background:"#282a36",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#6272a4"},prolog:{color:"#6272a4"},doctype:{color:"#6272a4"},cdata:{color:"#6272a4"},punctuation:{color:"#f8f8f2"},".namespace":{Opacity:".7"},property:{color:"#ff79c6"},tag:{color:"#ff79c6"},constant:{color:"#ff79c6"},symbol:{color:"#ff79c6"},deleted:{color:"#ff79c6"},boolean:{color:"#bd93f9"},number:{color:"#bd93f9"},selector:{color:"#50fa7b"},"attr-name":{color:"#50fa7b"},string:{color:"#50fa7b"},char:{color:"#50fa7b"},builtin:{color:"#50fa7b"},inserted:{color:"#50fa7b"},operator:{color:"#f8f8f2"},entity:{color:"#f8f8f2",cursor:"help"},url:{color:"#f8f8f2"},".language-css .token.string":{color:"#f8f8f2"},".style .token.string":{color:"#f8f8f2"},variable:{color:"#f8f8f2"},atrule:{color:"#f1fa8c"},"attr-value":{color:"#f1fa8c"},function:{color:"#f1fa8c"},"class-name":{color:"#f1fa8c"},keyword:{color:"#8be9fd"},regex:{color:"#ffb86c"},important:{color:"#ffb86c",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},1535:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#2a2734",color:"#9a86fd"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#2a2734",color:"#9a86fd",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#6a51e6"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#6a51e6"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#6a51e6"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#6a51e6"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#6a51e6"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#6a51e6"},'code[class*="language-"]::selection':{textShadow:"none",background:"#6a51e6"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#6a51e6"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#6c6783"},prolog:{color:"#6c6783"},doctype:{color:"#6c6783"},cdata:{color:"#6c6783"},punctuation:{color:"#6c6783"},namespace:{Opacity:".7"},tag:{color:"#e09142"},operator:{color:"#e09142"},number:{color:"#e09142"},property:{color:"#9a86fd"},function:{color:"#9a86fd"},"tag-id":{color:"#eeebff"},selector:{color:"#eeebff"},"atrule-id":{color:"#eeebff"},"code.language-javascript":{color:"#c4b9fe"},"attr-name":{color:"#c4b9fe"},"code.language-css":{color:"#ffcc99"},"code.language-scss":{color:"#ffcc99"},boolean:{color:"#ffcc99"},string:{color:"#ffcc99"},entity:{color:"#ffcc99",cursor:"help"},url:{color:"#ffcc99"},".language-css .token.string":{color:"#ffcc99"},".language-scss .token.string":{color:"#ffcc99"},".style .token.string":{color:"#ffcc99"},"attr-value":{color:"#ffcc99"},keyword:{color:"#ffcc99"},control:{color:"#ffcc99"},directive:{color:"#ffcc99"},unit:{color:"#ffcc99"},statement:{color:"#ffcc99"},regex:{color:"#ffcc99"},atrule:{color:"#ffcc99"},placeholder:{color:"#ffcc99"},variable:{color:"#ffcc99"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #eeebff",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#c4b9fe"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #8a75f5",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#2c2937"},".line-numbers .line-numbers-rows > span:before":{color:"#3c3949"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0))"}}},7638:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#322d29",color:"#88786d"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#322d29",color:"#88786d",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#6f5849"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#6f5849"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#6f5849"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#6f5849"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#6f5849"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#6f5849"},'code[class*="language-"]::selection':{textShadow:"none",background:"#6f5849"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#6f5849"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#6a5f58"},prolog:{color:"#6a5f58"},doctype:{color:"#6a5f58"},cdata:{color:"#6a5f58"},punctuation:{color:"#6a5f58"},namespace:{Opacity:".7"},tag:{color:"#bfa05a"},operator:{color:"#bfa05a"},number:{color:"#bfa05a"},property:{color:"#88786d"},function:{color:"#88786d"},"tag-id":{color:"#fff3eb"},selector:{color:"#fff3eb"},"atrule-id":{color:"#fff3eb"},"code.language-javascript":{color:"#a48774"},"attr-name":{color:"#a48774"},"code.language-css":{color:"#fcc440"},"code.language-scss":{color:"#fcc440"},boolean:{color:"#fcc440"},string:{color:"#fcc440"},entity:{color:"#fcc440",cursor:"help"},url:{color:"#fcc440"},".language-css .token.string":{color:"#fcc440"},".language-scss .token.string":{color:"#fcc440"},".style .token.string":{color:"#fcc440"},"attr-value":{color:"#fcc440"},keyword:{color:"#fcc440"},control:{color:"#fcc440"},directive:{color:"#fcc440"},unit:{color:"#fcc440"},statement:{color:"#fcc440"},regex:{color:"#fcc440"},atrule:{color:"#fcc440"},placeholder:{color:"#fcc440"},variable:{color:"#fcc440"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #fff3eb",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#a48774"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #816d5f",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#35302b"},".line-numbers .line-numbers-rows > span:before":{color:"#46403d"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0))"}}},6777:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#2a2d2a",color:"#687d68"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#2a2d2a",color:"#687d68",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#435643"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#435643"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#435643"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#435643"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#435643"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#435643"},'code[class*="language-"]::selection':{textShadow:"none",background:"#435643"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#435643"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#535f53"},prolog:{color:"#535f53"},doctype:{color:"#535f53"},cdata:{color:"#535f53"},punctuation:{color:"#535f53"},namespace:{Opacity:".7"},tag:{color:"#a2b34d"},operator:{color:"#a2b34d"},number:{color:"#a2b34d"},property:{color:"#687d68"},function:{color:"#687d68"},"tag-id":{color:"#f0fff0"},selector:{color:"#f0fff0"},"atrule-id":{color:"#f0fff0"},"code.language-javascript":{color:"#b3d6b3"},"attr-name":{color:"#b3d6b3"},"code.language-css":{color:"#e5fb79"},"code.language-scss":{color:"#e5fb79"},boolean:{color:"#e5fb79"},string:{color:"#e5fb79"},entity:{color:"#e5fb79",cursor:"help"},url:{color:"#e5fb79"},".language-css .token.string":{color:"#e5fb79"},".language-scss .token.string":{color:"#e5fb79"},".style .token.string":{color:"#e5fb79"},"attr-value":{color:"#e5fb79"},keyword:{color:"#e5fb79"},control:{color:"#e5fb79"},directive:{color:"#e5fb79"},unit:{color:"#e5fb79"},statement:{color:"#e5fb79"},regex:{color:"#e5fb79"},atrule:{color:"#e5fb79"},placeholder:{color:"#e5fb79"},variable:{color:"#e5fb79"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #f0fff0",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#b3d6b3"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #5c705c",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#2c302c"},".line-numbers .line-numbers-rows > span:before":{color:"#3b423b"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0))"}}},5002:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#faf8f5",color:"#728fcb"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#faf8f5",color:"#728fcb",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#faf8f5"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#faf8f5"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#faf8f5"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#faf8f5"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#faf8f5"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#faf8f5"},'code[class*="language-"]::selection':{textShadow:"none",background:"#faf8f5"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#faf8f5"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#b6ad9a"},prolog:{color:"#b6ad9a"},doctype:{color:"#b6ad9a"},cdata:{color:"#b6ad9a"},punctuation:{color:"#b6ad9a"},namespace:{Opacity:".7"},tag:{color:"#063289"},operator:{color:"#063289"},number:{color:"#063289"},property:{color:"#b29762"},function:{color:"#b29762"},"tag-id":{color:"#2d2006"},selector:{color:"#2d2006"},"atrule-id":{color:"#2d2006"},"code.language-javascript":{color:"#896724"},"attr-name":{color:"#896724"},"code.language-css":{color:"#728fcb"},"code.language-scss":{color:"#728fcb"},boolean:{color:"#728fcb"},string:{color:"#728fcb"},entity:{color:"#728fcb",cursor:"help"},url:{color:"#728fcb"},".language-css .token.string":{color:"#728fcb"},".language-scss .token.string":{color:"#728fcb"},".style .token.string":{color:"#728fcb"},"attr-value":{color:"#728fcb"},keyword:{color:"#728fcb"},control:{color:"#728fcb"},directive:{color:"#728fcb"},unit:{color:"#728fcb"},statement:{color:"#728fcb"},regex:{color:"#728fcb"},atrule:{color:"#728fcb"},placeholder:{color:"#93abdc"},variable:{color:"#93abdc"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #2d2006",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#896724"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #896724",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#ece8de"},".line-numbers .line-numbers-rows > span:before":{color:"#cdc4b1"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0))"}}},465:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#1d262f",color:"#57718e"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#1d262f",color:"#57718e",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#004a9e"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#004a9e"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#004a9e"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#004a9e"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#004a9e"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#004a9e"},'code[class*="language-"]::selection':{textShadow:"none",background:"#004a9e"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#004a9e"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#4a5f78"},prolog:{color:"#4a5f78"},doctype:{color:"#4a5f78"},cdata:{color:"#4a5f78"},punctuation:{color:"#4a5f78"},namespace:{Opacity:".7"},tag:{color:"#0aa370"},operator:{color:"#0aa370"},number:{color:"#0aa370"},property:{color:"#57718e"},function:{color:"#57718e"},"tag-id":{color:"#ebf4ff"},selector:{color:"#ebf4ff"},"atrule-id":{color:"#ebf4ff"},"code.language-javascript":{color:"#7eb6f6"},"attr-name":{color:"#7eb6f6"},"code.language-css":{color:"#47ebb4"},"code.language-scss":{color:"#47ebb4"},boolean:{color:"#47ebb4"},string:{color:"#47ebb4"},entity:{color:"#47ebb4",cursor:"help"},url:{color:"#47ebb4"},".language-css .token.string":{color:"#47ebb4"},".language-scss .token.string":{color:"#47ebb4"},".style .token.string":{color:"#47ebb4"},"attr-value":{color:"#47ebb4"},keyword:{color:"#47ebb4"},control:{color:"#47ebb4"},directive:{color:"#47ebb4"},unit:{color:"#47ebb4"},statement:{color:"#47ebb4"},regex:{color:"#47ebb4"},atrule:{color:"#47ebb4"},placeholder:{color:"#47ebb4"},variable:{color:"#47ebb4"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #ebf4ff",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#7eb6f6"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #34659d",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#1f2932"},".line-numbers .line-numbers-rows > span:before":{color:"#2c3847"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0))"}}},8129:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#24242e",color:"#767693"},'pre[class*="language-"]':{fontFamily:'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',fontSize:"14px",lineHeight:"1.375",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"#24242e",color:"#767693",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#5151e6"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#5151e6"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#5151e6"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#5151e6"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#5151e6"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#5151e6"},'code[class*="language-"]::selection':{textShadow:"none",background:"#5151e6"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#5151e6"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#5b5b76"},prolog:{color:"#5b5b76"},doctype:{color:"#5b5b76"},cdata:{color:"#5b5b76"},punctuation:{color:"#5b5b76"},namespace:{Opacity:".7"},tag:{color:"#dd672c"},operator:{color:"#dd672c"},number:{color:"#dd672c"},property:{color:"#767693"},function:{color:"#767693"},"tag-id":{color:"#ebebff"},selector:{color:"#ebebff"},"atrule-id":{color:"#ebebff"},"code.language-javascript":{color:"#aaaaca"},"attr-name":{color:"#aaaaca"},"code.language-css":{color:"#fe8c52"},"code.language-scss":{color:"#fe8c52"},boolean:{color:"#fe8c52"},string:{color:"#fe8c52"},entity:{color:"#fe8c52",cursor:"help"},url:{color:"#fe8c52"},".language-css .token.string":{color:"#fe8c52"},".language-scss .token.string":{color:"#fe8c52"},".style .token.string":{color:"#fe8c52"},"attr-value":{color:"#fe8c52"},keyword:{color:"#fe8c52"},control:{color:"#fe8c52"},directive:{color:"#fe8c52"},unit:{color:"#fe8c52"},statement:{color:"#fe8c52"},regex:{color:"#fe8c52"},atrule:{color:"#fe8c52"},placeholder:{color:"#fe8c52"},variable:{color:"#fe8c52"},deleted:{textDecoration:"line-through"},inserted:{borderBottom:"1px dotted #ebebff",textDecoration:"none"},italic:{fontStyle:"italic"},important:{fontWeight:"bold",color:"#aaaaca"},bold:{fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid #7676f4",OutlineOffset:".4em"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#262631"},".line-numbers .line-numbers-rows > span:before":{color:"#393949"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0))"}}},4457:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",background:"black",color:"white",boxShadow:"-.3em 0 0 .3em black, .3em 0 0 .3em black"},'pre[class*="language-"]':{fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:".4em .8em",margin:".5em 0",overflow:"auto",background:'url(\'data:image/svg+xml;charset=utf-8,%0D%0A%0D%0A%0D%0A<%2Fsvg>\')',backgroundSize:"1em 1em"},':not(pre) > code[class*="language-"]':{padding:".2em",borderRadius:".3em",boxShadow:"none",whiteSpace:"normal"},comment:{color:"#aaa"},prolog:{color:"#aaa"},doctype:{color:"#aaa"},cdata:{color:"#aaa"},punctuation:{color:"#999"},namespace:{Opacity:".7"},property:{color:"#0cf"},tag:{color:"#0cf"},boolean:{color:"#0cf"},number:{color:"#0cf"},constant:{color:"#0cf"},symbol:{color:"#0cf"},selector:{color:"yellow"},"attr-name":{color:"yellow"},string:{color:"yellow"},char:{color:"yellow"},builtin:{color:"yellow"},operator:{color:"yellowgreen"},entity:{color:"yellowgreen",cursor:"help"},url:{color:"yellowgreen"},".language-css .token.string":{color:"yellowgreen"},variable:{color:"yellowgreen"},inserted:{color:"yellowgreen"},atrule:{color:"deeppink"},"attr-value":{color:"deeppink"},keyword:{color:"deeppink"},regex:{color:"orange"},important:{color:"orange",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},deleted:{color:"red"},"pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix)":{backgroundColor:"rgba(255, 0, 0, .3)",display:"inline"},"pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix)":{backgroundColor:"rgba(255, 0, 0, .3)",display:"inline"},"pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix)":{backgroundColor:"rgba(0, 255, 128, .3)",display:"inline"},"pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix)":{backgroundColor:"rgba(0, 255, 128, .3)",display:"inline"}}},9447:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#393A34",fontFamily:'"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",fontSize:".9em",lineHeight:"1.2em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#393A34",fontFamily:'"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",fontSize:".9em",lineHeight:"1.2em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",border:"1px solid #dddddd",backgroundColor:"white"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{background:"#b3d4fc"},'pre[class*="language-"] ::-moz-selection':{background:"#b3d4fc"},'code[class*="language-"]::-moz-selection':{background:"#b3d4fc"},'code[class*="language-"] ::-moz-selection':{background:"#b3d4fc"},'pre[class*="language-"]::selection':{background:"#b3d4fc"},'pre[class*="language-"] ::selection':{background:"#b3d4fc"},'code[class*="language-"]::selection':{background:"#b3d4fc"},'code[class*="language-"] ::selection':{background:"#b3d4fc"},':not(pre) > code[class*="language-"]':{padding:".2em",paddingTop:"1px",paddingBottom:"1px",background:"#f8f8f8",border:"1px solid #dddddd"},comment:{color:"#999988",fontStyle:"italic"},prolog:{color:"#999988",fontStyle:"italic"},doctype:{color:"#999988",fontStyle:"italic"},cdata:{color:"#999988",fontStyle:"italic"},namespace:{Opacity:".7"},string:{color:"#e3116c"},"attr-value":{color:"#e3116c"},punctuation:{color:"#393A34"},operator:{color:"#393A34"},entity:{color:"#36acaa"},url:{color:"#36acaa"},symbol:{color:"#36acaa"},number:{color:"#36acaa"},boolean:{color:"#36acaa"},variable:{color:"#36acaa"},constant:{color:"#36acaa"},property:{color:"#36acaa"},regex:{color:"#36acaa"},inserted:{color:"#36acaa"},atrule:{color:"#00a4db"},keyword:{color:"#00a4db"},"attr-name":{color:"#00a4db"},".language-autohotkey .token.selector":{color:"#00a4db"},function:{color:"#9a050f",fontWeight:"bold"},deleted:{color:"#9a050f"},".language-autohotkey .token.tag":{color:"#9a050f"},tag:{color:"#00009f"},selector:{color:"#00009f"},".language-autohotkey .token.keyword":{color:"#00009f"},important:{fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},8868:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#ebdbb2",fontFamily:'Consolas, Monaco, "Andale Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#ebdbb2",fontFamily:'Consolas, Monaco, "Andale Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",background:"#1d2021"},'pre[class*="language-"]::-moz-selection':{color:"#fbf1c7",background:"#7c6f64"},'pre[class*="language-"] ::-moz-selection':{color:"#fbf1c7",background:"#7c6f64"},'code[class*="language-"]::-moz-selection':{color:"#fbf1c7",background:"#7c6f64"},'code[class*="language-"] ::-moz-selection':{color:"#fbf1c7",background:"#7c6f64"},'pre[class*="language-"]::selection':{color:"#fbf1c7",background:"#7c6f64"},'pre[class*="language-"] ::selection':{color:"#fbf1c7",background:"#7c6f64"},'code[class*="language-"]::selection':{color:"#fbf1c7",background:"#7c6f64"},'code[class*="language-"] ::selection':{color:"#fbf1c7",background:"#7c6f64"},':not(pre) > code[class*="language-"]':{background:"#1d2021",padding:"0.1em",borderRadius:"0.3em"},comment:{color:"#a89984"},prolog:{color:"#a89984"},cdata:{color:"#a89984"},delimiter:{color:"#fb4934"},boolean:{color:"#fb4934"},keyword:{color:"#fb4934"},selector:{color:"#fb4934"},important:{color:"#fb4934"},atrule:{color:"#fb4934"},operator:{color:"#a89984"},punctuation:{color:"#a89984"},"attr-name":{color:"#a89984"},tag:{color:"#fabd2f"},"tag.punctuation":{color:"#fabd2f"},doctype:{color:"#fabd2f"},builtin:{color:"#fabd2f"},entity:{color:"#d3869b"},number:{color:"#d3869b"},symbol:{color:"#d3869b"},property:{color:"#fb4934"},constant:{color:"#fb4934"},variable:{color:"#fb4934"},string:{color:"#b8bb26"},char:{color:"#b8bb26"},"attr-value":{color:"#a89984"},"attr-value.punctuation":{color:"#a89984"},url:{color:"#b8bb26",textDecoration:"underline"},function:{color:"#fabd2f"},regex:{background:"#b8bb26"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{background:"#a89984"},deleted:{background:"#fb4934"}}},6303:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#3c3836",fontFamily:'Consolas, Monaco, "Andale Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#3c3836",fontFamily:'Consolas, Monaco, "Andale Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",background:"#f9f5d7"},'pre[class*="language-"]::-moz-selection':{color:"#282828",background:"#a89984"},'pre[class*="language-"] ::-moz-selection':{color:"#282828",background:"#a89984"},'code[class*="language-"]::-moz-selection':{color:"#282828",background:"#a89984"},'code[class*="language-"] ::-moz-selection':{color:"#282828",background:"#a89984"},'pre[class*="language-"]::selection':{color:"#282828",background:"#a89984"},'pre[class*="language-"] ::selection':{color:"#282828",background:"#a89984"},'code[class*="language-"]::selection':{color:"#282828",background:"#a89984"},'code[class*="language-"] ::selection':{color:"#282828",background:"#a89984"},':not(pre) > code[class*="language-"]':{background:"#f9f5d7",padding:"0.1em",borderRadius:"0.3em"},comment:{color:"#7c6f64"},prolog:{color:"#7c6f64"},cdata:{color:"#7c6f64"},delimiter:{color:"#9d0006"},boolean:{color:"#9d0006"},keyword:{color:"#9d0006"},selector:{color:"#9d0006"},important:{color:"#9d0006"},atrule:{color:"#9d0006"},operator:{color:"#7c6f64"},punctuation:{color:"#7c6f64"},"attr-name":{color:"#7c6f64"},tag:{color:"#b57614"},"tag.punctuation":{color:"#b57614"},doctype:{color:"#b57614"},builtin:{color:"#b57614"},entity:{color:"#8f3f71"},number:{color:"#8f3f71"},symbol:{color:"#8f3f71"},property:{color:"#9d0006"},constant:{color:"#9d0006"},variable:{color:"#9d0006"},string:{color:"#797403"},char:{color:"#797403"},"attr-value":{color:"#7c6f64"},"attr-value.punctuation":{color:"#7c6f64"},url:{color:"#797403",textDecoration:"underline"},function:{color:"#b57614"},regex:{background:"#797403"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{background:"#7c6f64"},deleted:{background:"#9d0006"}}},457:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={"code[class*='language-']":{color:"#d6e7ff",background:"#030314",textShadow:"none",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',fontSize:"1em",lineHeight:"1.5",letterSpacing:".2px",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",textAlign:"left",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},"pre[class*='language-']":{color:"#d6e7ff",background:"#030314",textShadow:"none",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',fontSize:"1em",lineHeight:"1.5",letterSpacing:".2px",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",textAlign:"left",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",border:"1px solid #2a4555",borderRadius:"5px",padding:"1.5em 1em",margin:"1em 0",overflow:"auto"},"pre[class*='language-']::-moz-selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"pre[class*='language-'] ::-moz-selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"code[class*='language-']::-moz-selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"code[class*='language-'] ::-moz-selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"pre[class*='language-']::selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"pre[class*='language-'] ::selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"code[class*='language-']::selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},"code[class*='language-'] ::selection":{color:"inherit",background:"#1d3b54",textShadow:"none"},":not(pre) > code[class*='language-']":{color:"#f0f6f6",background:"#2a4555",padding:"0.2em 0.3em",borderRadius:"0.2em",boxDecorationBreak:"clone"},comment:{color:"#446e69"},prolog:{color:"#446e69"},doctype:{color:"#446e69"},cdata:{color:"#446e69"},punctuation:{color:"#d6b007"},property:{color:"#d6e7ff"},tag:{color:"#d6e7ff"},boolean:{color:"#d6e7ff"},number:{color:"#d6e7ff"},constant:{color:"#d6e7ff"},symbol:{color:"#d6e7ff"},deleted:{color:"#d6e7ff"},selector:{color:"#e60067"},"attr-name":{color:"#e60067"},builtin:{color:"#e60067"},inserted:{color:"#e60067"},string:{color:"#49c6ec"},char:{color:"#49c6ec"},operator:{color:"#ec8e01",background:"transparent"},entity:{color:"#ec8e01",background:"transparent"},url:{color:"#ec8e01",background:"transparent"},".language-css .token.string":{color:"#ec8e01",background:"transparent"},".style .token.string":{color:"#ec8e01",background:"transparent"},atrule:{color:"#0fe468"},"attr-value":{color:"#0fe468"},keyword:{color:"#0fe468"},function:{color:"#78f3e9"},"class-name":{color:"#78f3e9"},regex:{color:"#d6e7ff"},important:{color:"#d6e7ff"},variable:{color:"#d6e7ff"}}},8616:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{fontFamily:'"Fira Mono", Menlo, Monaco, "Lucida Console", "Courier New", Courier, monospace',fontSize:"16px",lineHeight:"1.375",direction:"ltr",textAlign:"left",wordSpacing:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordBreak:"break-all",wordWrap:"break-word",background:"#322931",color:"#b9b5b8"},'pre[class*="language-"]':{fontFamily:'"Fira Mono", Menlo, Monaco, "Lucida Console", "Courier New", Courier, monospace',fontSize:"16px",lineHeight:"1.375",direction:"ltr",textAlign:"left",wordSpacing:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordBreak:"break-all",wordWrap:"break-word",background:"#322931",color:"#b9b5b8",padding:"1em",margin:".5em 0",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},':not(pre) > code[class*="language-"]':{padding:".1em",borderRadius:".3em"},comment:{color:"#797379"},prolog:{color:"#797379"},doctype:{color:"#797379"},cdata:{color:"#797379"},punctuation:{color:"#b9b5b8"},".namespace":{Opacity:".7"},null:{color:"#fd8b19"},operator:{color:"#fd8b19"},boolean:{color:"#fd8b19"},number:{color:"#fd8b19"},property:{color:"#fdcc59"},tag:{color:"#1290bf"},string:{color:"#149b93"},selector:{color:"#c85e7c"},"attr-name":{color:"#fd8b19"},entity:{color:"#149b93",cursor:"help"},url:{color:"#149b93"},".language-css .token.string":{color:"#149b93"},".style .token.string":{color:"#149b93"},"attr-value":{color:"#8fc13e"},keyword:{color:"#8fc13e"},control:{color:"#8fc13e"},directive:{color:"#8fc13e"},unit:{color:"#8fc13e"},statement:{color:"#149b93"},regex:{color:"#149b93"},atrule:{color:"#149b93"},placeholder:{color:"#1290bf"},variable:{color:"#1290bf"},important:{color:"#dd464c",fontWeight:"bold"},"pre > code.highlight":{Outline:".4em solid red",OutlineOffset:".4em"}}},4283:function(e,t,n){"use strict";var o=n(4836);Object.defineProperty(t,"pJ",{enumerable:!0,get:function(){return r.default}}),o(n(7833)),o(n(3352)),o(n(4457)),o(n(1836)),o(n(9698)),o(n(9623)),o(n(9343)),o(n(5570)),o(n(4400));var r=o(n(4441));o(n(1518)),o(n(68)),o(n(7032)),o(n(3611)),o(n(9500)),o(n(4560)),o(n(3498)),o(n(1535)),o(n(7638)),o(n(6777)),o(n(5002)),o(n(465)),o(n(8129)),o(n(9447)),o(n(8868)),o(n(6303)),o(n(457)),o(n(8616)),o(n(5587)),o(n(1074)),o(n(6526)),o(n(3357)),o(n(2894)),o(n(7822)),o(n(5875)),o(n(9477)),o(n(966)),o(n(3362)),o(n(8154)),o(n(2884)),o(n(6732)),o(n(5901)),o(n(5004)),o(n(4104))},5587:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f8f8f2",background:"none",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f8f8f2",background:"#263E52",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em"},':not(pre) > code[class*="language-"]':{background:"#263E52",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#5c98cd"},prolog:{color:"#5c98cd"},doctype:{color:"#5c98cd"},cdata:{color:"#5c98cd"},punctuation:{color:"#f8f8f2"},".namespace":{Opacity:".7"},property:{color:"#F05E5D"},tag:{color:"#F05E5D"},constant:{color:"#F05E5D"},symbol:{color:"#F05E5D"},deleted:{color:"#F05E5D"},boolean:{color:"#BC94F9"},number:{color:"#BC94F9"},selector:{color:"#FCFCD6"},"attr-name":{color:"#FCFCD6"},string:{color:"#FCFCD6"},char:{color:"#FCFCD6"},builtin:{color:"#FCFCD6"},inserted:{color:"#FCFCD6"},operator:{color:"#f8f8f2"},entity:{color:"#f8f8f2",cursor:"help"},url:{color:"#f8f8f2"},".language-css .token.string":{color:"#f8f8f2"},".style .token.string":{color:"#f8f8f2"},variable:{color:"#f8f8f2"},atrule:{color:"#66D8EF"},"attr-value":{color:"#66D8EF"},function:{color:"#66D8EF"},"class-name":{color:"#66D8EF"},keyword:{color:"#6EB26E"},regex:{color:"#F05E5D"},important:{color:"#F05E5D",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},1074:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#eee",background:"#2f2f2f",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#eee",background:"#2f2f2f",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",overflow:"auto",position:"relative",margin:"0.5em 0",padding:"1.25em 1em"},'code[class*="language-"]::-moz-selection':{background:"#363636"},'pre[class*="language-"]::-moz-selection':{background:"#363636"},'code[class*="language-"] ::-moz-selection':{background:"#363636"},'pre[class*="language-"] ::-moz-selection':{background:"#363636"},'code[class*="language-"]::selection':{background:"#363636"},'pre[class*="language-"]::selection':{background:"#363636"},'code[class*="language-"] ::selection':{background:"#363636"},'pre[class*="language-"] ::selection':{background:"#363636"},':not(pre) > code[class*="language-"]':{whiteSpace:"normal",borderRadius:"0.2em",padding:"0.1em"},".language-css > code":{color:"#fd9170"},".language-sass > code":{color:"#fd9170"},".language-scss > code":{color:"#fd9170"},'[class*="language-"] .namespace':{Opacity:"0.7"},atrule:{color:"#c792ea"},"attr-name":{color:"#ffcb6b"},"attr-value":{color:"#a5e844"},attribute:{color:"#a5e844"},boolean:{color:"#c792ea"},builtin:{color:"#ffcb6b"},cdata:{color:"#80cbc4"},char:{color:"#80cbc4"},class:{color:"#ffcb6b"},"class-name":{color:"#f2ff00"},comment:{color:"#616161"},constant:{color:"#c792ea"},deleted:{color:"#ff6666"},doctype:{color:"#616161"},entity:{color:"#ff6666"},function:{color:"#c792ea"},hexcode:{color:"#f2ff00"},id:{color:"#c792ea",fontWeight:"bold"},important:{color:"#c792ea",fontWeight:"bold"},inserted:{color:"#80cbc4"},keyword:{color:"#c792ea"},number:{color:"#fd9170"},operator:{color:"#89ddff"},prolog:{color:"#616161"},property:{color:"#80cbc4"},"pseudo-class":{color:"#a5e844"},"pseudo-element":{color:"#a5e844"},punctuation:{color:"#89ddff"},regex:{color:"#f2ff00"},selector:{color:"#ff6666"},string:{color:"#a5e844"},symbol:{color:"#c792ea"},tag:{color:"#ff6666"},unit:{color:"#fd9170"},url:{color:"#ff6666"},variable:{color:"#ff6666"}}},6526:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#90a4ae",background:"#fafafa",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#90a4ae",background:"#fafafa",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",overflow:"auto",position:"relative",margin:"0.5em 0",padding:"1.25em 1em"},'code[class*="language-"]::-moz-selection':{background:"#cceae7",color:"#263238"},'pre[class*="language-"]::-moz-selection':{background:"#cceae7",color:"#263238"},'code[class*="language-"] ::-moz-selection':{background:"#cceae7",color:"#263238"},'pre[class*="language-"] ::-moz-selection':{background:"#cceae7",color:"#263238"},'code[class*="language-"]::selection':{background:"#cceae7",color:"#263238"},'pre[class*="language-"]::selection':{background:"#cceae7",color:"#263238"},'code[class*="language-"] ::selection':{background:"#cceae7",color:"#263238"},'pre[class*="language-"] ::selection':{background:"#cceae7",color:"#263238"},':not(pre) > code[class*="language-"]':{whiteSpace:"normal",borderRadius:"0.2em",padding:"0.1em"},".language-css > code":{color:"#f76d47"},".language-sass > code":{color:"#f76d47"},".language-scss > code":{color:"#f76d47"},'[class*="language-"] .namespace':{Opacity:"0.7"},atrule:{color:"#7c4dff"},"attr-name":{color:"#39adb5"},"attr-value":{color:"#f6a434"},attribute:{color:"#f6a434"},boolean:{color:"#7c4dff"},builtin:{color:"#39adb5"},cdata:{color:"#39adb5"},char:{color:"#39adb5"},class:{color:"#39adb5"},"class-name":{color:"#6182b8"},comment:{color:"#aabfc9"},constant:{color:"#7c4dff"},deleted:{color:"#e53935"},doctype:{color:"#aabfc9"},entity:{color:"#e53935"},function:{color:"#7c4dff"},hexcode:{color:"#f76d47"},id:{color:"#7c4dff",fontWeight:"bold"},important:{color:"#7c4dff",fontWeight:"bold"},inserted:{color:"#39adb5"},keyword:{color:"#7c4dff"},number:{color:"#f76d47"},operator:{color:"#39adb5"},prolog:{color:"#aabfc9"},property:{color:"#39adb5"},"pseudo-class":{color:"#f6a434"},"pseudo-element":{color:"#f6a434"},punctuation:{color:"#39adb5"},regex:{color:"#6182b8"},selector:{color:"#e53935"},string:{color:"#f6a434"},symbol:{color:"#7c4dff"},tag:{color:"#e53935"},unit:{color:"#f76d47"},url:{color:"#e53935"},variable:{color:"#e53935"}}},3357:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#c3cee3",background:"#263238",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",color:"#c3cee3",background:"#263238",fontFamily:"Roboto Mono, monospace",fontSize:"1em",lineHeight:"1.5em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",overflow:"auto",position:"relative",margin:"0.5em 0",padding:"1.25em 1em"},'code[class*="language-"]::-moz-selection':{background:"#363636"},'pre[class*="language-"]::-moz-selection':{background:"#363636"},'code[class*="language-"] ::-moz-selection':{background:"#363636"},'pre[class*="language-"] ::-moz-selection':{background:"#363636"},'code[class*="language-"]::selection':{background:"#363636"},'pre[class*="language-"]::selection':{background:"#363636"},'code[class*="language-"] ::selection':{background:"#363636"},'pre[class*="language-"] ::selection':{background:"#363636"},':not(pre) > code[class*="language-"]':{whiteSpace:"normal",borderRadius:"0.2em",padding:"0.1em"},".language-css > code":{color:"#fd9170"},".language-sass > code":{color:"#fd9170"},".language-scss > code":{color:"#fd9170"},'[class*="language-"] .namespace':{Opacity:"0.7"},atrule:{color:"#c792ea"},"attr-name":{color:"#ffcb6b"},"attr-value":{color:"#c3e88d"},attribute:{color:"#c3e88d"},boolean:{color:"#c792ea"},builtin:{color:"#ffcb6b"},cdata:{color:"#80cbc4"},char:{color:"#80cbc4"},class:{color:"#ffcb6b"},"class-name":{color:"#f2ff00"},color:{color:"#f2ff00"},comment:{color:"#546e7a"},constant:{color:"#c792ea"},deleted:{color:"#f07178"},doctype:{color:"#546e7a"},entity:{color:"#f07178"},function:{color:"#c792ea"},hexcode:{color:"#f2ff00"},id:{color:"#c792ea",fontWeight:"bold"},important:{color:"#c792ea",fontWeight:"bold"},inserted:{color:"#80cbc4"},keyword:{color:"#c792ea",fontStyle:"italic"},number:{color:"#fd9170"},operator:{color:"#89ddff"},prolog:{color:"#546e7a"},property:{color:"#80cbc4"},"pseudo-class":{color:"#c3e88d"},"pseudo-element":{color:"#c3e88d"},punctuation:{color:"#89ddff"},regex:{color:"#f2ff00"},selector:{color:"#f07178"},string:{color:"#c3e88d"},symbol:{color:"#c792ea"},tag:{color:"#f07178"},unit:{color:"#f07178"},url:{color:"#fd9170"},variable:{color:"#f07178"}}},2894:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#d6deeb",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",fontSize:"1em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"white",fontFamily:'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",fontSize:"1em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",background:"#011627"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"]::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"]::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"] ::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},':not(pre) > code[class*="language-"]':{color:"white",background:"#011627",padding:"0.1em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"rgb(99, 119, 119)",fontStyle:"italic"},prolog:{color:"rgb(99, 119, 119)",fontStyle:"italic"},cdata:{color:"rgb(99, 119, 119)",fontStyle:"italic"},punctuation:{color:"rgb(199, 146, 234)"},".namespace":{color:"rgb(178, 204, 214)"},deleted:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"},symbol:{color:"rgb(128, 203, 196)"},property:{color:"rgb(128, 203, 196)"},tag:{color:"rgb(127, 219, 202)"},operator:{color:"rgb(127, 219, 202)"},keyword:{color:"rgb(127, 219, 202)"},boolean:{color:"rgb(255, 88, 116)"},number:{color:"rgb(247, 140, 108)"},constant:{color:"rgb(130, 170, 255)"},function:{color:"rgb(130, 170, 255)"},builtin:{color:"rgb(130, 170, 255)"},char:{color:"rgb(130, 170, 255)"},selector:{color:"rgb(199, 146, 234)",fontStyle:"italic"},doctype:{color:"rgb(199, 146, 234)",fontStyle:"italic"},"attr-name":{color:"rgb(173, 219, 103)",fontStyle:"italic"},inserted:{color:"rgb(173, 219, 103)",fontStyle:"italic"},string:{color:"rgb(173, 219, 103)"},url:{color:"rgb(173, 219, 103)"},entity:{color:"rgb(173, 219, 103)"},".language-css .token.string":{color:"rgb(173, 219, 103)"},".style .token.string":{color:"rgb(173, 219, 103)"},"class-name":{color:"rgb(255, 203, 139)"},atrule:{color:"rgb(255, 203, 139)"},"attr-value":{color:"rgb(255, 203, 139)"},regex:{color:"rgb(214, 222, 235)"},important:{color:"rgb(214, 222, 235)",fontWeight:"bold"},variable:{color:"rgb(214, 222, 235)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},7822:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f8f8f2",background:"none",fontFamily:"\"Fira Code\", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f8f8f2",background:"#2E3440",fontFamily:"\"Fira Code\", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em"},':not(pre) > code[class*="language-"]':{background:"#2E3440",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#636f88"},prolog:{color:"#636f88"},doctype:{color:"#636f88"},cdata:{color:"#636f88"},punctuation:{color:"#81A1C1"},".namespace":{Opacity:".7"},property:{color:"#81A1C1"},tag:{color:"#81A1C1"},constant:{color:"#81A1C1"},symbol:{color:"#81A1C1"},deleted:{color:"#81A1C1"},number:{color:"#B48EAD"},boolean:{color:"#81A1C1"},selector:{color:"#A3BE8C"},"attr-name":{color:"#A3BE8C"},string:{color:"#A3BE8C"},char:{color:"#A3BE8C"},builtin:{color:"#A3BE8C"},inserted:{color:"#A3BE8C"},operator:{color:"#81A1C1"},entity:{color:"#81A1C1",cursor:"help"},url:{color:"#81A1C1"},".language-css .token.string":{color:"#81A1C1"},".style .token.string":{color:"#81A1C1"},variable:{color:"#81A1C1"},atrule:{color:"#88C0D0"},"attr-value":{color:"#88C0D0"},function:{color:"#88C0D0"},"class-name":{color:"#88C0D0"},keyword:{color:"#81A1C1"},regex:{color:"#EBCB8B"},important:{color:"#EBCB8B",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},1836:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f8f8f2",background:"none",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f8f8f2",background:"#272822",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em"},':not(pre) > code[class*="language-"]':{background:"#272822",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#8292a2"},prolog:{color:"#8292a2"},doctype:{color:"#8292a2"},cdata:{color:"#8292a2"},punctuation:{color:"#f8f8f2"},namespace:{Opacity:".7"},property:{color:"#f92672"},tag:{color:"#f92672"},constant:{color:"#f92672"},symbol:{color:"#f92672"},deleted:{color:"#f92672"},boolean:{color:"#ae81ff"},number:{color:"#ae81ff"},selector:{color:"#a6e22e"},"attr-name":{color:"#a6e22e"},string:{color:"#a6e22e"},char:{color:"#a6e22e"},builtin:{color:"#a6e22e"},inserted:{color:"#a6e22e"},operator:{color:"#f8f8f2"},entity:{color:"#f8f8f2",cursor:"help"},url:{color:"#f8f8f2"},".language-css .token.string":{color:"#f8f8f2"},".style .token.string":{color:"#f8f8f2"},variable:{color:"#f8f8f2"},atrule:{color:"#e6db74"},"attr-value":{color:"#e6db74"},function:{color:"#e6db74"},"class-name":{color:"#e6db74"},keyword:{color:"#66d9ef"},regex:{color:"#fd971f"},important:{color:"#fd971f",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},5875:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{background:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:'"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{background:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:'"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",borderRadius:"0.3em"},'code[class*="language-"]::-moz-selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'code[class*="language-"] *::-moz-selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'pre[class*="language-"] *::-moz-selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'code[class*="language-"]::selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'code[class*="language-"] *::selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},'pre[class*="language-"] *::selection':{background:"hsl(220, 13%, 28%)",color:"inherit",textShadow:"none"},':not(pre) > code[class*="language-"]':{padding:"0.2em 0.3em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"hsl(220, 10%, 40%)",fontStyle:"italic"},prolog:{color:"hsl(220, 10%, 40%)"},cdata:{color:"hsl(220, 10%, 40%)"},doctype:{color:"hsl(220, 14%, 71%)"},punctuation:{color:"hsl(220, 14%, 71%)"},entity:{color:"hsl(220, 14%, 71%)",cursor:"help"},"attr-name":{color:"hsl(29, 54%, 61%)"},"class-name":{color:"hsl(29, 54%, 61%)"},boolean:{color:"hsl(29, 54%, 61%)"},constant:{color:"hsl(29, 54%, 61%)"},number:{color:"hsl(29, 54%, 61%)"},atrule:{color:"hsl(29, 54%, 61%)"},keyword:{color:"hsl(286, 60%, 67%)"},property:{color:"hsl(355, 65%, 65%)"},tag:{color:"hsl(355, 65%, 65%)"},symbol:{color:"hsl(355, 65%, 65%)"},deleted:{color:"hsl(355, 65%, 65%)"},important:{color:"hsl(355, 65%, 65%)"},selector:{color:"hsl(95, 38%, 62%)"},string:{color:"hsl(95, 38%, 62%)"},char:{color:"hsl(95, 38%, 62%)"},builtin:{color:"hsl(95, 38%, 62%)"},inserted:{color:"hsl(95, 38%, 62%)"},regex:{color:"hsl(95, 38%, 62%)"},"attr-value":{color:"hsl(95, 38%, 62%)"},"attr-value > .token.punctuation":{color:"hsl(95, 38%, 62%)"},variable:{color:"hsl(207, 82%, 66%)"},operator:{color:"hsl(207, 82%, 66%)"},function:{color:"hsl(207, 82%, 66%)"},url:{color:"hsl(187, 47%, 55%)"},"attr-value > .token.punctuation.attr-equals":{color:"hsl(220, 14%, 71%)"},"special-attr > .token.attr-value > .token.value.css":{color:"hsl(220, 14%, 71%)"},".language-css .token.selector":{color:"hsl(355, 65%, 65%)"},".language-css .token.property":{color:"hsl(220, 14%, 71%)"},".language-css .token.function":{color:"hsl(187, 47%, 55%)"},".language-css .token.url > .token.function":{color:"hsl(187, 47%, 55%)"},".language-css .token.url > .token.string.url":{color:"hsl(95, 38%, 62%)"},".language-css .token.important":{color:"hsl(286, 60%, 67%)"},".language-css .token.atrule .token.rule":{color:"hsl(286, 60%, 67%)"},".language-javascript .token.operator":{color:"hsl(286, 60%, 67%)"},".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":{color:"hsl(5, 48%, 51%)"},".language-json .token.operator":{color:"hsl(220, 14%, 71%)"},".language-json .token.null.keyword":{color:"hsl(29, 54%, 61%)"},".language-markdown .token.url":{color:"hsl(220, 14%, 71%)"},".language-markdown .token.url > .token.operator":{color:"hsl(220, 14%, 71%)"},".language-markdown .token.url-reference.url > .token.string":{color:"hsl(220, 14%, 71%)"},".language-markdown .token.url > .token.content":{color:"hsl(207, 82%, 66%)"},".language-markdown .token.url > .token.url":{color:"hsl(187, 47%, 55%)"},".language-markdown .token.url-reference.url":{color:"hsl(187, 47%, 55%)"},".language-markdown .token.blockquote.punctuation":{color:"hsl(220, 10%, 40%)",fontStyle:"italic"},".language-markdown .token.hr.punctuation":{color:"hsl(220, 10%, 40%)",fontStyle:"italic"},".language-markdown .token.code-snippet":{color:"hsl(95, 38%, 62%)"},".language-markdown .token.bold .token.content":{color:"hsl(29, 54%, 61%)"},".language-markdown .token.italic .token.content":{color:"hsl(286, 60%, 67%)"},".language-markdown .token.strike .token.content":{color:"hsl(355, 65%, 65%)"},".language-markdown .token.strike .token.punctuation":{color:"hsl(355, 65%, 65%)"},".language-markdown .token.list.punctuation":{color:"hsl(355, 65%, 65%)"},".language-markdown .token.title.important > .token.punctuation":{color:"hsl(355, 65%, 65%)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},namespace:{Opacity:"0.8"},"token.tab:not(:empty):before":{color:"hsla(220, 14%, 71%, 0.15)",textShadow:"none"},"token.cr:before":{color:"hsla(220, 14%, 71%, 0.15)",textShadow:"none"},"token.lf:before":{color:"hsla(220, 14%, 71%, 0.15)",textShadow:"none"},"token.space:before":{color:"hsla(220, 14%, 71%, 0.15)",textShadow:"none"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item":{marginRight:"0.4em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 9%, 55%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 9%, 55%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 9%, 55%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus":{background:"hsl(220, 13%, 28%)",color:"hsl(220, 14%, 71%)"},".line-highlight.line-highlight":{background:"hsla(220, 100%, 80%, 0.04)"},".line-highlight.line-highlight:before":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 14%, 71%)",padding:"0.1em 0.6em",borderRadius:"0.3em",boxShadow:"0 2px 0 0 rgba(0, 0, 0, 0.2)"},".line-highlight.line-highlight[data-end]:after":{background:"hsl(220, 13%, 26%)",color:"hsl(220, 14%, 71%)",padding:"0.1em 0.6em",borderRadius:"0.3em",boxShadow:"0 2px 0 0 rgba(0, 0, 0, 0.2)"},"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":{backgroundColor:"hsla(220, 100%, 80%, 0.04)"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"hsla(220, 14%, 71%, 0.15)"},".command-line .command-line-prompt":{borderRightColor:"hsla(220, 14%, 71%, 0.15)"},".line-numbers .line-numbers-rows > span:before":{color:"hsl(220, 14%, 45%)"},".command-line .command-line-prompt > span:before":{color:"hsl(220, 14%, 45%)"},".rainbow-braces .token.token.punctuation.brace-level-1":{color:"hsl(355, 65%, 65%)"},".rainbow-braces .token.token.punctuation.brace-level-5":{color:"hsl(355, 65%, 65%)"},".rainbow-braces .token.token.punctuation.brace-level-9":{color:"hsl(355, 65%, 65%)"},".rainbow-braces .token.token.punctuation.brace-level-2":{color:"hsl(95, 38%, 62%)"},".rainbow-braces .token.token.punctuation.brace-level-6":{color:"hsl(95, 38%, 62%)"},".rainbow-braces .token.token.punctuation.brace-level-10":{color:"hsl(95, 38%, 62%)"},".rainbow-braces .token.token.punctuation.brace-level-3":{color:"hsl(207, 82%, 66%)"},".rainbow-braces .token.token.punctuation.brace-level-7":{color:"hsl(207, 82%, 66%)"},".rainbow-braces .token.token.punctuation.brace-level-11":{color:"hsl(207, 82%, 66%)"},".rainbow-braces .token.token.punctuation.brace-level-4":{color:"hsl(286, 60%, 67%)"},".rainbow-braces .token.token.punctuation.brace-level-8":{color:"hsl(286, 60%, 67%)"},".rainbow-braces .token.token.punctuation.brace-level-12":{color:"hsl(286, 60%, 67%)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)":{backgroundColor:"hsla(353, 100%, 66%, 0.15)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)":{backgroundColor:"hsla(353, 100%, 66%, 0.15)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)":{backgroundColor:"hsla(137, 100%, 55%, 0.15)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)":{backgroundColor:"hsla(137, 100%, 55%, 0.15)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},".prism-previewer.prism-previewer:before":{borderColor:"hsl(224, 13%, 17%)"},".prism-previewer-gradient.prism-previewer-gradient div":{borderColor:"hsl(224, 13%, 17%)",borderRadius:"0.3em"},".prism-previewer-color.prism-previewer-color:before":{borderRadius:"0.3em"},".prism-previewer-easing.prism-previewer-easing:before":{borderRadius:"0.3em"},".prism-previewer.prism-previewer:after":{borderTopColor:"hsl(224, 13%, 17%)"},".prism-previewer-flipped.prism-previewer-flipped.after":{borderBottomColor:"hsl(224, 13%, 17%)"},".prism-previewer-angle.prism-previewer-angle:before":{background:"hsl(219, 13%, 22%)"},".prism-previewer-time.prism-previewer-time:before":{background:"hsl(219, 13%, 22%)"},".prism-previewer-easing.prism-previewer-easing":{background:"hsl(219, 13%, 22%)"},".prism-previewer-angle.prism-previewer-angle circle":{stroke:"hsl(220, 14%, 71%)",strokeOpacity:"1"},".prism-previewer-time.prism-previewer-time circle":{stroke:"hsl(220, 14%, 71%)",strokeOpacity:"1"},".prism-previewer-easing.prism-previewer-easing circle":{stroke:"hsl(220, 14%, 71%)",fill:"transparent"},".prism-previewer-easing.prism-previewer-easing path":{stroke:"hsl(220, 14%, 71%)"},".prism-previewer-easing.prism-previewer-easing line":{stroke:"hsl(220, 14%, 71%)"}}},9477:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{background:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)",fontFamily:'"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{background:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)",fontFamily:'"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:"0.5em 0",overflow:"auto",borderRadius:"0.3em"},'code[class*="language-"]::-moz-selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'code[class*="language-"] *::-moz-selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'pre[class*="language-"] *::-moz-selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'code[class*="language-"]::selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'code[class*="language-"] *::selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},'pre[class*="language-"] *::selection':{background:"hsl(230, 1%, 90%)",color:"inherit"},':not(pre) > code[class*="language-"]':{padding:"0.2em 0.3em",borderRadius:"0.3em",whiteSpace:"normal"},comment:{color:"hsl(230, 4%, 64%)",fontStyle:"italic"},prolog:{color:"hsl(230, 4%, 64%)"},cdata:{color:"hsl(230, 4%, 64%)"},doctype:{color:"hsl(230, 8%, 24%)"},punctuation:{color:"hsl(230, 8%, 24%)"},entity:{color:"hsl(230, 8%, 24%)",cursor:"help"},"attr-name":{color:"hsl(35, 99%, 36%)"},"class-name":{color:"hsl(35, 99%, 36%)"},boolean:{color:"hsl(35, 99%, 36%)"},constant:{color:"hsl(35, 99%, 36%)"},number:{color:"hsl(35, 99%, 36%)"},atrule:{color:"hsl(35, 99%, 36%)"},keyword:{color:"hsl(301, 63%, 40%)"},property:{color:"hsl(5, 74%, 59%)"},tag:{color:"hsl(5, 74%, 59%)"},symbol:{color:"hsl(5, 74%, 59%)"},deleted:{color:"hsl(5, 74%, 59%)"},important:{color:"hsl(5, 74%, 59%)"},selector:{color:"hsl(119, 34%, 47%)"},string:{color:"hsl(119, 34%, 47%)"},char:{color:"hsl(119, 34%, 47%)"},builtin:{color:"hsl(119, 34%, 47%)"},inserted:{color:"hsl(119, 34%, 47%)"},regex:{color:"hsl(119, 34%, 47%)"},"attr-value":{color:"hsl(119, 34%, 47%)"},"attr-value > .token.punctuation":{color:"hsl(119, 34%, 47%)"},variable:{color:"hsl(221, 87%, 60%)"},operator:{color:"hsl(221, 87%, 60%)"},function:{color:"hsl(221, 87%, 60%)"},url:{color:"hsl(198, 99%, 37%)"},"attr-value > .token.punctuation.attr-equals":{color:"hsl(230, 8%, 24%)"},"special-attr > .token.attr-value > .token.value.css":{color:"hsl(230, 8%, 24%)"},".language-css .token.selector":{color:"hsl(5, 74%, 59%)"},".language-css .token.property":{color:"hsl(230, 8%, 24%)"},".language-css .token.function":{color:"hsl(198, 99%, 37%)"},".language-css .token.url > .token.function":{color:"hsl(198, 99%, 37%)"},".language-css .token.url > .token.string.url":{color:"hsl(119, 34%, 47%)"},".language-css .token.important":{color:"hsl(301, 63%, 40%)"},".language-css .token.atrule .token.rule":{color:"hsl(301, 63%, 40%)"},".language-javascript .token.operator":{color:"hsl(301, 63%, 40%)"},".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":{color:"hsl(344, 84%, 43%)"},".language-json .token.operator":{color:"hsl(230, 8%, 24%)"},".language-json .token.null.keyword":{color:"hsl(35, 99%, 36%)"},".language-markdown .token.url":{color:"hsl(230, 8%, 24%)"},".language-markdown .token.url > .token.operator":{color:"hsl(230, 8%, 24%)"},".language-markdown .token.url-reference.url > .token.string":{color:"hsl(230, 8%, 24%)"},".language-markdown .token.url > .token.content":{color:"hsl(221, 87%, 60%)"},".language-markdown .token.url > .token.url":{color:"hsl(198, 99%, 37%)"},".language-markdown .token.url-reference.url":{color:"hsl(198, 99%, 37%)"},".language-markdown .token.blockquote.punctuation":{color:"hsl(230, 4%, 64%)",fontStyle:"italic"},".language-markdown .token.hr.punctuation":{color:"hsl(230, 4%, 64%)",fontStyle:"italic"},".language-markdown .token.code-snippet":{color:"hsl(119, 34%, 47%)"},".language-markdown .token.bold .token.content":{color:"hsl(35, 99%, 36%)"},".language-markdown .token.italic .token.content":{color:"hsl(301, 63%, 40%)"},".language-markdown .token.strike .token.content":{color:"hsl(5, 74%, 59%)"},".language-markdown .token.strike .token.punctuation":{color:"hsl(5, 74%, 59%)"},".language-markdown .token.list.punctuation":{color:"hsl(5, 74%, 59%)"},".language-markdown .token.title.important > .token.punctuation":{color:"hsl(5, 74%, 59%)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},namespace:{Opacity:"0.8"},"token.tab:not(:empty):before":{color:"hsla(230, 8%, 24%, 0.2)"},"token.cr:before":{color:"hsla(230, 8%, 24%, 0.2)"},"token.lf:before":{color:"hsla(230, 8%, 24%, 0.2)"},"token.space:before":{color:"hsla(230, 8%, 24%, 0.2)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item":{marginRight:"0.4em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 6%, 44%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 6%, 44%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 6%, 44%)",padding:"0.1em 0.4em",borderRadius:"0.3em"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus":{background:"hsl(230, 1%, 78%)",color:"hsl(230, 8%, 24%)"},".line-highlight.line-highlight":{background:"hsla(230, 8%, 24%, 0.05)"},".line-highlight.line-highlight:before":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 8%, 24%)",padding:"0.1em 0.6em",borderRadius:"0.3em",boxShadow:"0 2px 0 0 rgba(0, 0, 0, 0.2)"},".line-highlight.line-highlight[data-end]:after":{background:"hsl(230, 1%, 90%)",color:"hsl(230, 8%, 24%)",padding:"0.1em 0.6em",borderRadius:"0.3em",boxShadow:"0 2px 0 0 rgba(0, 0, 0, 0.2)"},"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":{backgroundColor:"hsla(230, 8%, 24%, 0.05)"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"hsla(230, 8%, 24%, 0.2)"},".command-line .command-line-prompt":{borderRightColor:"hsla(230, 8%, 24%, 0.2)"},".line-numbers .line-numbers-rows > span:before":{color:"hsl(230, 1%, 62%)"},".command-line .command-line-prompt > span:before":{color:"hsl(230, 1%, 62%)"},".rainbow-braces .token.token.punctuation.brace-level-1":{color:"hsl(5, 74%, 59%)"},".rainbow-braces .token.token.punctuation.brace-level-5":{color:"hsl(5, 74%, 59%)"},".rainbow-braces .token.token.punctuation.brace-level-9":{color:"hsl(5, 74%, 59%)"},".rainbow-braces .token.token.punctuation.brace-level-2":{color:"hsl(119, 34%, 47%)"},".rainbow-braces .token.token.punctuation.brace-level-6":{color:"hsl(119, 34%, 47%)"},".rainbow-braces .token.token.punctuation.brace-level-10":{color:"hsl(119, 34%, 47%)"},".rainbow-braces .token.token.punctuation.brace-level-3":{color:"hsl(221, 87%, 60%)"},".rainbow-braces .token.token.punctuation.brace-level-7":{color:"hsl(221, 87%, 60%)"},".rainbow-braces .token.token.punctuation.brace-level-11":{color:"hsl(221, 87%, 60%)"},".rainbow-braces .token.token.punctuation.brace-level-4":{color:"hsl(301, 63%, 40%)"},".rainbow-braces .token.token.punctuation.brace-level-8":{color:"hsl(301, 63%, 40%)"},".rainbow-braces .token.token.punctuation.brace-level-12":{color:"hsl(301, 63%, 40%)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)":{backgroundColor:"hsla(353, 100%, 66%, 0.15)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)":{backgroundColor:"hsla(353, 100%, 66%, 0.15)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection":{backgroundColor:"hsla(353, 95%, 66%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)":{backgroundColor:"hsla(137, 100%, 55%, 0.15)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)":{backgroundColor:"hsla(137, 100%, 55%, 0.15)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection":{backgroundColor:"hsla(135, 73%, 55%, 0.25)"},".prism-previewer.prism-previewer:before":{borderColor:"hsl(0, 0, 95%)"},".prism-previewer-gradient.prism-previewer-gradient div":{borderColor:"hsl(0, 0, 95%)",borderRadius:"0.3em"},".prism-previewer-color.prism-previewer-color:before":{borderRadius:"0.3em"},".prism-previewer-easing.prism-previewer-easing:before":{borderRadius:"0.3em"},".prism-previewer.prism-previewer:after":{borderTopColor:"hsl(0, 0, 95%)"},".prism-previewer-flipped.prism-previewer-flipped.after":{borderBottomColor:"hsl(0, 0, 95%)"},".prism-previewer-angle.prism-previewer-angle:before":{background:"hsl(0, 0%, 100%)"},".prism-previewer-time.prism-previewer-time:before":{background:"hsl(0, 0%, 100%)"},".prism-previewer-easing.prism-previewer-easing":{background:"hsl(0, 0%, 100%)"},".prism-previewer-angle.prism-previewer-angle circle":{stroke:"hsl(230, 8%, 24%)",strokeOpacity:"1"},".prism-previewer-time.prism-previewer-time circle":{stroke:"hsl(230, 8%, 24%)",strokeOpacity:"1"},".prism-previewer-easing.prism-previewer-easing circle":{stroke:"hsl(230, 8%, 24%)",fill:"transparent"},".prism-previewer-easing.prism-previewer-easing path":{stroke:"hsl(230, 8%, 24%)"},".prism-previewer-easing.prism-previewer-easing line":{stroke:"hsl(230, 8%, 24%)"}}},966:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordBreak:"break-all",wordWrap:"break-word",fontFamily:'Menlo, Monaco, "Courier New", monospace',fontSize:"15px",lineHeight:"1.5",color:"#dccf8f",textShadow:"0"},'pre[class*="language-"]':{MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordBreak:"break-all",wordWrap:"break-word",fontFamily:'Menlo, Monaco, "Courier New", monospace',fontSize:"15px",lineHeight:"1.5",color:"#DCCF8F",textShadow:"0",borderRadius:"5px",border:"1px solid #000",background:"#181914 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQACQYGBgcGCQcHCQ0IBwgNDwsJCQsPEQ4ODw4OERENDg4ODg0RERQUFhQUERoaHBwaGiYmJiYmKysrKysrKysrKwEJCAgJCgkMCgoMDwwODA8TDg4ODhMVDg4PDg4VGhMRERERExoXGhYWFhoXHR0aGh0dJCQjJCQrKysrKysrKysr/8AAEQgAjACMAwEiAAIRAQMRAf/EAF4AAQEBAAAAAAAAAAAAAAAAAAABBwEBAQAAAAAAAAAAAAAAAAAAAAIQAAEDAwIHAQEAAAAAAAAAAADwAREhYaExkUFRcYGxwdHh8REBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AyGFEjHaBS2fDDs2zkhKmBKktb7km+ZwwCnXPkLVmCTMItj6AXFxRS465/BTnkAJvkLkJe+7AKKoi2AtRS2zuAWsCb5GOlBN8gKfmuGHZ8MFqIth3ALmFoFwbwKWyAlTAp17uKqBvgBD8sM4fTjhvAhkzhaRkBMKBrfs7jGPIpzy7gFrAqnC0C0gB0EWwBDW2cBVQwm+QtPpa3wBO3sVvszCnLAhkzgL5/RLf13cLQd8/AGlu0Cb5HTx9KuAEieGJEdcehS3eRTp2ATdt3CpIm+QtZwAhROXFeb7swp/ahaM3kBE/jSIUBc/AWrgBN8uNFAl+b7sAXFxFn2YLUU5Ns7gFX8C4ib+hN8gFWXwK3bZglxEJm+gKdciLPsFV/TClsgJUwKJ5FVA7tvIFrfZhVfGJDcsCKaYgAqv6YRbE+RWOWBtu7+AL3yRalXLyKqAIIfk+zARbDgFyEsncYwJvlgFRW+GEWntIi2P0BooyFxcNr8Ep3+ANLbMO+QyhvbiqdgC0kVvgUUiLYgBS2QtPbiVI1/sgOmG9uO+Y8DW+7jS2zAOnj6O2BndwuIAUtkdRN8gFoK3wwXMQyZwHVbClsuNLd4E3yAUR6FVDBR+BafQGt93LVMxJTv8ABts4CVLhcfYWsCb5kC9/BHdU8CLYFY5bMAd+eX9MGthhpbA1vu4B7+RKkaW2Yq4AQtVBBFsAJU/AuIXBhN8gGWnstefhiZyWvLAEnbYS1uzSFP6Jvn4Baxx70JKkQojLib5AVTey1jjgkKJGO0AKWyOm7N7cSpgSpAdPH0Tfd/gp1z5C1ZgKqN9J2wFxcUUuAFLZAm+QC0Fb4YUVRFsAOvj4KW2dwtYE3yAWk/wS/PLMKfmuGHZ8MAXF/Ja32Yi5haAKWz4Ydm2cSpgU693Atb7km+Zwwh+WGcPpxw3gAkzCLY+iYUDW/Z3Adc/gpzyFrAqnALkJe+7DoItgAtRS2zuKqGE3yAx0oJvkdvYrfZmALURbDuL5/RLf13cAuDeBS2RpbtAm+QFVA3wR+3fUtFHoBDJnC0jIXH0HWsgMY8inPLuOkd9chp4z20ALQLSA8cI9jYAIa2zjzjBd8gRafS1vgiUho/kAKcsCGTOGWvoOpkAtB3z8Hm8x2Ff5ADp4+lXAlIvcmwH/2Q==') repeat left top",padding:"12px",overflow:"auto"},'pre > code[class*="language-"]':{fontSize:"1em"},':not(pre) > code[class*="language-"]':{borderRadius:"5px",border:"1px solid #000",color:"#DCCF8F",background:"#181914 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQACQYGBgcGCQcHCQ0IBwgNDwsJCQsPEQ4ODw4OERENDg4ODg0RERQUFhQUERoaHBwaGiYmJiYmKysrKysrKysrKwEJCAgJCgkMCgoMDwwODA8TDg4ODhMVDg4PDg4VGhMRERERExoXGhYWFhoXHR0aGh0dJCQjJCQrKysrKysrKysr/8AAEQgAjACMAwEiAAIRAQMRAf/EAF4AAQEBAAAAAAAAAAAAAAAAAAABBwEBAQAAAAAAAAAAAAAAAAAAAAIQAAEDAwIHAQEAAAAAAAAAAADwAREhYaExkUFRcYGxwdHh8REBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AyGFEjHaBS2fDDs2zkhKmBKktb7km+ZwwCnXPkLVmCTMItj6AXFxRS465/BTnkAJvkLkJe+7AKKoi2AtRS2zuAWsCb5GOlBN8gKfmuGHZ8MFqIth3ALmFoFwbwKWyAlTAp17uKqBvgBD8sM4fTjhvAhkzhaRkBMKBrfs7jGPIpzy7gFrAqnC0C0gB0EWwBDW2cBVQwm+QtPpa3wBO3sVvszCnLAhkzgL5/RLf13cLQd8/AGlu0Cb5HTx9KuAEieGJEdcehS3eRTp2ATdt3CpIm+QtZwAhROXFeb7swp/ahaM3kBE/jSIUBc/AWrgBN8uNFAl+b7sAXFxFn2YLUU5Ns7gFX8C4ib+hN8gFWXwK3bZglxEJm+gKdciLPsFV/TClsgJUwKJ5FVA7tvIFrfZhVfGJDcsCKaYgAqv6YRbE+RWOWBtu7+AL3yRalXLyKqAIIfk+zARbDgFyEsncYwJvlgFRW+GEWntIi2P0BooyFxcNr8Ep3+ANLbMO+QyhvbiqdgC0kVvgUUiLYgBS2QtPbiVI1/sgOmG9uO+Y8DW+7jS2zAOnj6O2BndwuIAUtkdRN8gFoK3wwXMQyZwHVbClsuNLd4E3yAUR6FVDBR+BafQGt93LVMxJTv8ABts4CVLhcfYWsCb5kC9/BHdU8CLYFY5bMAd+eX9MGthhpbA1vu4B7+RKkaW2Yq4AQtVBBFsAJU/AuIXBhN8gGWnstefhiZyWvLAEnbYS1uzSFP6Jvn4Baxx70JKkQojLib5AVTey1jjgkKJGO0AKWyOm7N7cSpgSpAdPH0Tfd/gp1z5C1ZgKqN9J2wFxcUUuAFLZAm+QC0Fb4YUVRFsAOvj4KW2dwtYE3yAWk/wS/PLMKfmuGHZ8MAXF/Ja32Yi5haAKWz4Ydm2cSpgU693Atb7km+Zwwh+WGcPpxw3gAkzCLY+iYUDW/Z3Adc/gpzyFrAqnALkJe+7DoItgAtRS2zuKqGE3yAx0oJvkdvYrfZmALURbDuL5/RLf13cAuDeBS2RpbtAm+QFVA3wR+3fUtFHoBDJnC0jIXH0HWsgMY8inPLuOkd9chp4z20ALQLSA8cI9jYAIa2zjzjBd8gRafS1vgiUho/kAKcsCGTOGWvoOpkAtB3z8Hm8x2Ff5ADp4+lXAlIvcmwH/2Q==') repeat left top",padding:"2px 6px"},namespace:{Opacity:".7"},comment:{color:"#586e75",fontStyle:"italic"},prolog:{color:"#586e75",fontStyle:"italic"},doctype:{color:"#586e75",fontStyle:"italic"},cdata:{color:"#586e75",fontStyle:"italic"},number:{color:"#b89859"},string:{color:"#468966"},char:{color:"#468966"},builtin:{color:"#468966"},inserted:{color:"#468966"},"attr-name":{color:"#b89859"},operator:{color:"#dccf8f"},entity:{color:"#dccf8f",cursor:"help"},url:{color:"#dccf8f"},".language-css .token.string":{color:"#dccf8f"},".style .token.string":{color:"#dccf8f"},selector:{color:"#859900"},regex:{color:"#859900"},atrule:{color:"#cb4b16"},keyword:{color:"#cb4b16"},"attr-value":{color:"#468966"},function:{color:"#b58900"},variable:{color:"#b58900"},placeholder:{color:"#b58900"},property:{color:"#b89859"},tag:{color:"#ffb03b"},boolean:{color:"#b89859"},constant:{color:"#b89859"},symbol:{color:"#b89859"},important:{color:"#dc322f"},statement:{color:"#dc322f"},deleted:{color:"#dc322f"},punctuation:{color:"#dccf8f"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},5570:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"black",background:"none",textShadow:"0 1px white",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"black",background:"#f5f2f0",textShadow:"0 1px white",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"#b3d4fc"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#b3d4fc"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"#b3d4fc"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"#b3d4fc"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#b3d4fc"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"#b3d4fc"},'code[class*="language-"]::selection':{textShadow:"none",background:"#b3d4fc"},'code[class*="language-"] ::selection':{textShadow:"none",background:"#b3d4fc"},':not(pre) > code[class*="language-"]':{background:"#f5f2f0",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"slategray"},prolog:{color:"slategray"},doctype:{color:"slategray"},cdata:{color:"slategray"},punctuation:{color:"#999"},namespace:{Opacity:".7"},property:{color:"#905"},tag:{color:"#905"},boolean:{color:"#905"},number:{color:"#905"},constant:{color:"#905"},symbol:{color:"#905"},deleted:{color:"#905"},selector:{color:"#690"},"attr-name":{color:"#690"},string:{color:"#690"},char:{color:"#690"},builtin:{color:"#690"},inserted:{color:"#690"},operator:{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)"},entity:{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)",cursor:"help"},url:{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)"},".language-css .token.string":{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)"},".style .token.string":{color:"#9a6e3a",background:"hsla(0, 0%, 100%, .5)"},atrule:{color:"#07a"},"attr-value":{color:"#07a"},keyword:{color:"#07a"},function:{color:"#DD4A68"},"class-name":{color:"#DD4A68"},regex:{color:"#e90"},important:{color:"#e90",fontWeight:"bold"},variable:{color:"#e90"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},3362:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={"code[class*='language-']":{color:"#9efeff",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",fontFamily:"'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontWeight:"400",fontSize:"17px",lineHeight:"25px",letterSpacing:"0.5px",textShadow:"0 1px #222245"},"pre[class*='language-']":{color:"#9efeff",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",fontFamily:"'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontWeight:"400",fontSize:"17px",lineHeight:"25px",letterSpacing:"0.5px",textShadow:"0 1px #222245",padding:"2em",margin:"0.5em 0",overflow:"auto",background:"#1e1e3f"},"pre[class*='language-']::-moz-selection":{color:"inherit",background:"#a599e9"},"pre[class*='language-'] ::-moz-selection":{color:"inherit",background:"#a599e9"},"code[class*='language-']::-moz-selection":{color:"inherit",background:"#a599e9"},"code[class*='language-'] ::-moz-selection":{color:"inherit",background:"#a599e9"},"pre[class*='language-']::selection":{color:"inherit",background:"#a599e9"},"pre[class*='language-'] ::selection":{color:"inherit",background:"#a599e9"},"code[class*='language-']::selection":{color:"inherit",background:"#a599e9"},"code[class*='language-'] ::selection":{color:"inherit",background:"#a599e9"},":not(pre) > code[class*='language-']":{background:"#1e1e3f",padding:"0.1em",borderRadius:"0.3em"},"":{fontWeight:"400"},comment:{color:"#b362ff"},prolog:{color:"#b362ff"},cdata:{color:"#b362ff"},delimiter:{color:"#ff9d00"},keyword:{color:"#ff9d00"},selector:{color:"#ff9d00"},important:{color:"#ff9d00"},atrule:{color:"#ff9d00"},operator:{color:"rgb(255, 180, 84)",background:"none"},"attr-name":{color:"rgb(255, 180, 84)"},punctuation:{color:"#ffffff"},boolean:{color:"rgb(255, 98, 140)"},tag:{color:"rgb(255, 157, 0)"},"tag.punctuation":{color:"rgb(255, 157, 0)"},doctype:{color:"rgb(255, 157, 0)"},builtin:{color:"rgb(255, 157, 0)"},entity:{color:"#6897bb",background:"none"},symbol:{color:"#6897bb"},number:{color:"#ff628c"},property:{color:"#ff628c"},constant:{color:"#ff628c"},variable:{color:"#ff628c"},string:{color:"#a5ff90"},char:{color:"#a5ff90"},"attr-value":{color:"#a5c261"},"attr-value.punctuation":{color:"#a5c261"},"attr-value.punctuation:first-child":{color:"#a9b7c6"},url:{color:"#287bde",textDecoration:"underline",background:"none"},function:{color:"rgb(250, 208, 0)"},regex:{background:"#364135"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{background:"#00ff00"},deleted:{background:"#ff000d"},"code.language-css .token.property":{color:"#a9b7c6"},"code.language-css .token.property + .token.punctuation":{color:"#a9b7c6"},"code.language-css .token.id":{color:"#ffc66d"},"code.language-css .token.selector > .token.class":{color:"#ffc66d"},"code.language-css .token.selector > .token.attribute":{color:"#ffc66d"},"code.language-css .token.selector > .token.pseudo-class":{color:"#ffc66d"},"code.language-css .token.selector > .token.pseudo-element":{color:"#ffc66d"},"class-name":{color:"#fb94ff"},".language-css .token.string":{background:"none"},".style .token.string":{background:"none"},".line-highlight.line-highlight":{marginTop:"36px",background:"linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent)"},".line-highlight.line-highlight:before":{content:"''"},".line-highlight.line-highlight[data-end]:after":{content:"''"}}},8154:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#839496",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#839496",textShadow:"0 1px rgba(0, 0, 0, 0.3)",fontFamily:"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em",background:"#002b36"},':not(pre) > code[class*="language-"]':{background:"#002b36",padding:".1em",borderRadius:".3em"},comment:{color:"#586e75"},prolog:{color:"#586e75"},doctype:{color:"#586e75"},cdata:{color:"#586e75"},punctuation:{color:"#93a1a1"},".namespace":{Opacity:".7"},property:{color:"#268bd2"},keyword:{color:"#268bd2"},tag:{color:"#268bd2"},"class-name":{color:"#FFFFB6",textDecoration:"underline"},boolean:{color:"#b58900"},constant:{color:"#b58900"},symbol:{color:"#dc322f"},deleted:{color:"#dc322f"},number:{color:"#859900"},selector:{color:"#859900"},"attr-name":{color:"#859900"},string:{color:"#859900"},char:{color:"#859900"},builtin:{color:"#859900"},inserted:{color:"#859900"},variable:{color:"#268bd2"},operator:{color:"#EDEDED"},function:{color:"#268bd2"},regex:{color:"#E9C062"},important:{color:"#fd971f",fontWeight:"bold"},entity:{color:"#FFFFB6",cursor:"help"},url:{color:"#96CBFE"},".language-css .token.string":{color:"#87C38A"},".style .token.string":{color:"#87C38A"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},atrule:{color:"#F9EE98"},"attr-value":{color:"#F9EE98"}}},9698:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#657b83",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#657b83",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",borderRadius:"0.3em",backgroundColor:"#fdf6e3"},'pre[class*="language-"]::-moz-selection':{background:"#073642"},'pre[class*="language-"] ::-moz-selection':{background:"#073642"},'code[class*="language-"]::-moz-selection':{background:"#073642"},'code[class*="language-"] ::-moz-selection':{background:"#073642"},'pre[class*="language-"]::selection':{background:"#073642"},'pre[class*="language-"] ::selection':{background:"#073642"},'code[class*="language-"]::selection':{background:"#073642"},'code[class*="language-"] ::selection':{background:"#073642"},':not(pre) > code[class*="language-"]':{backgroundColor:"#fdf6e3",padding:".1em",borderRadius:".3em"},comment:{color:"#93a1a1"},prolog:{color:"#93a1a1"},doctype:{color:"#93a1a1"},cdata:{color:"#93a1a1"},punctuation:{color:"#586e75"},namespace:{Opacity:".7"},property:{color:"#268bd2"},tag:{color:"#268bd2"},boolean:{color:"#268bd2"},number:{color:"#268bd2"},constant:{color:"#268bd2"},symbol:{color:"#268bd2"},deleted:{color:"#268bd2"},selector:{color:"#2aa198"},"attr-name":{color:"#2aa198"},string:{color:"#2aa198"},char:{color:"#2aa198"},builtin:{color:"#2aa198"},url:{color:"#2aa198"},inserted:{color:"#2aa198"},entity:{color:"#657b83",background:"#eee8d5",cursor:"help"},atrule:{color:"#859900"},"attr-value":{color:"#859900"},keyword:{color:"#859900"},function:{color:"#b58900"},"class-name":{color:"#b58900"},regex:{color:"#cb4b16"},important:{color:"#cb4b16",fontWeight:"bold"},variable:{color:"#cb4b16"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},2884:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",backgroundColor:"transparent !important",backgroundImage:"linear-gradient(to bottom, #2a2139 75%, #34294f)"},':not(pre) > code[class*="language-"]':{backgroundColor:"transparent !important",backgroundImage:"linear-gradient(to bottom, #2a2139 75%, #34294f)",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#8e8e8e"},"block-comment":{color:"#8e8e8e"},prolog:{color:"#8e8e8e"},doctype:{color:"#8e8e8e"},cdata:{color:"#8e8e8e"},punctuation:{color:"#ccc"},tag:{color:"#e2777a"},"attr-name":{color:"#e2777a"},namespace:{color:"#e2777a"},number:{color:"#e2777a"},unit:{color:"#e2777a"},hexcode:{color:"#e2777a"},deleted:{color:"#e2777a"},property:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"},selector:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"},"function-name":{color:"#6196cc"},boolean:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"},"selector.id":{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"},function:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"},"class-name":{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"},constant:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},symbol:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},important:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575",fontWeight:"bold"},atrule:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"},keyword:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"},"selector.class":{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"},builtin:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"},string:{color:"#f87c32"},char:{color:"#f87c32"},"attr-value":{color:"#f87c32"},regex:{color:"#f87c32"},variable:{color:"#f87c32"},operator:{color:"#67cdcc"},entity:{color:"#67cdcc",cursor:"help"},url:{color:"#67cdcc"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{color:"green"}}},9623:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#ccc",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#ccc",background:"#2d2d2d",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto"},':not(pre) > code[class*="language-"]':{background:"#2d2d2d",padding:".1em",borderRadius:".3em",whiteSpace:"normal"},comment:{color:"#999"},"block-comment":{color:"#999"},prolog:{color:"#999"},doctype:{color:"#999"},cdata:{color:"#999"},punctuation:{color:"#ccc"},tag:{color:"#e2777a"},"attr-name":{color:"#e2777a"},namespace:{color:"#e2777a"},deleted:{color:"#e2777a"},"function-name":{color:"#6196cc"},boolean:{color:"#f08d49"},number:{color:"#f08d49"},function:{color:"#f08d49"},property:{color:"#f8c555"},"class-name":{color:"#f8c555"},constant:{color:"#f8c555"},symbol:{color:"#f8c555"},selector:{color:"#cc99cd"},important:{color:"#cc99cd",fontWeight:"bold"},atrule:{color:"#cc99cd"},keyword:{color:"#cc99cd"},builtin:{color:"#cc99cd"},string:{color:"#7ec699"},char:{color:"#7ec699"},"attr-value":{color:"#7ec699"},regex:{color:"#7ec699"},variable:{color:"#7ec699"},operator:{color:"#67cdcc"},entity:{color:"#67cdcc",cursor:"help"},url:{color:"#67cdcc"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},inserted:{color:"green"}}},9343:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"white",background:"none",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",textShadow:"0 -.1em .2em black",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"white",background:"hsl(0, 0%, 8%)",fontFamily:"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",fontSize:"1em",textAlign:"left",textShadow:"0 -.1em .2em black",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",borderRadius:".5em",border:".3em solid hsl(0, 0%, 33%)",boxShadow:"1px 1px .5em black inset",margin:".5em 0",overflow:"auto",padding:"1em"},':not(pre) > code[class*="language-"]':{background:"hsl(0, 0%, 8%)",borderRadius:".3em",border:".13em solid hsl(0, 0%, 33%)",boxShadow:"1px 1px .3em -.1em black inset",padding:".15em .2em .05em",whiteSpace:"normal"},'pre[class*="language-"]::-moz-selection':{background:"hsla(0, 0%, 93%, 0.15)",textShadow:"none"},'pre[class*="language-"]::selection':{background:"hsla(0, 0%, 93%, 0.15)",textShadow:"none"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'code[class*="language-"]::selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},'code[class*="language-"] ::selection':{textShadow:"none",background:"hsla(0, 0%, 93%, 0.15)"},comment:{color:"hsl(0, 0%, 47%)"},prolog:{color:"hsl(0, 0%, 47%)"},doctype:{color:"hsl(0, 0%, 47%)"},cdata:{color:"hsl(0, 0%, 47%)"},punctuation:{Opacity:".7"},namespace:{Opacity:".7"},tag:{color:"hsl(14, 58%, 55%)"},boolean:{color:"hsl(14, 58%, 55%)"},number:{color:"hsl(14, 58%, 55%)"},deleted:{color:"hsl(14, 58%, 55%)"},keyword:{color:"hsl(53, 89%, 79%)"},property:{color:"hsl(53, 89%, 79%)"},selector:{color:"hsl(53, 89%, 79%)"},constant:{color:"hsl(53, 89%, 79%)"},symbol:{color:"hsl(53, 89%, 79%)"},builtin:{color:"hsl(53, 89%, 79%)"},"attr-name":{color:"hsl(76, 21%, 52%)"},"attr-value":{color:"hsl(76, 21%, 52%)"},string:{color:"hsl(76, 21%, 52%)"},char:{color:"hsl(76, 21%, 52%)"},operator:{color:"hsl(76, 21%, 52%)"},entity:{color:"hsl(76, 21%, 52%)",cursor:"help"},url:{color:"hsl(76, 21%, 52%)"},".language-css .token.string":{color:"hsl(76, 21%, 52%)"},".style .token.string":{color:"hsl(76, 21%, 52%)"},variable:{color:"hsl(76, 21%, 52%)"},inserted:{color:"hsl(76, 21%, 52%)"},atrule:{color:"hsl(218, 22%, 55%)"},regex:{color:"hsl(42, 75%, 65%)"},important:{color:"hsl(42, 75%, 65%)",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},".language-markup .token.tag":{color:"hsl(33, 33%, 52%)"},".language-markup .token.attr-name":{color:"hsl(33, 33%, 52%)"},".language-markup .token.punctuation":{color:"hsl(33, 33%, 52%)"},"":{position:"relative",zIndex:"1"},".line-highlight.line-highlight":{background:"linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0))",borderBottom:"1px dashed hsl(0, 0%, 33%)",borderTop:"1px dashed hsl(0, 0%, 33%)",marginTop:"0.75em",zIndex:"0"},".line-highlight.line-highlight:before":{backgroundColor:"hsl(215, 15%, 59%)",color:"hsl(24, 20%, 95%)"},".line-highlight.line-highlight[data-end]:after":{backgroundColor:"hsl(215, 15%, 59%)",color:"hsl(24, 20%, 95%)"}}},6732:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#393A34",fontFamily:'"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",fontSize:".9em",lineHeight:"1.2em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]':{color:"#393A34",fontFamily:'"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",fontSize:".9em",lineHeight:"1.2em",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",border:"1px solid #dddddd",backgroundColor:"white"},'pre > code[class*="language-"]':{fontSize:"1em"},'pre[class*="language-"]::-moz-selection':{background:"#C1DEF1"},'pre[class*="language-"] ::-moz-selection':{background:"#C1DEF1"},'code[class*="language-"]::-moz-selection':{background:"#C1DEF1"},'code[class*="language-"] ::-moz-selection':{background:"#C1DEF1"},'pre[class*="language-"]::selection':{background:"#C1DEF1"},'pre[class*="language-"] ::selection':{background:"#C1DEF1"},'code[class*="language-"]::selection':{background:"#C1DEF1"},'code[class*="language-"] ::selection':{background:"#C1DEF1"},':not(pre) > code[class*="language-"]':{padding:".2em",paddingTop:"1px",paddingBottom:"1px",background:"#f8f8f8",border:"1px solid #dddddd"},comment:{color:"#008000",fontStyle:"italic"},prolog:{color:"#008000",fontStyle:"italic"},doctype:{color:"#008000",fontStyle:"italic"},cdata:{color:"#008000",fontStyle:"italic"},namespace:{Opacity:".7"},string:{color:"#A31515"},punctuation:{color:"#393A34"},operator:{color:"#393A34"},url:{color:"#36acaa"},symbol:{color:"#36acaa"},number:{color:"#36acaa"},boolean:{color:"#36acaa"},variable:{color:"#36acaa"},constant:{color:"#36acaa"},inserted:{color:"#36acaa"},atrule:{color:"#0000ff"},keyword:{color:"#0000ff"},"attr-value":{color:"#0000ff"},".language-autohotkey .token.selector":{color:"#0000ff"},".language-json .token.boolean":{color:"#0000ff"},".language-json .token.number":{color:"#0000ff"},'code[class*="language-css"]':{color:"#0000ff"},function:{color:"#393A34"},deleted:{color:"#9a050f"},".language-autohotkey .token.tag":{color:"#9a050f"},selector:{color:"#800000"},".language-autohotkey .token.keyword":{color:"#00009f"},important:{color:"#e90",fontWeight:"bold"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},"class-name":{color:"#2B91AF"},".language-json .token.property":{color:"#2B91AF"},tag:{color:"#800000"},"attr-name":{color:"#ff0000"},property:{color:"#ff0000"},regex:{color:"#ff0000"},entity:{color:"#ff0000"},"directive.tag.tag":{background:"#ffff00",color:"#393A34"},".line-numbers.line-numbers .line-numbers-rows":{borderRightColor:"#a5a5a5"},".line-numbers .line-numbers-rows > span:before":{color:"#2B91AF"},".line-highlight.line-highlight":{background:"linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0))"}}},5901:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'pre[class*="language-"]':{color:"#d4d4d4",fontSize:"13px",textShadow:"none",fontFamily:'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",padding:"1em",margin:".5em 0",overflow:"auto",background:"#1e1e1e"},'code[class*="language-"]':{color:"#d4d4d4",fontSize:"13px",textShadow:"none",fontFamily:'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',direction:"ltr",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",lineHeight:"1.5",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none"},'pre[class*="language-"]::selection':{textShadow:"none",background:"#264F78"},'code[class*="language-"]::selection':{textShadow:"none",background:"#264F78"},'pre[class*="language-"] *::selection':{textShadow:"none",background:"#264F78"},'code[class*="language-"] *::selection':{textShadow:"none",background:"#264F78"},':not(pre) > code[class*="language-"]':{padding:".1em .3em",borderRadius:".3em",color:"#db4c69",background:"#1e1e1e"},".namespace":{Opacity:".7"},"doctype.doctype-tag":{color:"#569CD6"},"doctype.name":{color:"#9cdcfe"},comment:{color:"#6a9955"},prolog:{color:"#6a9955"},punctuation:{color:"#d4d4d4"},".language-html .language-css .token.punctuation":{color:"#d4d4d4"},".language-html .language-javascript .token.punctuation":{color:"#d4d4d4"},property:{color:"#9cdcfe"},tag:{color:"#569cd6"},boolean:{color:"#569cd6"},number:{color:"#b5cea8"},constant:{color:"#9cdcfe"},symbol:{color:"#b5cea8"},inserted:{color:"#b5cea8"},unit:{color:"#b5cea8"},selector:{color:"#d7ba7d"},"attr-name":{color:"#9cdcfe"},string:{color:"#ce9178"},char:{color:"#ce9178"},builtin:{color:"#ce9178"},deleted:{color:"#ce9178"},".language-css .token.string.url":{textDecoration:"underline"},operator:{color:"#d4d4d4"},entity:{color:"#569cd6"},"operator.arrow":{color:"#569CD6"},atrule:{color:"#ce9178"},"atrule.rule":{color:"#c586c0"},"atrule.url":{color:"#9cdcfe"},"atrule.url.function":{color:"#dcdcaa"},"atrule.url.punctuation":{color:"#d4d4d4"},keyword:{color:"#569CD6"},"keyword.module":{color:"#c586c0"},"keyword.control-flow":{color:"#c586c0"},function:{color:"#dcdcaa"},"function.maybe-class-name":{color:"#dcdcaa"},regex:{color:"#d16969"},important:{color:"#569cd6"},italic:{fontStyle:"italic"},"class-name":{color:"#4ec9b0"},"maybe-class-name":{color:"#4ec9b0"},console:{color:"#9cdcfe"},parameter:{color:"#9cdcfe"},interpolation:{color:"#9cdcfe"},"punctuation.interpolation-punctuation":{color:"#569cd6"},variable:{color:"#9cdcfe"},"imports.maybe-class-name":{color:"#9cdcfe"},"exports.maybe-class-name":{color:"#9cdcfe"},escape:{color:"#d7ba7d"},"tag.punctuation":{color:"#808080"},cdata:{color:"#808080"},"attr-value":{color:"#ce9178"},"attr-value.punctuation":{color:"#ce9178"},"attr-value.punctuation.attr-equals":{color:"#d4d4d4"},namespace:{color:"#4ec9b0"},'pre[class*="language-javascript"]':{color:"#9cdcfe"},'code[class*="language-javascript"]':{color:"#9cdcfe"},'pre[class*="language-jsx"]':{color:"#9cdcfe"},'code[class*="language-jsx"]':{color:"#9cdcfe"},'pre[class*="language-typescript"]':{color:"#9cdcfe"},'code[class*="language-typescript"]':{color:"#9cdcfe"},'pre[class*="language-tsx"]':{color:"#9cdcfe"},'code[class*="language-tsx"]':{color:"#9cdcfe"},'pre[class*="language-css"]':{color:"#ce9178"},'code[class*="language-css"]':{color:"#ce9178"},'pre[class*="language-html"]':{color:"#d4d4d4"},'code[class*="language-html"]':{color:"#d4d4d4"},".language-regex .token.anchor":{color:"#dcdcaa"},".language-html .token.punctuation":{color:"#808080"},'pre[class*="language-"] > code[class*="language-"]':{position:"relative",zIndex:"1"},".line-highlight.line-highlight":{background:"#f7ebc6",boxShadow:"inset 5px 0 0 #f7d87c",zIndex:"0"}}},5004:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordWrap:"normal",fontFamily:'Menlo, Monaco, "Courier New", monospace',fontSize:"14px",color:"#76d9e6",textShadow:"none"},'pre[class*="language-"]':{MozTabSize:"2",OTabSize:"2",tabSize:"2",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",whiteSpace:"pre-wrap",wordWrap:"normal",fontFamily:'Menlo, Monaco, "Courier New", monospace',fontSize:"14px",color:"#76d9e6",textShadow:"none",background:"#2a2a2a",padding:"15px",borderRadius:"4px",border:"1px solid #e1e1e8",overflow:"auto",position:"relative"},'pre > code[class*="language-"]':{fontSize:"1em"},':not(pre) > code[class*="language-"]':{background:"#2a2a2a",padding:"0.15em 0.2em 0.05em",borderRadius:".3em",border:"0.13em solid #7a6652",boxShadow:"1px 1px 0.3em -0.1em #000 inset"},'pre[class*="language-"] code':{whiteSpace:"pre",display:"block"},namespace:{Opacity:".7"},comment:{color:"#6f705e"},prolog:{color:"#6f705e"},doctype:{color:"#6f705e"},cdata:{color:"#6f705e"},operator:{color:"#a77afe"},boolean:{color:"#a77afe"},number:{color:"#a77afe"},"attr-name":{color:"#e6d06c"},string:{color:"#e6d06c"},entity:{color:"#e6d06c",cursor:"help"},url:{color:"#e6d06c"},".language-css .token.string":{color:"#e6d06c"},".style .token.string":{color:"#e6d06c"},selector:{color:"#a6e22d"},inserted:{color:"#a6e22d"},atrule:{color:"#ef3b7d"},"attr-value":{color:"#ef3b7d"},keyword:{color:"#ef3b7d"},important:{color:"#ef3b7d",fontWeight:"bold"},deleted:{color:"#ef3b7d"},regex:{color:"#76d9e6"},statement:{color:"#76d9e6",fontWeight:"bold"},placeholder:{color:"#fff"},variable:{color:"#fff"},bold:{fontWeight:"bold"},punctuation:{color:"#bebec5"},italic:{fontStyle:"italic"},"code.language-markup":{color:"#f9f9f9"},"code.language-markup .token.tag":{color:"#ef3b7d"},"code.language-markup .token.attr-name":{color:"#a6e22d"},"code.language-markup .token.attr-value":{color:"#e6d06c"},"code.language-markup .token.style":{color:"#76d9e6"},"code.language-markup .token.script":{color:"#76d9e6"},"code.language-markup .token.script .token.keyword":{color:"#76d9e6"},".line-highlight.line-highlight":{padding:"0",background:"rgba(255, 255, 255, 0.08)"},".line-highlight.line-highlight:before":{padding:"0.2em 0.5em",backgroundColor:"rgba(255, 255, 255, 0.4)",color:"black",height:"1em",lineHeight:"1em",boxShadow:"0 1px 1px rgba(255, 255, 255, 0.7)"},".line-highlight.line-highlight[data-end]:after":{padding:"0.2em 0.5em",backgroundColor:"rgba(255, 255, 255, 0.4)",color:"black",height:"1em",lineHeight:"1em",boxShadow:"0 1px 1px rgba(255, 255, 255, 0.7)"}}},4104:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default={'code[class*="language-"]':{color:"#22da17",fontFamily:"monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",lineHeight:"25px",fontSize:"18px",margin:"5px 0"},'pre[class*="language-"]':{color:"white",fontFamily:"monospace",textAlign:"left",whiteSpace:"pre",wordSpacing:"normal",wordBreak:"normal",wordWrap:"normal",MozTabSize:"4",OTabSize:"4",tabSize:"4",WebkitHyphens:"none",MozHyphens:"none",msHyphens:"none",hyphens:"none",lineHeight:"25px",fontSize:"18px",margin:"0.5em 0",background:"#0a143c",padding:"1em",overflow:"auto"},'pre[class*="language-"] *':{fontFamily:"monospace"},':not(pre) > code[class*="language-"]':{color:"white",background:"#0a143c",padding:"0.1em",borderRadius:"0.3em",whiteSpace:"normal"},'pre[class*="language-"]::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"] ::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"]::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"] ::-moz-selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"]::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'pre[class*="language-"] ::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"]::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},'code[class*="language-"] ::selection':{textShadow:"none",background:"rgba(29, 59, 83, 0.99)"},comment:{color:"rgb(99, 119, 119)",fontStyle:"italic"},prolog:{color:"rgb(99, 119, 119)",fontStyle:"italic"},cdata:{color:"rgb(99, 119, 119)",fontStyle:"italic"},punctuation:{color:"rgb(199, 146, 234)"},".namespace":{color:"rgb(178, 204, 214)"},deleted:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"},symbol:{color:"rgb(128, 203, 196)"},property:{color:"rgb(128, 203, 196)"},tag:{color:"rgb(127, 219, 202)"},operator:{color:"rgb(127, 219, 202)"},keyword:{color:"rgb(127, 219, 202)"},boolean:{color:"rgb(255, 88, 116)"},number:{color:"rgb(247, 140, 108)"},constant:{color:"rgb(34 183 199)"},function:{color:"rgb(34 183 199)"},builtin:{color:"rgb(34 183 199)"},char:{color:"rgb(34 183 199)"},selector:{color:"rgb(199, 146, 234)",fontStyle:"italic"},doctype:{color:"rgb(199, 146, 234)",fontStyle:"italic"},"attr-name":{color:"rgb(173, 219, 103)",fontStyle:"italic"},inserted:{color:"rgb(173, 219, 103)",fontStyle:"italic"},string:{color:"rgb(173, 219, 103)"},url:{color:"rgb(173, 219, 103)"},entity:{color:"rgb(173, 219, 103)"},".language-css .token.string":{color:"rgb(173, 219, 103)"},".style .token.string":{color:"rgb(173, 219, 103)"},"class-name":{color:"rgb(255, 203, 139)"},atrule:{color:"rgb(255, 203, 139)"},"attr-value":{color:"rgb(255, 203, 139)"},regex:{color:"rgb(214, 222, 235)"},important:{color:"rgb(214, 222, 235)",fontWeight:"bold"},variable:{color:"rgb(214, 222, 235)"},bold:{fontWeight:"bold"},italic:{fontStyle:"italic"}}},8152:function(e,t,n){"use strict";function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=Array(t);n1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2?arguments[2]:void 0;return(function(e){if(0===e.length||1===e.length)return e;var t,n=e.join(".");return p[n]||(p[n]=0===(t=e.length)||1===t?e:2===t?[e[0],e[1],"".concat(e[0],".").concat(e[1]),"".concat(e[1],".").concat(e[0])]:3===t?[e[0],e[1],e[2],"".concat(e[0],".").concat(e[1]),"".concat(e[0],".").concat(e[2]),"".concat(e[1],".").concat(e[0]),"".concat(e[1],".").concat(e[2]),"".concat(e[2],".").concat(e[0]),"".concat(e[2],".").concat(e[1]),"".concat(e[0],".").concat(e[1],".").concat(e[2]),"".concat(e[0],".").concat(e[2],".").concat(e[1]),"".concat(e[1],".").concat(e[0],".").concat(e[2]),"".concat(e[1],".").concat(e[2],".").concat(e[0]),"".concat(e[2],".").concat(e[0],".").concat(e[1]),"".concat(e[2],".").concat(e[1],".").concat(e[0])]:t>=4?[e[0],e[1],e[2],e[3],"".concat(e[0],".").concat(e[1]),"".concat(e[0],".").concat(e[2]),"".concat(e[0],".").concat(e[3]),"".concat(e[1],".").concat(e[0]),"".concat(e[1],".").concat(e[2]),"".concat(e[1],".").concat(e[3]),"".concat(e[2],".").concat(e[0]),"".concat(e[2],".").concat(e[1]),"".concat(e[2],".").concat(e[3]),"".concat(e[3],".").concat(e[0]),"".concat(e[3],".").concat(e[1]),"".concat(e[3],".").concat(e[2]),"".concat(e[0],".").concat(e[1],".").concat(e[2]),"".concat(e[0],".").concat(e[1],".").concat(e[3]),"".concat(e[0],".").concat(e[2],".").concat(e[1]),"".concat(e[0],".").concat(e[2],".").concat(e[3]),"".concat(e[0],".").concat(e[3],".").concat(e[1]),"".concat(e[0],".").concat(e[3],".").concat(e[2]),"".concat(e[1],".").concat(e[0],".").concat(e[2]),"".concat(e[1],".").concat(e[0],".").concat(e[3]),"".concat(e[1],".").concat(e[2],".").concat(e[0]),"".concat(e[1],".").concat(e[2],".").concat(e[3]),"".concat(e[1],".").concat(e[3],".").concat(e[0]),"".concat(e[1],".").concat(e[3],".").concat(e[2]),"".concat(e[2],".").concat(e[0],".").concat(e[1]),"".concat(e[2],".").concat(e[0],".").concat(e[3]),"".concat(e[2],".").concat(e[1],".").concat(e[0]),"".concat(e[2],".").concat(e[1],".").concat(e[3]),"".concat(e[2],".").concat(e[3],".").concat(e[0]),"".concat(e[2],".").concat(e[3],".").concat(e[1]),"".concat(e[3],".").concat(e[0],".").concat(e[1]),"".concat(e[3],".").concat(e[0],".").concat(e[2]),"".concat(e[3],".").concat(e[1],".").concat(e[0]),"".concat(e[3],".").concat(e[1],".").concat(e[2]),"".concat(e[3],".").concat(e[2],".").concat(e[0]),"".concat(e[3],".").concat(e[2],".").concat(e[1]),"".concat(e[0],".").concat(e[1],".").concat(e[2],".").concat(e[3]),"".concat(e[0],".").concat(e[1],".").concat(e[3],".").concat(e[2]),"".concat(e[0],".").concat(e[2],".").concat(e[1],".").concat(e[3]),"".concat(e[0],".").concat(e[2],".").concat(e[3],".").concat(e[1]),"".concat(e[0],".").concat(e[3],".").concat(e[1],".").concat(e[2]),"".concat(e[0],".").concat(e[3],".").concat(e[2],".").concat(e[1]),"".concat(e[1],".").concat(e[0],".").concat(e[2],".").concat(e[3]),"".concat(e[1],".").concat(e[0],".").concat(e[3],".").concat(e[2]),"".concat(e[1],".").concat(e[2],".").concat(e[0],".").concat(e[3]),"".concat(e[1],".").concat(e[2],".").concat(e[3],".").concat(e[0]),"".concat(e[1],".").concat(e[3],".").concat(e[0],".").concat(e[2]),"".concat(e[1],".").concat(e[3],".").concat(e[2],".").concat(e[0]),"".concat(e[2],".").concat(e[0],".").concat(e[1],".").concat(e[3]),"".concat(e[2],".").concat(e[0],".").concat(e[3],".").concat(e[1]),"".concat(e[2],".").concat(e[1],".").concat(e[0],".").concat(e[3]),"".concat(e[2],".").concat(e[1],".").concat(e[3],".").concat(e[0]),"".concat(e[2],".").concat(e[3],".").concat(e[0],".").concat(e[1]),"".concat(e[2],".").concat(e[3],".").concat(e[1],".").concat(e[0]),"".concat(e[3],".").concat(e[0],".").concat(e[1],".").concat(e[2]),"".concat(e[3],".").concat(e[0],".").concat(e[2],".").concat(e[1]),"".concat(e[3],".").concat(e[1],".").concat(e[0],".").concat(e[2]),"".concat(e[3],".").concat(e[1],".").concat(e[2],".").concat(e[0]),"".concat(e[3],".").concat(e[2],".").concat(e[0],".").concat(e[1]),"".concat(e[3],".").concat(e[2],".").concat(e[1],".").concat(e[0])]:void 0),p[n]})(e.filter(function(e){return"token"!==e})).reduce(function(e,t){return d(d({},e),n[t])},t)}(l.className,Object.assign({},l.style,void 0===r?{}:r),o)})}else m=d(d({},l),{},{className:l.className.join(" ")});var k=b(n.children);return s.createElement(h,c({key:i},m),k)}}({node:e,stylesheet:n,useInlineStyles:o,key:"code-segement".concat(t)})})}function S(e){return e&&void 0!==e.highlightAuto}var y=n(1215),C=n.n(y),_=(i=C(),l={},function(e){var t=e.language,n=e.children,r=e.style,a=void 0===r?l:r,c=e.customStyle,u=void 0===c?{}:c,d=e.codeTagProps,p=void 0===d?{className:t?"language-".concat(t):void 0,style:g(g({},a['code[class*="language-"]']),a['code[class*="language-'.concat(t,'"]')])}:d,f=e.useInlineStyles,y=void 0===f||f,C=e.showLineNumbers,_=void 0!==C&&C,D=e.showInlineLineNumbers,N=void 0===D||D,I=e.startingLineNumber,O=void 0===I?1:I,x=e.lineNumberContainerStyle,w=e.lineNumberStyle,v=void 0===w?{}:w,F=e.wrapLines,R=e.wrapLongLines,M=void 0!==R&&R,L=e.lineProps,P=e.renderer,B=e.PreTag,H=void 0===B?"pre":B,z=e.CodeTag,U=void 0===z?"code":z,G=e.code,W=void 0===G?(Array.isArray(n)?n[0]:n)||"":G,j=e.astGenerator,Y=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(e,h);j=j||i;var Q=_?s.createElement(b,{containerStyle:x,codeStyle:p.style||{},numberStyle:v,startingLineNumber:O,codeString:W}):null,V=a.hljs||a['pre[class*="language-"]']||{backgroundColor:"#fff"},q=S(j)?"hljs":"prismjs",K=y?Object.assign({},Y,{style:Object.assign({},V,u)}):Object.assign({},Y,{className:Y.className?"".concat(q," ").concat(Y.className):q,style:Object.assign({},u)});if(M?p.style=g(g({},p.style),{},{whiteSpace:"pre-wrap"}):p.style=g(g({},p.style),{},{whiteSpace:"pre"}),!j)return s.createElement(H,K,Q,s.createElement(U,p,W));(void 0===F&&P||M)&&(F=!0),P=P||k;var X=[{type:"text",value:W}],J=function(e){var t=e.astGenerator,n=e.language,o=e.code,r=e.defaultCodeValue;if(S(t)){var a=-1!==t.listLanguages().indexOf(n);return"text"===n?{value:r,language:"text"}:a?t.highlight(n,o):t.highlightAuto(o)}try{return n&&"text"!==n?{value:t.highlight(o,n)}:{value:r}}catch(e){return{value:r}}}({astGenerator:j,language:t,code:W,defaultCodeValue:X});null===J.language&&(J.value=X);var Z=J.value.length+O,$=function(e,t,n,r,a,i,l,s,c){var u,d=function e(t){for(var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],a=0;a2&&void 0!==arguments[2]?arguments[2]:[];return t||i.length>0?function(e,t){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];return A({children:e,lineNumber:t,lineNumberStyle:s,largestLineNumber:l,showInlineLineNumbers:a,lineProps:n,className:o,showLineNumbers:r,wrapLongLines:c})}(e,o,i):function(e,t){if(r&&t&&a){var n=T(s,t,l);e.unshift(E(t,n))}return e}(e,o)}for(;f]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}}e.exports=t,t.displayName="clike",t.aliases=[]},2049:function(e){"use strict";function t(e){var t,n;t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/,e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css,(n=e.languages.markup)&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}e.exports=t,t.displayName="css",t.aliases=[]},6155:function(e){"use strict";function t(e){e.languages.javascript=e.languages.extend("clike",{"class-name":[e.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+(/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|")+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),e.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,e.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:e.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:e.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:e.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:e.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:e.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),e.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:e.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),e.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),e.languages.markup&&(e.languages.markup.tag.addInlined("script","javascript"),e.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),e.languages.js=e.languages.javascript}e.exports=t,t.displayName="javascript",t.aliases=["js"]},2717:function(e){"use strict";function t(e){e.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},e.languages.markup.tag.inside["attr-value"].inside.entity=e.languages.markup.entity,e.languages.markup.doctype.inside["internal-subset"].inside=e.languages.markup,e.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.value.replace(/&/,"&"))}),Object.defineProperty(e.languages.markup.tag,"addInlined",{value:function(t,n){var o={};o["language-"+n]={pattern:/(^$)/i,lookbehind:!0,inside:e.languages[n]},o.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:o}};r["language-"+n]={pattern:/[\s\S]+/,inside:e.languages[n]};var a={};a[t]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,function(){return t}),"i"),lookbehind:!0,greedy:!0,inside:r},e.languages.insertBefore("markup","cdata",a)}}),Object.defineProperty(e.languages.markup.tag,"addAttribute",{value:function(t,n){e.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+t+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[n,"language-"+n],inside:e.languages[n]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),e.languages.html=e.languages.markup,e.languages.mathml=e.languages.markup,e.languages.svg=e.languages.markup,e.languages.xml=e.languages.extend("markup",{}),e.languages.ssml=e.languages.xml,e.languages.atom=e.languages.xml,e.languages.rss=e.languages.xml}e.exports=t,t.displayName="markup",t.aliases=["html","mathml","svg","xml","ssml","atom","rss"]},2992:function(e){"use strict";function t(e){e.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},e.languages.python["string-interpolation"].inside.interpolation.inside.rest=e.languages.python,e.languages.py=e.languages.python}e.exports=t,t.displayName="python",t.aliases=["py"]},166:function(e){"use strict";e.exports=function(e){var t="string"==typeof e?e.charCodeAt(0):e;return t>=97&&t<=122||t>=65&&t<=90}},2783:function(e,t,n){"use strict";var o=n(166),r=n(1250);e.exports=function(e){return o(e)||r(e)}},1250:function(e){"use strict";e.exports=function(e){var t="string"==typeof e?e.charCodeAt(0):e;return t>=48&&t<=57}},9956:function(e){"use strict";e.exports=function(e){var t="string"==typeof e?e.charCodeAt(0):e;return t>=97&&t<=102||t>=65&&t<=70||t>=48&&t<=57}},1e3:function(e){"use strict";var t;e.exports=function(e){var n,o="&"+e+";";return(t=t||document.createElement("i")).innerHTML=o,(59!==(n=t.textContent).charCodeAt(n.length-1)||"semi"===e)&&n!==o&&n}},2921:function(e,t,n){"use strict";var o=n(8223),r=n(7710),a=n(1250),i=n(9956),l=n(2783),s=n(1e3);e.exports=function(e,t){var n,a,i={};for(a in t||(t={}),p)n=t[a],i[a]=null==n?p[a]:n;return(i.position.indent||i.position.start)&&(i.indent=i.position.indent||[],i.position=i.position.start),function(e,t){var n,a,i,p,T,A,k,S,y,C,_,D,N,I,O,x,w,v,F,R,M,L=t.additional,P=t.nonTerminated,B=t.text,H=t.reference,z=t.warning,U=t.textContext,G=t.referenceContext,W=t.warningContext,j=t.position,Y=t.indent||[],Q=e.length,V=0,q=-1,K=j.column||1,X=j.line||1,J="",Z=[];for("string"==typeof L&&(L=L.charCodeAt(0)),v=$(),C=z?function(e,t){var n=$();n.column+=t,n.offset+=t,z.call(W,E[e],n,e)}:d,V--,Q++;++V=55296&&n<=57343||n>1114111?(C(7,R),S=u(65533)):S in r?(C(6,R),S=r[S]):(D="",((a=S)>=1&&a<=8||11===a||a>=13&&a<=31||a>=127&&a<=159||a>=64976&&a<=65007||(65535&a)==65535||(65535&a)==65534)&&C(6,R),S>65535&&(S-=65536,D+=u(S>>>10|55296),S=56320|1023&S),S=D+u(S))):x!==h&&C(4,R)),S?(ee(),v=$(),V=M-1,K+=M-O+1,Z.push(S),F=$(),F.offset++,H&&H.call(G,S,{start:v,end:F},e.slice(O-1,M)),v=F):(A=e.slice(O-1,M),J+=A,K+=A.length,V=M-1)}else 10===k&&(X++,q++,K=0),k==k?(J+=u(k),K++):ee();return Z.join("");function $(){return{line:X,column:K,offset:V+(j.offset||0)}}function ee(){J&&(Z.push(J),B&&B.call(U,J,{start:v,end:$()}),J="")}}(e,i)};var c={}.hasOwnProperty,u=String.fromCharCode,d=Function.prototype,p={warning:null,reference:null,text:null,warningContext:null,referenceContext:null,textContext:null,position:{},additional:null,attribute:!1,nonTerminated:!0},h="named",f="hexadecimal",g="decimal",m={};m[f]=16,m[g]=10;var b={};b[h]=l,b[g]=a,b[f]=i;var E={};E[1]="Named character references must be terminated by a semicolon",E[2]="Numeric character references must be terminated by a semicolon",E[3]="Named character references cannot be empty",E[4]="Numeric character references cannot be empty",E[5]="Named character references must be known",E[6]="Numeric character references cannot be disallowed",E[7]="Numeric character references cannot be outside the permissible Unicode range"},9216:function(e,t,n){/** * Prism: Lightweight, robust, elegant syntax highlighting * * @license MIT diff --git a/_next/static/chunks/pages/[...detail]-3b4126e788667b59.js b/_next/static/chunks/pages/[...detail]-3b4126e788667b59.js deleted file mode 100644 index 732f781..0000000 --- a/_next/static/chunks/pages/[...detail]-3b4126e788667b59.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[492],{6069:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[...detail]",function(){return r(17)}])},588:function(e,t,r){"use strict";var s=r(5893),a=r(1664),l=r.n(a);t.Z=e=>(0,s.jsx)(l(),{href:"/posts/tag/".concat(e.name),className:"w-fit h-fit px-2 py-1 transition-all bg-gray-100 rounded-lg text-sm dark:bg-dark-secondary dark:hover:text-white hover:bg-tag-hover dark:hover:bg-tag-dark-hover",children:e.name})},17:function(e,t,r){"use strict";r.r(t),r.d(t,{PostDetailPage:function(){return er},__N_SSG:function(){return et},default:function(){return es}});var s,a,l,n,i=r(5893),o=r(8080),c=r(7294),d=r(9008),u=r.n(d),h=()=>{let[e,t]=(0,c.useState)(0),[r,s]=(0,c.useState)(0),a=(0,c.useCallback)(()=>{let e=window.scrollY;s(e);let r=document.documentElement,a=r.scrollTop||document.body.scrollTop,l=r.scrollHeight||document.body.scrollHeight,n=a/(l-r.clientHeight)*100;t(n)},[r]);return(0,c.useEffect)(()=>(window.addEventListener("scroll",a),()=>{window.removeEventListener("scroll",a)}),[a]),(0,i.jsx)("div",{className:"fixed z-50 top-1 transtion-all -mt-1 left-0 h-1 bg-gradient-to-r from-sky-500 to-indigo-500",style:{width:"".concat(e,"%")}})},g=r(1578),p=r(1664),m=r.n(p),x=e=>(0,i.jsx)(m(),{href:"/posts/".concat(e.text),className:"w-auto px-4 border-indigo-600 text-indigo-600 dark:border-indigo-200 dark:text-indigo-200 border-2 border-solid rounded-lg py-1 h-8 flex justify-center items-center cursor-pointer",children:e.text}),f=r(588),v=r(9727);function b(){return(b=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let t=(0,g.ZP)(new Date(e.date),"yyyy년 MM월 dd일");return(0,i.jsxs)("div",{className:"w-full flex flex-col items-center mt-6",children:[(0,i.jsx)(x,{text:e.category}),(0,i.jsx)("div",{className:"font-bold text-3xl md:text-5xl mt-2 text-center leading-snug md:leading-snug",children:e.title}),(0,i.jsx)("div",{className:"flex gap-4 mt-4",children:e.tags.map(e=>(0,i.jsx)(f.Z,{name:e},e))}),(0,i.jsx)("div",{className:"text-md mt-4",children:t}),(0,i.jsxs)("div",{className:"flex text-sm mt-2 items-center gap-1 text-neutral-600",children:[(0,i.jsx)(j,{width:20,height:20}),(0,i.jsxs)("span",{children:[e.readingTime,"분"]})]}),(0,i.jsx)(v.Z,{mt:"6"})]})},y=r(5675),k=r.n(y),N=r(8152),D=r(4283),E=r(2041),O=r(902),_=r(2422);let T={threshold:.5,rootMargin:"-70px 0px -60% 0px"};var Z=(e,t)=>{let r=(0,c.useRef)({}),s=(0,c.useCallback)(s=>{r.current={},r.current=s.reduce((e,t)=>(e[t.target.id]=t,e),r.current);let a=[];Object.keys(r.current).forEach(e=>{let t=r.current[e];t.isIntersecting&&a.push(t)});let l=e=>t.findIndex(t=>t.id===e);if(1===a.length)e(a[0].target.id);else if(a.length>1){let t=a.sort((e,t)=>l(e.target.id)-l(t.target.id));e(t[0].target.id)}},[t]);(0,c.useEffect)(()=>{let e=new IntersectionObserver(s,T);return t.map(t=>{e.observe(t)}),()=>{e.disconnect()}},[t])},P=r(6261);function A(){return(A=Object.assign?Object.assign.bind():function(e){for(var t=1;t(0,i.jsx)(m(),{href:"/posts/".concat(e.category),className:"w-auto h-auto fill-[#666666] dark:fill-[rgb(181,181,181)] rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 p-2 transition-colors cursor-pointer text-neutral-700",children:(0,i.jsx)(H,{})}),S=r(1163),U=r.n(S),B=e=>{let t=(0,S.useRouter)(),[r,s]=(0,c.useState)(""),[a,l]=(0,c.useState)([]);return(0,c.useEffect)(()=>{let e=Array.from(document.querySelectorAll("h1,h2,h3"));l(e),s("")},[e.slug]),Z(s,a),(0,i.jsx)("div",{className:"mt-12 ml-auto relative hidden lg:block",children:(0,i.jsxs)("div",{className:"sticky top-32 w-60",children:[(0,i.jsxs)("div",{className:"p-4 rounded-t-xl border-solid border-slate-200 border-[0.5px] border-b-0 dark:border-gray-600 items-start gap-6",children:[(0,i.jsx)("div",{className:"font-bold mb-2",children:e.title}),(0,i.jsx)("hr",{className:"w-full border-neutral-400 dark:border-gray-600"}),(0,i.jsx)("ul",{className:"mb-2 text-sm flex flex-col gap-2 mt-4",children:a.map((e,t)=>{let s=e.nodeName,a=e.innerHTML,l=e.id,n=r==l?"font-bold text-indigo-500":"";return"H1"===s?(0,i.jsx)("li",{className:"".concat(n),children:(0,i.jsx)(P.rU,{to:"".concat(l),spy:!0,smooth:!0,duration:400,className:"".concat(n," py-1 cursor-pointer transition-colors"),offset:-100,children:a})},t):"H2"===s?(0,i.jsx)("li",{children:(0,i.jsx)(P.rU,{to:"".concat(l),spy:!0,smooth:!0,duration:400,offset:-100,className:"".concat(n," py-1 pl-2 whitespace-pre-line cursor-pointer transition-colors block"),children:a})},t):(0,i.jsx)("li",{children:(0,i.jsx)(P.rU,{to:"".concat(l),spy:!0,smooth:!0,duration:400,offset:-50,className:"".concat(n," py-1 pl-6 whitespace-pre-line cursor-pointer transition-colors block"),children:a})},t)})})]}),(0,i.jsxs)("div",{className:"rounded-b-xl border-[0.5px] px-6 w-full h-12 border-solid bg-slate-100 dark:bg-[#363636] dark:border-gray-600 flex items-center justify-between",children:[(0,i.jsx)(L,{category:t.query.detail[1]}),(0,i.jsx)(C,{onClick:()=>{P.NY.scrollToTop()},className:"w-auto h-auto rounded-lg hover:bg-slate-200 p-2 cursor-pointer text-white transition-colors dark:hover:bg-gray-800 fill-[#666666] dark:fill-[rgb(181,181,181)]"}),(0,i.jsx)(P.rU,{to:"giscus",spy:!0,smooth:!0,duration:400,children:(0,i.jsx)(q,{className:"w-auto h-auto rounded-lg p-2 hover:bg-slate-200 cursor-pointer text-neutral-700 transition-colors dark:hover:bg-slate-800 fill-[#666666] dark:fill-[rgb(181,181,181)]"})})]})]})})},I=r(9943),R=r(7896),W=r(7388);N.Z.registerLanguage("js",E.Z),N.Z.registerLanguage("css",_.Z),N.Z.registerLanguage("python",O.Z);var F=e=>(0,i.jsx)("div",{className:"w-full flex mt-8 mb-8",children:(0,i.jsxs)("div",{className:"w-full gap-8 lg:flex",children:[(0,i.jsx)("div",{className:"prose prose-zinc w-full leading-loose max-w-3xl dark:prose-invert",children:(0,i.jsx)(I.U,{rehypePlugins:[R.Z,W.Z],components:{a:e=>{let{href:t,children:r}=e;return(0,i.jsx)(m(),{href:t,children:r})},pre:e=>{if(e.children.props.className){var t;let r=null===(t=e.children.props.className)||void 0===t?void 0:t.split("-")[1];return(0,i.jsx)(N.Z,{style:D.pJ,PreTag:"pre",language:r,CodeTag:e=>{let{children:t}=e;return(0,i.jsx)("code",{className:"whitespace-pre-wrap",children:t})},children:e.children.props.children})}},img:t=>{console.log(t);let r=t.width?t.width:"600",s=t.height?t.height:"300";return(0,i.jsx)(k(),{src:"/".concat(e.slug,"/").concat(t.src),alt:t.src,width:r,height:s})}},children:e.content})}),(0,i.jsx)(B,{title:e.title,slug:e.slug})]})}),G=r(7103),K=r(7138),X=r(6378),Y=()=>(0,i.jsxs)("div",{className:"p-12 flex gap-4 justify-center items-center",children:[(0,i.jsx)("div",{children:(0,i.jsx)(k(),{src:"/profile/profile.png",alt:"my profile photo",width:80,height:80,className:"rounded-full"})}),(0,i.jsxs)("div",{className:"flex flex-col w-auto gap-2",children:[(0,i.jsxs)("div",{children:[(0,i.jsx)("div",{className:"w-full font-bold text-base mb-1",children:"Phnml1"}),(0,i.jsx)("div",{className:"w-full text-sm text-slate-500 dark:text-dark-secondary",children:"더디더라도 조금씩 성장하는 프론트엔드 개발자"})]}),(0,i.jsxs)("div",{className:"w-full flex gap-2",children:[(0,i.jsx)(m(),{href:"".concat(X.b.link),target:"_blank",children:(0,i.jsx)(G.Z,{width:"25",height:"25",className:"fill-slate-300 transition-all cursor-pointer hover:fill-black dark:hover:fill-white"})}),(0,i.jsx)(m(),{href:"mailto:juyung0903@gmail.com",target:"_blank",children:(0,i.jsx)(K.Z,{width:"25",height:"25",className:"fill-slate-300 transition-all cursor-pointer hover:fill-black dark:hover:fill-white"})})]})]})]}),J=e=>(0,i.jsxs)("section",{className:"w-full flex-col flex gap-8 mt-20 mb-20 lg:flex-row lg:gap-52",children:["object"==typeof e.prevData&&(0,i.jsxs)(m(),{href:"".concat(e.prevData.slug),className:"w-full h-auto rounded-lg border-[1px] break-words border-detailnav cursor-pointer hover:scale-105 transition-all p-8 lg:w-[calc(50%-6.5rem)] dark:border-darkdetailnav",children:[(0,i.jsx)("div",{className:"text-sm mb-2",children:"이전글"}),(0,i.jsx)("div",{className:"font-bold mb-2 text-lg",children:e.prevData.title}),(0,i.jsx)("div",{className:"text-sm line-clamp-2 overflow-hidden overflow-ellipsis text-slate-600 dark:text-dark-secondary",children:e.prevData.summary})]}),"object"==typeof e.nextData&&(0,i.jsxs)(m(),{href:"".concat(e.nextData.slug),className:"w-full h-auto rounded-lg border-[1px] break-words border-detailnav cursor-pointer hover:scale-105 transition-all p-8 lg:w-[calc(50%-6.5rem)] dark:border-darkdetailnav",children:[(0,i.jsx)("div",{className:"text-sm mb-2",children:"다음글"}),(0,i.jsx)("div",{className:"font-bold mb-2 text-lg",children:e.nextData.title}),(0,i.jsx)("div",{className:"text-sm line-clamp-2 overflow-hidden overflow-ellipsis text-slate-600 dark:text-dark-secondary",children:e.nextData.summary})]})]}),Q=r(2010);function V(){let e=(0,c.useRef)(null),{resolvedTheme:t}=(0,Q.F)(),r="dark"===t?"dark":"light";return(0,c.useEffect)(()=>{if(!e.current||e.current.hasChildNodes())return;let t=document.createElement("script");t.src="https://giscus.app/client.js",t.async=!0,t.crossOrigin="anonymous",t.setAttribute("data-repo","phnml1/my-blog"),t.setAttribute("data-repo-id","R_kgDOKznePw"),t.setAttribute("data-category","General"),t.setAttribute("data-category-id","DIC_kwDOKzneP84CcqiL"),t.setAttribute("data-mapping","pathname"),t.setAttribute("data-strict","0"),t.setAttribute("data-reactions-enabled","1"),t.setAttribute("data-emit-metadata","0"),t.setAttribute("data-input-position","bottom"),t.setAttribute("data-theme",r),t.setAttribute("data-lang","en"),e.current.appendChild(t)},[]),(0,c.useEffect)(()=>{var e;let t=document.querySelector("iframe.giscus-frame");null==t||null===(e=t.contentWindow)||void 0===e||e.postMessage({giscus:{setConfig:{theme:r}}},"https://giscus.app")},[r]),(0,c.useEffect)(()=>{var e;let t=document.querySelector("iframe.giscus-frame");null==t||null===(e=t.contentWindow)||void 0===e||e.postMessage({giscus:{setConfig:{term:U().asPath}}},"https://giscus.app")},[U().asPath]),(0,i.jsx)("section",{id:"giscus",ref:e})}var $=e=>(0,i.jsxs)("div",{className:"w-full mt-12",children:[(0,i.jsx)(Y,{}),(0,i.jsx)(J,{prevData:e.prevData,nextData:e.nextData}),(0,i.jsx)(V,{})]});function ee(e){return(0,i.jsx)(o.Z,{children:(0,i.jsxs)(c.Fragment,{children:[(0,i.jsxs)(u(),{children:[(0,i.jsx)("title",{children:e.post.title}),(0,i.jsx)("meta",{name:"description",content:"".concat(e.post.summary)})]}),(0,i.jsx)(h,{}),(0,i.jsxs)("div",{className:"mt-4 w-full md:w-4/5 px-8 flex flex-col items-center mb-16",children:[(0,i.jsx)(w,{title:e.post.title,category:e.category,date:e.post.date,tags:e.post.tags,readingTime:e.post.readingMinutes}),(0,i.jsx)(F,{title:e.post.title,content:e.post.content,slug:e.post.slug}),(0,i.jsx)(v.Z,{mt:"8"}),(0,i.jsx)($,{prevData:e.prevData,nextData:e.nextData})]})]})})}var et=!0;function er(e){return console.log(e.post.slug),(0,i.jsx)(ee,{post:e.post,category:e.category,prevData:e.prevData,nextData:e.nextData})}var es=er}},function(e){e.O(0,[605,135,393,979,774,888,179],function(){return e(e.s=6069)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/[...detail]-801909bc4ff4e1ea.js b/_next/static/chunks/pages/[...detail]-801909bc4ff4e1ea.js new file mode 100644 index 0000000..806487d --- /dev/null +++ b/_next/static/chunks/pages/[...detail]-801909bc4ff4e1ea.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[492],{6069:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[...detail]",function(){return r(17)}])},588:function(e,t,r){"use strict";var s=r(5893),a=r(1664),l=r.n(a);t.Z=e=>(0,s.jsx)(l(),{href:"/posts/tag/".concat(e.name),className:"w-fit h-fit px-2 py-1 transition-all bg-gray-100 rounded-lg text-sm dark:bg-dark-secondary dark:hover:text-white hover:bg-tag-hover dark:hover:bg-tag-dark-hover",children:e.name})},17:function(e,t,r){"use strict";r.r(t),r.d(t,{PostDetailPage:function(){return er},__N_SSG:function(){return et},default:function(){return es}});var s,a,l,n,o=r(5893),i=r(8080),c=r(7294),d=r(9008),u=r.n(d),h=()=>{let[e,t]=(0,c.useState)(0),[r,s]=(0,c.useState)(0),a=(0,c.useCallback)(()=>{let e=window.scrollY;s(e);let r=document.documentElement,a=r.scrollTop||document.body.scrollTop,l=r.scrollHeight||document.body.scrollHeight,n=a/(l-r.clientHeight)*100;t(n)},[r]);return(0,c.useEffect)(()=>(window.addEventListener("scroll",a),()=>{window.removeEventListener("scroll",a)}),[a]),(0,o.jsx)("div",{className:"fixed z-50 top-1 transtion-all -mt-1 left-0 h-1 bg-gradient-to-r from-sky-500 to-indigo-500",style:{width:"".concat(e,"%")}})},g=r(1578),p=r(1664),m=r.n(p),x=e=>(0,o.jsx)(m(),{href:"/posts/".concat(e.text),className:"w-auto px-4 border-indigo-600 text-indigo-600 dark:border-indigo-200 dark:text-indigo-200 border-2 border-solid rounded-lg py-1 h-8 flex justify-center items-center cursor-pointer",children:e.text}),f=r(588),v=r(9727);function b(){return(b=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let t=(0,g.ZP)(new Date(e.date),"yyyy년 MM월 dd일");return(0,o.jsxs)("div",{className:"w-full flex flex-col items-center mt-6",children:[(0,o.jsx)(x,{text:e.category}),(0,o.jsx)("div",{className:"font-bold text-3xl md:text-5xl mt-2 text-center leading-snug md:leading-snug",children:e.title}),(0,o.jsx)("div",{className:"flex gap-4 mt-4",children:e.tags.map(e=>(0,o.jsx)(f.Z,{name:e},e))}),(0,o.jsx)("div",{className:"text-md mt-4",children:t}),(0,o.jsxs)("div",{className:"flex text-sm mt-2 items-center gap-1 text-neutral-600",children:[(0,o.jsx)(j,{width:20,height:20}),(0,o.jsxs)("span",{children:[e.readingTime,"분"]})]}),(0,o.jsx)(v.Z,{mt:"6"})]})},y=r(5675),k=r.n(y),N=r(8152),D=r(4283),E=r(2041),O=r(902),T=r(2422);let _={threshold:.5,rootMargin:"-70px 0px -60% 0px"};var Z=(e,t)=>{let r=(0,c.useRef)({}),s=(0,c.useCallback)(s=>{r.current={},r.current=s.reduce((e,t)=>(e[t.target.id]=t,e),r.current);let a=[];Object.keys(r.current).forEach(e=>{let t=r.current[e];t.isIntersecting&&a.push(t)});let l=e=>t.findIndex(t=>t.id===e);if(1===a.length)e(a[0].target.id);else if(a.length>1){let t=a.sort((e,t)=>l(e.target.id)-l(t.target.id));e(t[0].target.id)}},[t]);(0,c.useEffect)(()=>{let e=new IntersectionObserver(s,_);return t.map(t=>{e.observe(t)}),()=>{e.disconnect()}},[t])},P=r(6261);function C(){return(C=Object.assign?Object.assign.bind():function(e){for(var t=1;t(0,o.jsx)(m(),{href:"/posts/".concat(e.category),className:"w-auto h-auto fill-[#666666] dark:fill-[rgb(181,181,181)] rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 p-2 transition-colors cursor-pointer text-neutral-700",children:(0,o.jsx)(H,{})}),S=r(1163),R=r.n(S),B=e=>{let t=(0,c.useRef)(null),r=(0,S.useRouter)(),[s,a]=(0,c.useState)(""),[l,n]=(0,c.useState)([]);return console.log(s),(0,c.useEffect)(()=>{let e=Array.from(document.querySelectorAll("h1,h2,h3"));n(e),a("")},[e.slug]),(0,c.useEffect)(()=>{var e;let r=null===(e=t.current)||void 0===e?void 0:e.querySelector(".font-bold.text-indigo-500");if(r&&t.current){let e=t.current.getBoundingClientRect().bottom,s=r.getBoundingClientRect().bottom;t.current.scrollTop+=s-e}},[s]),Z(a,l),(0,o.jsx)("div",{className:"mt-12 ml-auto relative hidden lg:block",children:(0,o.jsxs)("div",{className:"sticky top-32 w-60 ",children:[(0,o.jsxs)("div",{className:"p-4 max-h-[500px] rounded-t-xl border-solid border-slate-200 border-[0.5px] border-b-0 dark:border-gray-600 items-start gap-6",children:[(0,o.jsx)("div",{className:"font-bold mb-2",children:e.title}),(0,o.jsx)("hr",{className:"w-full border-neutral-400 dark:border-gray-600"}),(0,o.jsx)("div",{ref:t,className:"custom-scroll overflow-y-auto max-h-[380px] mt-2 mb-2 px-2",children:(0,o.jsx)("ul",{className:"mb-2 text-sm flex flex-col gap-2 mt-4 ",children:l.map((e,t)=>{let r=e.nodeName,a=e.innerHTML,l=e.id,n=s==l?"font-bold text-indigo-500":"";return"H1"===r?(0,o.jsx)("li",{className:"".concat(n),children:(0,o.jsx)(P.rU,{to:"".concat(l),spy:!0,smooth:!0,duration:400,className:"".concat(n," py-1 cursor-pointer transition-colors"),offset:-100,children:a})},t):"H2"===r?(0,o.jsx)("li",{children:(0,o.jsx)(P.rU,{to:"".concat(l),spy:!0,smooth:!0,duration:400,offset:-100,className:"".concat(n," py-1 pl-2 whitespace-pre-line cursor-pointer transition-colors block"),children:a})},t):(0,o.jsx)("li",{children:(0,o.jsx)(P.rU,{to:"".concat(l),spy:!0,smooth:!0,duration:400,offset:-50,className:"".concat(n," py-1 pl-6 whitespace-pre-line cursor-pointer transition-colors block"),children:a})},t)})})})]}),(0,o.jsxs)("div",{className:"rounded-b-xl border-[0.5px] px-6 w-full h-12 border-solid bg-slate-100 dark:bg-[#363636] dark:border-gray-600 flex items-center justify-between",children:[(0,o.jsx)(L,{category:r.query.detail[1]}),(0,o.jsx)(q,{onClick:()=>{P.NY.scrollToTop()},className:"w-auto h-auto rounded-lg hover:bg-slate-200 p-2 cursor-pointer text-white transition-colors dark:hover:bg-gray-800 fill-[#666666] dark:fill-[rgb(181,181,181)]"}),(0,o.jsx)(P.rU,{to:"giscus",spy:!0,smooth:!0,duration:400,children:(0,o.jsx)(M,{className:"w-auto h-auto rounded-lg p-2 hover:bg-slate-200 cursor-pointer text-neutral-700 transition-colors dark:hover:bg-slate-800 fill-[#666666] dark:fill-[rgb(181,181,181)]"})})]})]})})},U=r(9943),I=r(7896),W=r(7388);N.Z.registerLanguage("js",E.Z),N.Z.registerLanguage("css",T.Z),N.Z.registerLanguage("python",O.Z);var F=e=>(0,o.jsx)("div",{className:"w-full flex mt-8 mb-8",children:(0,o.jsxs)("div",{className:"w-full gap-8 lg:flex",children:[(0,o.jsx)("div",{className:"prose prose-zinc w-full leading-loose max-w-3xl dark:prose-invert",children:(0,o.jsx)(U.U,{rehypePlugins:[I.Z,W.Z],components:{a:e=>{let{href:t,children:r}=e;return(0,o.jsx)(m(),{href:t,children:r})},pre:e=>{if(e.children.props.className){var t;let r=null===(t=e.children.props.className)||void 0===t?void 0:t.split("-")[1];return(0,o.jsx)(N.Z,{style:D.pJ,PreTag:"pre",language:r,CodeTag:e=>{let{children:t}=e;return(0,o.jsx)("code",{className:"whitespace-pre-wrap",children:t})},children:e.children.props.children})}},img:t=>{console.log(t);let r=t.width?t.width:"600",s=t.height?t.height:"300";return(0,o.jsx)(k(),{src:"/".concat(e.slug,"/").concat(t.src),alt:t.src,width:r,height:s})}},children:e.content})}),(0,o.jsx)(B,{title:e.title,slug:e.slug})]})}),G=r(7103),K=r(7138),X=r(6378),Y=()=>(0,o.jsxs)("div",{className:"p-12 flex gap-4 justify-center items-center",children:[(0,o.jsx)("div",{children:(0,o.jsx)(k(),{src:"/profile/profile.png",alt:"my profile photo",width:80,height:80,className:"rounded-full"})}),(0,o.jsxs)("div",{className:"flex flex-col w-auto gap-2",children:[(0,o.jsxs)("div",{children:[(0,o.jsx)("div",{className:"w-full font-bold text-base mb-1",children:"Phnml1"}),(0,o.jsx)("div",{className:"w-full text-sm text-slate-500 dark:text-dark-secondary",children:"더디더라도 조금씩 성장하는 프론트엔드 개발자"})]}),(0,o.jsxs)("div",{className:"w-full flex gap-2",children:[(0,o.jsx)(m(),{href:"".concat(X.b.link),target:"_blank",children:(0,o.jsx)(G.Z,{width:"25",height:"25",className:"fill-slate-300 transition-all cursor-pointer hover:fill-black dark:hover:fill-white"})}),(0,o.jsx)(m(),{href:"mailto:juyung0903@gmail.com",target:"_blank",children:(0,o.jsx)(K.Z,{width:"25",height:"25",className:"fill-slate-300 transition-all cursor-pointer hover:fill-black dark:hover:fill-white"})})]})]})]}),J=e=>(0,o.jsxs)("section",{className:"w-full flex-col flex gap-8 mt-20 mb-20 lg:flex-row lg:gap-52",children:["object"==typeof e.prevData&&(0,o.jsxs)(m(),{href:"".concat(e.prevData.slug),className:"w-full h-auto rounded-lg border-[1px] break-words border-detailnav cursor-pointer hover:scale-105 transition-all p-8 lg:w-[calc(50%-6.5rem)] dark:border-darkdetailnav",children:[(0,o.jsx)("div",{className:"text-sm mb-2",children:"이전글"}),(0,o.jsx)("div",{className:"font-bold mb-2 text-lg",children:e.prevData.title}),(0,o.jsx)("div",{className:"text-sm line-clamp-2 overflow-hidden overflow-ellipsis text-slate-600 dark:text-dark-secondary",children:e.prevData.summary})]}),"object"==typeof e.nextData&&(0,o.jsxs)(m(),{href:"".concat(e.nextData.slug),className:"w-full h-auto rounded-lg border-[1px] break-words border-detailnav cursor-pointer hover:scale-105 transition-all p-8 lg:w-[calc(50%-6.5rem)] dark:border-darkdetailnav",children:[(0,o.jsx)("div",{className:"text-sm mb-2",children:"다음글"}),(0,o.jsx)("div",{className:"font-bold mb-2 text-lg",children:e.nextData.title}),(0,o.jsx)("div",{className:"text-sm line-clamp-2 overflow-hidden overflow-ellipsis text-slate-600 dark:text-dark-secondary",children:e.nextData.summary})]})]}),Q=r(2010);function V(){let e=(0,c.useRef)(null),{resolvedTheme:t}=(0,Q.F)(),r="dark"===t?"dark":"light";return(0,c.useEffect)(()=>{if(!e.current||e.current.hasChildNodes())return;let t=document.createElement("script");t.src="https://giscus.app/client.js",t.async=!0,t.crossOrigin="anonymous",t.setAttribute("data-repo","phnml1/my-blog"),t.setAttribute("data-repo-id","R_kgDOKznePw"),t.setAttribute("data-category","General"),t.setAttribute("data-category-id","DIC_kwDOKzneP84CcqiL"),t.setAttribute("data-mapping","pathname"),t.setAttribute("data-strict","0"),t.setAttribute("data-reactions-enabled","1"),t.setAttribute("data-emit-metadata","0"),t.setAttribute("data-input-position","bottom"),t.setAttribute("data-theme",r),t.setAttribute("data-lang","en"),e.current.appendChild(t)},[]),(0,c.useEffect)(()=>{var e;let t=document.querySelector("iframe.giscus-frame");null==t||null===(e=t.contentWindow)||void 0===e||e.postMessage({giscus:{setConfig:{theme:r}}},"https://giscus.app")},[r]),(0,c.useEffect)(()=>{var e;let t=document.querySelector("iframe.giscus-frame");null==t||null===(e=t.contentWindow)||void 0===e||e.postMessage({giscus:{setConfig:{term:R().asPath}}},"https://giscus.app")},[R().asPath]),(0,o.jsx)("section",{id:"giscus",ref:e})}var $=e=>(0,o.jsxs)("div",{className:"w-full mt-12",children:[(0,o.jsx)(Y,{}),(0,o.jsx)(J,{prevData:e.prevData,nextData:e.nextData}),(0,o.jsx)(V,{})]});function ee(e){return(0,o.jsx)(i.Z,{children:(0,o.jsxs)(c.Fragment,{children:[(0,o.jsxs)(u(),{children:[(0,o.jsx)("title",{children:e.post.title}),(0,o.jsx)("meta",{name:"description",content:"".concat(e.post.summary)})]}),(0,o.jsx)(h,{}),(0,o.jsxs)("div",{className:"mt-4 w-full md:w-4/5 px-8 flex flex-col items-center mb-16",children:[(0,o.jsx)(w,{title:e.post.title,category:e.category,date:e.post.date,tags:e.post.tags,readingTime:e.post.readingMinutes}),(0,o.jsx)(F,{title:e.post.title,content:e.post.content,slug:e.post.slug}),(0,o.jsx)(v.Z,{mt:"8"}),(0,o.jsx)($,{prevData:e.prevData,nextData:e.nextData})]})]})})}var et=!0;function er(e){return console.log(e.post.slug),(0,o.jsx)(ee,{post:e.post,category:e.category,prevData:e.prevData,nextData:e.nextData})}var es=er}},function(e){e.O(0,[605,135,393,979,774,888,179],function(){return e(e.s=6069)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/posts/[category]-fa20e1e8deb8548b.js b/_next/static/chunks/pages/posts/[category]-1243ede844aa0e50.js similarity index 97% rename from _next/static/chunks/pages/posts/[category]-fa20e1e8deb8548b.js rename to _next/static/chunks/pages/posts/[category]-1243ede844aa0e50.js index be4a4e2..0ceaae6 100644 --- a/_next/static/chunks/pages/posts/[category]-fa20e1e8deb8548b.js +++ b/_next/static/chunks/pages/posts/[category]-1243ede844aa0e50.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[677],{2563:function(t,e,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/posts/[category]",function(){return r(6242)}])},5983:function(t,e,r){"use strict";r.d(e,{Z:function(){return u}});var s=r(5893),l=r(7294),a=r(9008),n=r.n(a),o=r(1664),d=r.n(o),i=r(588),c=r(1578),x=t=>{let e=(0,c.ZP)(new Date(t.content.date),"yyyy년 MM월 dd일");return(0,s.jsx)(d(),{href:"/".concat(t.content.slug),className:"w-full h-auto cursor-pointer transition-all hover:drop-shadow-tag-hover",children:(0,s.jsxs)("div",{className:"w-full ml-2 transition-all hover:drop-shadow-tag-hover",children:[(0,s.jsx)("div",{className:"text-lg font-bold md:text-3xl",children:t.content.title}),(0,s.jsx)("div",{className:"mt-8 text-sm md:text-base",children:t.content.summary}),(0,s.jsxs)("div",{className:"mt-8 flex justify-between flex-wrap gap-4 flex-col sm:flex-row",children:[(0,s.jsx)("div",{className:"flex gap-4",children:t.content.tags.map((t,e)=>(0,s.jsx)(i.Z,{name:t},e))}),(0,s.jsx)("div",{className:"pl-2 mr-12 text-sm sm:text-base",children:e})]})]})})},m=t=>(0,s.jsx)("div",{className:"w-full h-fit px-3 mt-12 grid gap-12",children:t.contents.map((t,e)=>(0,s.jsx)(x,{content:t},e))});function u(t){return(0,s.jsxs)(l.Fragment,{children:[(0,s.jsxs)(n(),{children:[(0,s.jsxs)("title",{children:["phnml1","'","s blog"]}),(0,s.jsx)("meta",{name:"description",content:"".concat(t.currentCategory,"와 관련한 글 모두 보여주기")})]}),(0,s.jsx)("div",{className:"w-full relative h-auto flex items-start justify-center mb-8 md:w-4/5 px-8 flex-col",children:(0,s.jsxs)("div",{className:"w-full h-auto mt-10",children:[(0,s.jsxs)("div",{className:"mt-16 text-3xl font-extrabold w-full ml-5 mb-16 flex gap-2",children:[(0,s.jsx)("div",{children:"all"===t.currentCategory||""===t.currentCategory?"All Posts":t.currentCategory}),(0,s.jsxs)("div",{children:["(",t.posts.length,")"]})]}),(0,s.jsx)(m,{contents:t.posts})]})})]})}},3411:function(t,e,r){"use strict";var s=r(5893),l=r(1664),a=r.n(l);e.Z=t=>{let{categorys:e,currentCategory:r,theme:l}=t,n=t=>"tag"===l?"/posts/tag/".concat(t):"/posts/".concat(t);return(0,s.jsxs)("div",{className:"w-full transition-all mt-8 pl-8 pr-8 md:w-4/5 h-auto flex flex-col items-start justify-end left-0 right-0 border-r-0",children:["category"===l&&(0,s.jsx)("div",{className:"w-auto font-extrabold text-2xl md:text-3xl mb-2",children:"Categories."}),"tag"===l&&(0,s.jsx)("div",{className:"w-auto font-extrabold text-2xl md:text-3xl mb-4",children:"Tags."}),(0,s.jsxs)("div",{className:"w-full h-auto transition-all top-0",children:["category"===l&&(0,s.jsxs)("div",{className:"top-0 flex-wrap rounded-xl h-auto mb-1 w-full pr-2 py-2 gap-2 flex justify-start items-center cursor-pointer",children:["all"===r?(0,s.jsx)(a(),{href:"/posts/all",className:"transition-all w-32 h-40 md:text-md lg:text-lg border-indigo-400 dark:text-indigo-200 bg-indigo-400 scale-110 text-white border-2 border-solid rounded-lg py-2 px-2 my-2 mx-2 text-center flex justify-center items-center cursor-pointer",children:"All Posts"}):(0,s.jsx)(a(),{href:"/posts/all",className:"transition-all w-32 h-40 md:text-md lg:text-lg border-indigo-400 text-indigo-400 dark:text-indigo-200 hover:scale-110 dark:bg-dark-secondary border-2 border-solid rounded-lg py-2 px-2 my-2 mx-2 text-center flex justify-center items-center cursor-pointer",children:"All Posts"}),null==e?void 0:e.map((t,e)=>t==r?(0,s.jsx)(a(),{href:"".concat(n(t)),className:"transition-all w-32 h-40 md:text-md lg:text-lg border-indigo-400 dark:text-indigo-200 bg-indigo-400 scale-110 text-white border-2 border-solid rounded-lg py-2 px-2 my-2 mx-2 text-center flex justify-center items-center cursor-pointer",children:t},e):(0,s.jsx)(a(),{href:"".concat(n(t)),className:"transition-all w-32 h-40 md:text-md lg:text-lg border-indigo-400 text-indigo-400 dark:border-indigo-4200 dark:text-indigo-200 hover:scale-110 dark:bg-dark-secondary border-2 border-solid rounded-lg py-2 px-2 my-2 mx-2 text-center flex justify-center items-center cursor-pointer",children:t},e))]}),"tag"===l&&(0,s.jsxs)("div",{className:"top-0 flex-wrap rounded-xl h-auto mb-1 w-full ml-2 pr-2 py-2 gap-2 flex justify-start items-center cursor-pointer",children:["all"!==r&&(0,s.jsx)(a(),{href:"/posts/tag/all",className:"transition-all rounded-lg w-auto text-xs md:text-sm lg:text-md text-center flex-wrap py-2 px-4 my-2 mx-2 bg-slate-100 hover:bg-[#2196f3] hover:text-white dark:bg-dark-secondary dark:hover:bg-[#2196f3]",children:"All Posts"}),null==e?void 0:e.map((t,e)=>t==r?(0,s.jsx)(a(),{href:"".concat(n(t)),className:"transition-all rounded-lg w-auto text-xs md:text-sm lg:text-md text-center flex-wrap py-2 px-4 my-2 mx-2 bg-[#2196f3] text-white dark:bg-[#2196f3]",children:t},e):(0,s.jsx)(a(),{href:"".concat(n(t)),className:"transition-all rounded-lg w-auto text-xs md:text-sm lg:text-md text-center flex-wrap py-2 px-4 my-2 mx-2 bg-slate-100 hover:bg-[#2196f3] hover:text-white dark:bg-dark-secondary dark:hover:bg-[#2196f3]",children:t},e))]})]})]})}},588:function(t,e,r){"use strict";var s=r(5893),l=r(1664),a=r.n(l);e.Z=t=>(0,s.jsx)(a(),{href:"/posts/tag/".concat(t.name),className:"w-fit h-fit px-2 py-1 transition-all bg-gray-100 rounded-lg text-sm dark:bg-dark-secondary dark:hover:text-white hover:bg-tag-hover dark:hover:bg-tag-dark-hover",children:t.name})},6242:function(t,e,r){"use strict";r.r(e),r.d(e,{__N_SSG:function(){return d},default:function(){return i}});var s=r(5893),l=r(8080),a=r(5983),n=()=>(0,s.jsxs)("div",{className:"w-full flex flex-col items-center px-8 mt-6",children:[(0,s.jsx)("div",{className:"w-full md:w-4/5 text-3xl md:text-5xl font-extrabold ml-4 mb-4",children:"Welcome to My Blog!\uD83D\uDC4B"}),(0,s.jsxs)("div",{className:"w-full md:w-4/5 ml-4 mt-4",children:["제 블로그에 와주셔서 감사합니다!",(0,s.jsx)("br",{}),"이곳에서는 제가 개발하면서 공부한 것들이나 그 이외에 다양한 카테고리의 글들이 올라올 예정입니다."]})]}),o=r(3411),d=!0;function i(t){return(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(n,{}),(0,s.jsx)(o.Z,{currentCategory:t.currentCategory,categorys:t.categorys,theme:"category"}),(0,s.jsx)(a.Z,{currentCategory:t.currentCategory,posts:t.posts,theme:"category"})]})}}},function(t){t.O(0,[605,135,979,774,888,179],function(){return t(t.s=2563)}),_N_E=t.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[677],{8980:function(t,e,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/posts/[category]",function(){return r(6242)}])},5983:function(t,e,r){"use strict";r.d(e,{Z:function(){return u}});var s=r(5893),l=r(7294),a=r(9008),n=r.n(a),o=r(1664),d=r.n(o),i=r(588),c=r(1578),x=t=>{let e=(0,c.ZP)(new Date(t.content.date),"yyyy년 MM월 dd일");return(0,s.jsx)(d(),{href:"/".concat(t.content.slug),className:"w-full h-auto cursor-pointer transition-all hover:drop-shadow-tag-hover",children:(0,s.jsxs)("div",{className:"w-full ml-2 transition-all hover:drop-shadow-tag-hover",children:[(0,s.jsx)("div",{className:"text-lg font-bold md:text-3xl",children:t.content.title}),(0,s.jsx)("div",{className:"mt-8 text-sm md:text-base",children:t.content.summary}),(0,s.jsxs)("div",{className:"mt-8 flex justify-between flex-wrap gap-4 flex-col sm:flex-row",children:[(0,s.jsx)("div",{className:"flex gap-4",children:t.content.tags.map((t,e)=>(0,s.jsx)(i.Z,{name:t},e))}),(0,s.jsx)("div",{className:"pl-2 mr-12 text-sm sm:text-base",children:e})]})]})})},m=t=>(0,s.jsx)("div",{className:"w-full h-fit px-3 mt-12 grid gap-12",children:t.contents.map((t,e)=>(0,s.jsx)(x,{content:t},e))});function u(t){return(0,s.jsxs)(l.Fragment,{children:[(0,s.jsxs)(n(),{children:[(0,s.jsxs)("title",{children:["phnml1","'","s blog"]}),(0,s.jsx)("meta",{name:"description",content:"".concat(t.currentCategory,"와 관련한 글 모두 보여주기")})]}),(0,s.jsx)("div",{className:"w-full relative h-auto flex items-start justify-center mb-8 md:w-4/5 px-8 flex-col",children:(0,s.jsxs)("div",{className:"w-full h-auto mt-10",children:[(0,s.jsxs)("div",{className:"mt-16 text-3xl font-extrabold w-full ml-5 mb-16 flex gap-2",children:[(0,s.jsx)("div",{children:"all"===t.currentCategory||""===t.currentCategory?"All Posts":t.currentCategory}),(0,s.jsxs)("div",{children:["(",t.posts.length,")"]})]}),(0,s.jsx)(m,{contents:t.posts})]})})]})}},3411:function(t,e,r){"use strict";var s=r(5893),l=r(1664),a=r.n(l);e.Z=t=>{let{categorys:e,currentCategory:r,theme:l}=t,n=t=>"tag"===l?"/posts/tag/".concat(t):"/posts/".concat(t);return(0,s.jsxs)("div",{className:"w-full transition-all mt-8 pl-8 pr-8 md:w-4/5 h-auto flex flex-col items-start justify-end left-0 right-0 border-r-0",children:["category"===l&&(0,s.jsx)("div",{className:"w-auto font-extrabold text-2xl md:text-3xl mb-2",children:"Categories."}),"tag"===l&&(0,s.jsx)("div",{className:"w-auto font-extrabold text-2xl md:text-3xl mb-4",children:"Tags."}),(0,s.jsxs)("div",{className:"w-full h-auto transition-all top-0",children:["category"===l&&(0,s.jsxs)("div",{className:"top-0 flex-wrap rounded-xl h-auto mb-1 w-full pr-2 py-2 gap-2 flex justify-start items-center cursor-pointer",children:["all"===r?(0,s.jsx)(a(),{href:"/posts/all",className:"transition-all w-32 h-40 md:text-md lg:text-lg border-indigo-400 dark:text-indigo-200 bg-indigo-400 scale-110 text-white border-2 border-solid rounded-lg py-2 px-2 my-2 mx-2 text-center flex justify-center items-center cursor-pointer",children:"All Posts"}):(0,s.jsx)(a(),{href:"/posts/all",className:"transition-all w-32 h-40 md:text-md lg:text-lg border-indigo-400 text-indigo-400 dark:text-indigo-200 hover:scale-110 dark:bg-dark-secondary border-2 border-solid rounded-lg py-2 px-2 my-2 mx-2 text-center flex justify-center items-center cursor-pointer",children:"All Posts"}),null==e?void 0:e.map((t,e)=>t==r?(0,s.jsx)(a(),{href:"".concat(n(t)),className:"transition-all w-32 h-40 md:text-md lg:text-lg border-indigo-400 dark:text-indigo-200 bg-indigo-400 scale-110 text-white border-2 border-solid rounded-lg py-2 px-2 my-2 mx-2 text-center flex justify-center items-center cursor-pointer",children:t},e):(0,s.jsx)(a(),{href:"".concat(n(t)),className:"transition-all w-32 h-40 md:text-md lg:text-lg border-indigo-400 text-indigo-400 dark:border-indigo-4200 dark:text-indigo-200 hover:scale-110 dark:bg-dark-secondary border-2 border-solid rounded-lg py-2 px-2 my-2 mx-2 text-center flex justify-center items-center cursor-pointer",children:t},e))]}),"tag"===l&&(0,s.jsxs)("div",{className:"top-0 flex-wrap rounded-xl h-auto mb-1 w-full ml-2 pr-2 py-2 gap-2 flex justify-start items-center cursor-pointer",children:["all"!==r&&(0,s.jsx)(a(),{href:"/posts/tag/all",className:"transition-all rounded-lg w-auto text-xs md:text-sm lg:text-md text-center flex-wrap py-2 px-4 my-2 mx-2 bg-slate-100 hover:bg-[#2196f3] hover:text-white dark:bg-dark-secondary dark:hover:bg-[#2196f3]",children:"All Posts"}),null==e?void 0:e.map((t,e)=>t==r?(0,s.jsx)(a(),{href:"".concat(n(t)),className:"transition-all rounded-lg w-auto text-xs md:text-sm lg:text-md text-center flex-wrap py-2 px-4 my-2 mx-2 bg-[#2196f3] text-white dark:bg-[#2196f3]",children:t},e):(0,s.jsx)(a(),{href:"".concat(n(t)),className:"transition-all rounded-lg w-auto text-xs md:text-sm lg:text-md text-center flex-wrap py-2 px-4 my-2 mx-2 bg-slate-100 hover:bg-[#2196f3] hover:text-white dark:bg-dark-secondary dark:hover:bg-[#2196f3]",children:t},e))]})]})]})}},588:function(t,e,r){"use strict";var s=r(5893),l=r(1664),a=r.n(l);e.Z=t=>(0,s.jsx)(a(),{href:"/posts/tag/".concat(t.name),className:"w-fit h-fit px-2 py-1 transition-all bg-gray-100 rounded-lg text-sm dark:bg-dark-secondary dark:hover:text-white hover:bg-tag-hover dark:hover:bg-tag-dark-hover",children:t.name})},6242:function(t,e,r){"use strict";r.r(e),r.d(e,{__N_SSG:function(){return d},default:function(){return i}});var s=r(5893),l=r(8080),a=r(5983),n=()=>(0,s.jsxs)("div",{className:"w-full flex flex-col items-center px-8 mt-6",children:[(0,s.jsx)("div",{className:"w-full md:w-4/5 text-3xl md:text-5xl font-extrabold ml-4 mb-4",children:"Welcome to My Blog!\uD83D\uDC4B"}),(0,s.jsxs)("div",{className:"w-full md:w-4/5 ml-4 mt-4",children:["제 블로그에 와주셔서 감사합니다!",(0,s.jsx)("br",{}),"이곳에서는 제가 개발하면서 공부한 것들이나 그 이외에 다양한 카테고리의 글들이 올라올 예정입니다."]})]}),o=r(3411),d=!0;function i(t){return(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(n,{}),(0,s.jsx)(o.Z,{currentCategory:t.currentCategory,categorys:t.categorys,theme:"category"}),(0,s.jsx)(a.Z,{currentCategory:t.currentCategory,posts:t.posts,theme:"category"})]})}}},function(t){t.O(0,[605,135,979,774,888,179],function(){return t(t.s=8980)}),_N_E=t.O()}]); \ No newline at end of file diff --git a/_next/static/css/55876d34f3407927.css b/_next/static/css/cea7fc6ccc7bac98.css similarity index 58% rename from _next/static/css/55876d34f3407927.css rename to _next/static/css/cea7fc6ccc7bac98.css index a913807..e2c52b9 100644 --- a/_next/static/css/55876d34f3407927.css +++ b/_next/static/css/cea7fc6ccc7bac98.css @@ -1,3 +1,3 @@ /* ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com -*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*{scrollbar-color:auto;scrollbar-width:auto}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);font-size:.875em;border-radius:.3125rem;padding:.1875em .375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:17 24 39;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-left:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-zinc{--tw-prose-body:#3f3f46;--tw-prose-headings:#18181b;--tw-prose-lead:#52525b;--tw-prose-links:#18181b;--tw-prose-bold:#18181b;--tw-prose-counters:#71717a;--tw-prose-bullets:#d4d4d8;--tw-prose-hr:#e4e4e7;--tw-prose-quotes:#18181b;--tw-prose-quote-borders:#e4e4e7;--tw-prose-captions:#71717a;--tw-prose-kbd:#18181b;--tw-prose-kbd-shadows:24 24 27;--tw-prose-code:#18181b;--tw-prose-pre-code:#e4e4e7;--tw-prose-pre-bg:#27272a;--tw-prose-th-borders:#d4d4d8;--tw-prose-td-borders:#e4e4e7;--tw-prose-invert-body:#d4d4d8;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#a1a1aa;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#a1a1aa;--tw-prose-invert-bullets:#52525b;--tw-prose-invert-hr:#3f3f46;--tw-prose-invert-quotes:#f4f4f5;--tw-prose-invert-quote-borders:#3f3f46;--tw-prose-invert-captions:#a1a1aa;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d4d4d8;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#52525b;--tw-prose-invert-td-borders:#3f3f46}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-12{bottom:3rem}.left-0{left:0}.left-8{left:2rem}.right-0{right:0}.right-8{right:2rem}.top-0{top:0}.top-1{top:.25rem}.top-32{top:8rem}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.mx-12{margin-left:3rem;margin-right:3rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-8{margin-left:2rem;margin-right:2rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-mt-0{margin-top:0}.-mt-0\.5{margin-top:-.125rem}.-mt-1{margin-top:-.25rem}.mb-1{margin-bottom:.25rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-5{margin-left:1.25rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-12{margin-right:3rem}.mr-8{margin-right:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.flex{display:flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-1\/3{height:33.333333%}.h-12{height:3rem}.h-14{height:3.5rem}.h-2\/3{height:66.666667%}.h-20{height:5rem}.h-3{height:.75rem}.h-40{height:10rem}.h-8{height:2rem}.h-80{height:20rem}.h-96{height:24rem}.h-auto{height:auto}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-32{width:8rem}.w-60{width:15rem}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.flex-1{flex:1 1 0%}.-translate-y-full{--tw-translate-y:-100%}.-translate-y-full,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-24{gap:6rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-ellipsis{text-overflow:ellipsis}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.border-2{border-width:2px}.border-\[0\.5px\]{border-width:.5px}.border-\[1px\]{border-width:1px}.border-b-0{border-bottom-width:0}.border-r-0{border-right-width:0}.border-solid{border-style:solid}.border-detailnav{--tw-border-opacity:1;border-color:rgb(222 226 230/var(--tw-border-opacity))}.border-indigo-400{--tw-border-opacity:1;border-color:rgb(129 140 248/var(--tw-border-opacity))}.border-indigo-600{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity))}.border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity))}.border-neutral-400{--tw-border-opacity:1;border-color:rgb(163 163 163/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.bg-\[\#2196f3\]{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-indigo-400{--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-opacity-40{--tw-bg-opacity:0.4}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-500{--tw-gradient-from:#0ea5e9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,165,233,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-indigo-500{--tw-gradient-to:#6366f1 var(--tw-gradient-to-position)}.fill-\[\#666666\]{fill:#666}.fill-slate-300{fill:#cbd5e1}.fill-slate-500{fill:#64748b}.p-1{padding:.25rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-2{padding-left:.5rem}.pl-6{padding-left:1.5rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.pr-8{padding-right:2rem}.text-center{text-align:center}.font-kanit{font-family:var(--kanit)}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.leading-loose{line-height:2}.leading-snug{line-height:1.375}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-\[background\]{transition-property:background;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}body{margin:0}.custom-scroll::-webkit-scrollbar{width:4px;height:4px;border-radius:12px}.custom-scroll::-webkit-scrollbar-thumb{border-radius:100px;background-color:#6366f1}.custom-scroll::-webkit-scrollbar-track{background-color:#f5f5f5;border-radius:100px}.custom-scroll-dark::-webkit-scrollbar{width:4px;height:4px;border-radius:12px}.custom-scroll-dark::-webkit-scrollbar-thumb{border-radius:100px;background-color:#6366f1}.custom-scroll-dark::-webkit-scrollbar-track{background-color:#262626}:is(.dark .dark\:prose-invert){--tw-prose-body:#a3a3a3;--tw-prose-headings:#e5e5e5;--tw-prose-lead:var(--tw-prose-invert-lead);--tw-prose-links:#e5e5e5;--tw-prose-bold:#e5e5e5;--tw-prose-counters:#e5e5e5;--tw-prose-bullets:#e5e5e5;--tw-prose-hr:var(--tw-prose-invert-hr);--tw-prose-quotes:#e5e5e5;--tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);--tw-prose-captions:var(--tw-prose-invert-captions);--tw-prose-kbd:var(--tw-prose-invert-kbd);--tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);--tw-prose-code:var(--tw-prose-invert-code);--tw-prose-pre-code:var(--tw-prose-invert-pre-code);--tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);--tw-prose-th-borders:var(--tw-prose-invert-th-borders);--tw-prose-td-borders:var(--tw-prose-invert-td-borders)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:bg-\[\#2196f3\]:hover{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.hover\:bg-tag-hover:hover{--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity))}.hover\:fill-black:hover{fill:#000}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:drop-shadow-tag-hover:hover{--tw-drop-shadow:drop-shadow(0px 0px 10px rgba(99,102,241,.5));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-indigo-200:focus{--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity))}:is(.dark .dark\:border-dark-secondary){--tw-border-opacity:1;border-color:rgb(163 163 163/var(--tw-border-opacity))}:is(.dark .dark\:border-darkdetailnav){--tw-border-opacity:1;border-color:rgb(77 77 77/var(--tw-border-opacity))}:is(.dark .dark\:border-gray-600){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}:is(.dark .dark\:border-indigo-200){--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity))}:is(.dark .dark\:border-neutral-700){--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}:is(.dark .dark\:bg-\[\#2196f3\]){--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}:is(.dark .dark\:bg-\[\#363636\]){--tw-bg-opacity:1;background-color:rgb(54 54 54/var(--tw-bg-opacity))}:is(.dark .dark\:bg-dark-primary){--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}:is(.dark .dark\:bg-dark-secondary){--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}:is(.dark .dark\:bg-neutral-800){--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}:is(.dark .dark\:fill-\[rgb\(181\2c 181\2c 181\)\]){fill:#b5b5b5}:is(.dark .dark\:text-\[\#E5E5E5\]){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}:is(.dark .dark\:text-dark-primary){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}:is(.dark .dark\:text-dark-secondary){--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-400){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-200){--tw-text-opacity:1;color:rgb(199 210 254/var(--tw-text-opacity))}:is(.dark .dark\:hover\:bg-\[\#2196f3\]:hover){--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-dark-secondary:hover){--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-700:hover){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-800:hover){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-slate-800:hover){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-tag-dark-hover:hover){--tw-bg-opacity:1;background-color:rgb(54 54 54/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:fill-white:hover){fill:#fff}:is(.dark .dark\:hover\:text-dark-primary:hover){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-white:hover){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:focus\:border-indigo-200:focus){--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity))}@media (min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:768px){.md\:block{display:block}.md\:w-4\/5{width:80%}.md\:flex-row{flex-direction:row}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:leading-snug{line-height:1.375}}@media (min-width:1024px){.lg\:block{display:block}.lg\:flex{display:flex}.lg\:w-\[calc\(50\%-6\.5rem\)\]{width:calc(50% - 6.5rem)}.lg\:flex-row{flex-direction:row}.lg\:gap-52{gap:13rem}.lg\:text-lg{font-size:1.125rem;line-height:1.75rem}} \ No newline at end of file +*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*{scrollbar-color:auto;scrollbar-width:auto}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);font-size:.875em;border-radius:.3125rem;padding:.1875em .375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:17 24 39;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-left:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-zinc{--tw-prose-body:#3f3f46;--tw-prose-headings:#18181b;--tw-prose-lead:#52525b;--tw-prose-links:#18181b;--tw-prose-bold:#18181b;--tw-prose-counters:#71717a;--tw-prose-bullets:#d4d4d8;--tw-prose-hr:#e4e4e7;--tw-prose-quotes:#18181b;--tw-prose-quote-borders:#e4e4e7;--tw-prose-captions:#71717a;--tw-prose-kbd:#18181b;--tw-prose-kbd-shadows:24 24 27;--tw-prose-code:#18181b;--tw-prose-pre-code:#e4e4e7;--tw-prose-pre-bg:#27272a;--tw-prose-th-borders:#d4d4d8;--tw-prose-td-borders:#e4e4e7;--tw-prose-invert-body:#d4d4d8;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#a1a1aa;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#a1a1aa;--tw-prose-invert-bullets:#52525b;--tw-prose-invert-hr:#3f3f46;--tw-prose-invert-quotes:#f4f4f5;--tw-prose-invert-quote-borders:#3f3f46;--tw-prose-invert-captions:#a1a1aa;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d4d4d8;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#52525b;--tw-prose-invert-td-borders:#3f3f46}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-12{bottom:3rem}.left-0{left:0}.left-8{left:2rem}.right-0{right:0}.right-8{right:2rem}.top-0{top:0}.top-1{top:.25rem}.top-32{top:8rem}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.mx-12{margin-left:3rem;margin-right:3rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-8{margin-left:2rem;margin-right:2rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-mt-0{margin-top:0}.-mt-0\.5{margin-top:-.125rem}.-mt-1{margin-top:-.25rem}.mb-1{margin-bottom:.25rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-5{margin-left:1.25rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-12{margin-right:3rem}.mr-8{margin-right:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.flex{display:flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-1\/3{height:33.333333%}.h-12{height:3rem}.h-14{height:3.5rem}.h-2\/3{height:66.666667%}.h-20{height:5rem}.h-3{height:.75rem}.h-40{height:10rem}.h-8{height:2rem}.h-80{height:20rem}.h-96{height:24rem}.h-auto{height:auto}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.max-h-\[380px\]{max-height:380px}.max-h-\[500px\]{max-height:500px}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-32{width:8rem}.w-60{width:15rem}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.flex-1{flex:1 1 0%}.-translate-y-full{--tw-translate-y:-100%}.-translate-y-full,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-24{gap:6rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-ellipsis{text-overflow:ellipsis}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.border-2{border-width:2px}.border-\[0\.5px\]{border-width:.5px}.border-\[1px\]{border-width:1px}.border-b-0{border-bottom-width:0}.border-r-0{border-right-width:0}.border-solid{border-style:solid}.border-detailnav{--tw-border-opacity:1;border-color:rgb(222 226 230/var(--tw-border-opacity))}.border-indigo-400{--tw-border-opacity:1;border-color:rgb(129 140 248/var(--tw-border-opacity))}.border-indigo-600{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity))}.border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity))}.border-neutral-400{--tw-border-opacity:1;border-color:rgb(163 163 163/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.bg-\[\#2196f3\]{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-indigo-400{--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-opacity-40{--tw-bg-opacity:0.4}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-500{--tw-gradient-from:#0ea5e9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,165,233,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-indigo-500{--tw-gradient-to:#6366f1 var(--tw-gradient-to-position)}.fill-\[\#666666\]{fill:#666}.fill-slate-300{fill:#cbd5e1}.fill-slate-500{fill:#64748b}.p-1{padding:.25rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-2{padding-left:.5rem}.pl-6{padding-left:1.5rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.pr-8{padding-right:2rem}.text-center{text-align:center}.font-kanit{font-family:var(--kanit)}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.leading-loose{line-height:2}.leading-snug{line-height:1.375}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-\[background\]{transition-property:background;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}body{margin:0}.custom-scroll::-webkit-scrollbar{width:4px;height:4px;border-radius:12px}.custom-scroll::-webkit-scrollbar-thumb{border-radius:100px;background-color:#6366f1}.custom-scroll::-webkit-scrollbar-track{background-color:#f5f5f5;border-radius:100px}.custom-scroll-dark::-webkit-scrollbar{width:4px;height:4px;border-radius:12px}.custom-scroll-dark::-webkit-scrollbar-thumb{border-radius:100px;background-color:#6366f1}.custom-scroll-dark::-webkit-scrollbar-track{background-color:#262626}:is(.dark .dark\:prose-invert){--tw-prose-body:#a3a3a3;--tw-prose-headings:#e5e5e5;--tw-prose-lead:var(--tw-prose-invert-lead);--tw-prose-links:#e5e5e5;--tw-prose-bold:#e5e5e5;--tw-prose-counters:#e5e5e5;--tw-prose-bullets:#e5e5e5;--tw-prose-hr:var(--tw-prose-invert-hr);--tw-prose-quotes:#e5e5e5;--tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);--tw-prose-captions:var(--tw-prose-invert-captions);--tw-prose-kbd:var(--tw-prose-invert-kbd);--tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);--tw-prose-code:var(--tw-prose-invert-code);--tw-prose-pre-code:var(--tw-prose-invert-pre-code);--tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);--tw-prose-th-borders:var(--tw-prose-invert-th-borders);--tw-prose-td-borders:var(--tw-prose-invert-td-borders)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:bg-\[\#2196f3\]:hover{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.hover\:bg-tag-hover:hover{--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity))}.hover\:fill-black:hover{fill:#000}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:drop-shadow-tag-hover:hover{--tw-drop-shadow:drop-shadow(0px 0px 10px rgba(99,102,241,.5));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-indigo-200:focus{--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity))}:is(.dark .dark\:border-dark-secondary){--tw-border-opacity:1;border-color:rgb(163 163 163/var(--tw-border-opacity))}:is(.dark .dark\:border-darkdetailnav){--tw-border-opacity:1;border-color:rgb(77 77 77/var(--tw-border-opacity))}:is(.dark .dark\:border-gray-600){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}:is(.dark .dark\:border-indigo-200){--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity))}:is(.dark .dark\:border-neutral-700){--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}:is(.dark .dark\:bg-\[\#2196f3\]){--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}:is(.dark .dark\:bg-\[\#363636\]){--tw-bg-opacity:1;background-color:rgb(54 54 54/var(--tw-bg-opacity))}:is(.dark .dark\:bg-dark-primary){--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}:is(.dark .dark\:bg-dark-secondary){--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}:is(.dark .dark\:bg-neutral-800){--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}:is(.dark .dark\:fill-\[rgb\(181\2c 181\2c 181\)\]){fill:#b5b5b5}:is(.dark .dark\:text-\[\#E5E5E5\]){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}:is(.dark .dark\:text-dark-primary){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}:is(.dark .dark\:text-dark-secondary){--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-400){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-200){--tw-text-opacity:1;color:rgb(199 210 254/var(--tw-text-opacity))}:is(.dark .dark\:hover\:bg-\[\#2196f3\]:hover){--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-dark-secondary:hover){--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-700:hover){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-800:hover){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-slate-800:hover){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-tag-dark-hover:hover){--tw-bg-opacity:1;background-color:rgb(54 54 54/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:fill-white:hover){fill:#fff}:is(.dark .dark\:hover\:text-dark-primary:hover){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-white:hover){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:focus\:border-indigo-200:focus){--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity))}@media (min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:768px){.md\:block{display:block}.md\:w-4\/5{width:80%}.md\:flex-row{flex-direction:row}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:leading-snug{line-height:1.375}}@media (min-width:1024px){.lg\:block{display:block}.lg\:flex{display:flex}.lg\:w-\[calc\(50\%-6\.5rem\)\]{width:calc(50% - 6.5rem)}.lg\:flex-row{flex-direction:row}.lg\:gap-52{gap:13rem}.lg\:text-lg{font-size:1.125rem;line-height:1.75rem}} \ No newline at end of file diff --git a/_next/static/r3TVFGStx9-VzPRjNWTfb/_buildManifest.js b/_next/static/r3TVFGStx9-VzPRjNWTfb/_buildManifest.js deleted file mode 100644 index 70dbdf2..0000000 --- a/_next/static/r3TVFGStx9-VzPRjNWTfb/_buildManifest.js +++ /dev/null @@ -1 +0,0 @@ -self.__BUILD_MANIFEST=function(s,c,a,t){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,c,a,t,"static/chunks/pages/index-4585cc75c60696f1.js"],"/_error":["static/chunks/pages/_error-ee5b5fb91d29d86f.js"],"/posts/search":[s,c,a,t,"static/chunks/pages/posts/search-c3b2e67574e5b2ba.js"],"/posts/tag/[tag]":[s,c,a,t,"static/chunks/pages/posts/tag/[tag]-472b20abeb548c59.js"],"/posts/[category]":[s,c,a,t,"static/chunks/pages/posts/[category]-fa20e1e8deb8548b.js"],"/[...detail]":[s,c,a,"static/chunks/393-7217afb82985f4a5.js",t,"static/chunks/pages/[...detail]-3b4126e788667b59.js"],sortedPages:["/","/_app","/_error","/posts/search","/posts/tag/[tag]","/posts/[category]","/[...detail]"]}}("static/css/4633ec6f7ca519e3.css","static/css/83110ef01d855e81.css","static/chunks/135-0e45b9dfc77f7376.js","static/chunks/979-7390dd4fc9e19803.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/index.html b/index.html index 9bb2c38..26cc2e5 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/Algorithm.html b/posts/Algorithm.html index 5d8fdff..f374f1c 100644 --- a/posts/Algorithm.html +++ b/posts/Algorithm.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git "a/posts/Algorithm/[\353\260\261\354\244\200 gold 5] \353\271\214\353\237\260 \355\230\270\354\204\235.html" "b/posts/Algorithm/[\353\260\261\354\244\200 gold 5] \353\271\214\353\237\260 \355\230\270\354\204\235.html" index bcb6424..621647a 100644 --- "a/posts/Algorithm/[\353\260\261\354\244\200 gold 5] \353\271\214\353\237\260 \355\230\270\354\204\235.html" +++ "b/posts/Algorithm/[\353\260\261\354\244\200 gold 5] \353\271\214\353\237\260 \355\230\270\354\204\235.html" @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git "a/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\225\204\354\235\264\355\205\234 \354\244\215\352\270\260.html" "b/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\225\204\354\235\264\355\205\234 \354\244\215\352\270\260.html" index 34e2696..be8d9e1 100644 --- "a/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\225\204\354\235\264\355\205\234 \354\244\215\352\270\260.html" +++ "b/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\225\204\354\235\264\355\205\234 \354\244\215\352\270\260.html" @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git "a/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\247\225\352\262\200\353\213\244\353\246\254\352\261\264\353\204\210\352\270\260.html" "b/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\247\225\352\262\200\353\213\244\353\246\254\352\261\264\353\204\210\352\270\260.html" index 25ce619..39facb6 100644 --- "a/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\247\225\352\262\200\353\213\244\353\246\254\352\261\264\353\204\210\352\270\260.html" +++ "b/posts/Algorithm/[\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244lv3]\354\247\225\352\262\200\353\213\244\353\246\254\352\261\264\353\204\210\352\270\260.html" @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/Javascript.html b/posts/Javascript.html index a25bba5..7d8d6d9 100644 --- a/posts/Javascript.html +++ b/posts/Javascript.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/Javascript/javascriptdeepdive09.html b/posts/Javascript/javascriptdeepdive09.html index b1753f2..8d029e3 100644 --- a/posts/Javascript/javascriptdeepdive09.html +++ b/posts/Javascript/javascriptdeepdive09.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/Javascript/javascriptdeepdive10.html b/posts/Javascript/javascriptdeepdive10.html index a867391..ac58832 100644 --- a/posts/Javascript/javascriptdeepdive10.html +++ b/posts/Javascript/javascriptdeepdive10.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/Javascript/javascriptdeepdive11.html b/posts/Javascript/javascriptdeepdive11.html index 217e694..5c9fade 100644 --- a/posts/Javascript/javascriptdeepdive11.html +++ b/posts/Javascript/javascriptdeepdive11.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/React.html b/posts/React.html index baec721..7e4d905 100644 --- a/posts/React.html +++ b/posts/React.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git "a/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.html" "b/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.html" index 30a1f32..a6838d3 100644 --- "a/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.html" +++ "b/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM.html" @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git "a/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM/\355\214\214\354\235\264\353\262\204 \355\212\270\353\246\254.png" "b/posts/React/[React DeepDive] React\354\235\230 \352\260\200\354\203\201 DOM/\355\214\214\354\235\264\353\262\204 \355\212\270\353\246\254.png" new file mode 100644 index 0000000000000000000000000000000000000000..2231c82878a866b2aaecfe77b5883cf939f1b609 GIT binary patch literal 67898 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 X(ltZ&H7~9dr`FN_d%NSdUhDq`s)JKQ literal 0 HcmV?d00001 diff --git a/posts/all.html b/posts/all.html index 8340adf..7e8e28b 100644 --- a/posts/all.html +++ b/posts/all.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/search.html b/posts/search.html index aa94ddd..f238dee 100644 --- a/posts/search.html +++ b/posts/search.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/Algorithm.html b/posts/tag/Algorithm.html index 02c8999..ebb0641 100644 --- a/posts/tag/Algorithm.html +++ b/posts/tag/Algorithm.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/Dummy.html b/posts/tag/Dummy.html index 2e18003..6d77b1c 100644 --- a/posts/tag/Dummy.html +++ b/posts/tag/Dummy.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/JavaScript.html b/posts/tag/JavaScript.html index 71cdec9..7775d0d 100644 --- a/posts/tag/JavaScript.html +++ b/posts/tag/JavaScript.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/Virtual DOM.html b/posts/tag/Virtual DOM.html index 7f9a90c..4dfbf66 100644 --- a/posts/tag/Virtual DOM.html +++ b/posts/tag/Virtual DOM.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/all.html b/posts/tag/all.html index cada896..c140091 100644 --- a/posts/tag/all.html +++ b/posts/tag/all.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/bfs.html b/posts/tag/bfs.html index af0d192..52f348c 100644 --- a/posts/tag/bfs.html +++ b/posts/tag/bfs.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/deepdive.html b/posts/tag/deepdive.html index 86d2e02..b0831c8 100644 --- a/posts/tag/deepdive.html +++ b/posts/tag/deepdive.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/dfs.html b/posts/tag/dfs.html index 1b50434..ccc3e33 100644 --- a/posts/tag/dfs.html +++ b/posts/tag/dfs.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/gold.html b/posts/tag/gold.html index f762fc4..061ef9a 100644 --- a/posts/tag/gold.html +++ b/posts/tag/gold.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/lv3.html b/posts/tag/lv3.html index d97e474..20b00ba 100644 --- a/posts/tag/lv3.html +++ b/posts/tag/lv3.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/posts/tag/react.html b/posts/tag/react.html index da89e96..6a31b8a 100644 --- a/posts/tag/react.html +++ b/posts/tag/react.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git "a/posts/tag/\353\260\261\354\244\200.html" "b/posts/tag/\353\260\261\354\244\200.html" index a0c3a50..c767a39 100644 --- "a/posts/tag/\353\260\261\354\244\200.html" +++ "b/posts/tag/\353\260\261\354\244\200.html" @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git "a/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.html" "b/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.html" index 2d4abad..0320849 100644 --- "a/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.html" +++ "b/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.html" @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git "a/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.html" "b/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.html" index d180435..78986eb 100644 --- "a/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.html" +++ "b/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.html" @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file