diff --git a/404.html b/404.html index 6f58529..006b79b 100644 --- a/404.html +++ b/404.html @@ -5,8 +5,8 @@ Page Not Found • Wandered2LA - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

diff --git a/assets/images/git-add-b3ba9ff3088ef52c696147b24dca6437.png b/assets/images/git-add-b3ba9ff3088ef52c696147b24dca6437.png new file mode 100644 index 0000000..3d311bb Binary files /dev/null and b/assets/images/git-add-b3ba9ff3088ef52c696147b24dca6437.png differ diff --git a/assets/images/git-status-0c69ca9fd992f3efb893ab5a89f6d2a6.png b/assets/images/git-status-0c69ca9fd992f3efb893ab5a89f6d2a6.png new file mode 100644 index 0000000..fb9c8b6 Binary files /dev/null and b/assets/images/git-status-0c69ca9fd992f3efb893ab5a89f6d2a6.png differ diff --git a/assets/js/528fb942.35c77b24.js b/assets/js/528fb942.35c77b24.js deleted file mode 100644 index 8cbb962..0000000 --- a/assets/js/528fb942.35c77b24.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[3664],{3884:(n,e,s)=>{s.r(e),s.d(e,{assets:()=>t,contentTitle:()=>d,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>o});var i=s(7624),r=s(2172);const l={slug:"frontend-environment",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",authors:["WanderedToLa"],tags:["frontend","environment","dependencies","transplier","git"]},d=void 0,c={permalink:"/blog/frontend-environment",editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-07-19-frontend/index.md",source:"@site/blog/2024-07-19-frontend/index.md",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",description:"\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574",date:"2024-07-19T00:00:00.000Z",formattedDate:"July 19, 2024",tags:[{label:"frontend",permalink:"/blog/tags/frontend"},{label:"environment",permalink:"/blog/tags/environment"},{label:"dependencies",permalink:"/blog/tags/dependencies"},{label:"transplier",permalink:"/blog/tags/transplier"},{label:"git",permalink:"/blog/tags/git"}],readingTime:13.525,hasTruncateMarker:!1,authors:[{name:"WooSeok",url:"https://github.com/WanderedToLa",imageURL:"https://avatars.githubusercontent.com/u/87642287?v=4",key:"WanderedToLa"}],frontMatter:{slug:"frontend-environment",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",authors:["WanderedToLa"],tags:["frontend","environment","dependencies","transplier","git"]},unlisted:!1,nextItem:{title:"docusaurus custom plugin \ub9cc\ub4e4\uae30",permalink:"/blog/docusaurus-plugin"}},t={authorsImageUrls:[void 0]},o=[{value:"dependencies in Package.json",id:"dependencies-in-packagejson",level:2},{value:"dependencies\uc758 \ubb38\uc81c\uc810",id:"dependencies\uc758-\ubb38\uc81c\uc810",level:3},{value:"Zero Install",id:"zero-install",level:3},{value:"Bundler",id:"bundler",level:2},{value:"Resolution",id:"resolution",level:3},{value:"Load",id:"load",level:3},{value:"Optimization",id:"optimization",level:3},{value:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9",id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",level:2},{value:"\ucc38\uace0",id:"\ucc38\uace0",level:2}];function a(n){const e={a:"a",admonition:"admonition",br:"br",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.M)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.p,{children:["\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574",(0,i.jsx)(e.br,{}),"\n","frontend \ub85c\uc9c1\ubfd0 \uc544\ub2c8\ub77c \ubcf4\uc774\uc9c0 \uc54a\ub294 \ud658\uacbd\uc124\uc815\uc5d0\ub3c4 \uc5c4\uccad\ub09c \ub178\ub825\uc744 \ud558\uace0\uc788\uc74c\uc744 \uc54c\uac8c\ub418\uc5c8\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc774\uc804\uc5d0 \uac1c\ubc1c\uc744 \ud558\uba70 \uc54c\uace0\ub294 \uc788\uc9c0\ub9cc \uc790\uc138\ud558\uac8c \ubab0\ub790\ub358 \ubd80\ubd84\uacfc \uadf8\ub4e4\uc758 \ub514\ud14c\uc77c\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ub180\ub77c\uc6cc\ud558\uba70 \uba74\uc811\uc900\ube44\ub97c \ud588\ub294\ub370 \uc774 \uae00\uc5d0\uc11c\ub294 \uc774 \uacfc\uc815\uc5d0\uc11c \uc54c\uac8c\ub41c \uc0ac\uc2e4\ub4e4\uc744 \uc815\ub9ac\ud55c\ub2e4."]}),"\n",(0,i.jsx)(e.admonition,{title:"\ucc38\uace0",type:"important",children:(0,i.jsx)(e.p,{children:"Youtube \ubc0f toss tech blog\ub97c \ucc38\uace0\ud558\uc5ec \uc791\uc131\ud55c \uae00 \uc785\ub2c8\ub2e4."})}),"\n",(0,i.jsx)(e.h2,{id:"dependencies-in-packagejson",children:"dependencies in Package.json"}),"\n",(0,i.jsxs)(e.p,{children:["\uc6b0\ub9ac\uac00 \uac1c\ubc1c\uc744\ud558\uba70 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub97c \ud1b5\ud574 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud560 \ub54c\ub294\n",(0,i.jsx)(e.code,{children:"package.json"})," \ub0b4\uc758 ",(0,i.jsx)(e.code,{children:"dependencies"})," \ud544\ub4dc\ub97c \ud1b5\ud574 \uc758\uc874\uc131\uc744 \uaddc\uc815\ud558\ub294\uac83\uc73c\ub85c \uc124\uce58\ud55c\ub2e4\n\uc774\ub54c \ud574\ub2f9 \ud328\ud0a4\uc9c0\uc758 \uc774\ub984\uacfc \ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud55c \uac1d\uccb4\ub97c \ud1b5\ud574 \uc124\uce58\ud558\ub294\ub370\n\ubc84\uc804\uc758 \ubc94\uc704\ub294 \ud558\ub098 \ud639\uc740 \uc5ec\ub7ec\uac1c\uc758 \uacf5\ubc31\uc73c\ub85c \ubd84\ub9ac\ub41c \ubb38\uc790\uc5f4\uc774\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud558\ub294 \uc790\uc138\ud55c \ubc29\ubc95\uc740 ",(0,i.jsx)(e.a,{href:"https://docs.npmjs.com/misc/semver",children:"semver"}),"\ub97c \ucc38\uace0"]}),"\n",(0,i.jsxs)(e.p,{children:["\ub9cc\uc57d \uac1c\ubc1c\uc911\uc5d0\ub9cc \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc77c \uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\ud544\ub4dc\ub97c \ud65c\uc6a9\ud558\uba70"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-bash",children:"npm install some-package --save-dev\n"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \uba85\ub839\uc5b4\ub85c \uc124\uce58 \uac00\ub2a5\ud558\uace0 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58 \ud6c4 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud55c\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc5ec\uae30\uc11c \ub9cc\uc57d \ub0b4\uac00 clone\ub41c repository\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"npm install"}),"\ud588\uc744 \uacbd\uc6b0 npm\uc740 \uc774\ub97c \ud504\ub85c\uc81d\ud2b8\ub97c",(0,i.jsx)(e.br,{}),"\n","\uac1c\ubc1c\uc911\uc774\ub77c\uace0 \uc778\uc2dd\ud558\uace0 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud558\ub2c8 \uc720\uc758\ud560 \uac83."]}),"\n",(0,i.jsxs)(e.p,{children:["\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ubcf8\uc778\ub9cc\uc758 plugin\uc744 \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\uc778\ub370",(0,i.jsx)(e.br,{}),"\n","\uc815\uc758\uc5d0 \ub530\ub974\uba74 \uc0c1\uc18d\ub418\ub294 \uc758\uc874\uc131\uc73c\ub85c \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\ub294 \uacf3\uc5d0\uc11c \uc81c\uacf5\ud574\uc57c\ud558\ub294 \uc758\uc874\uc131\uc774\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\ub9cc\uc57d \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc5d0\uc11c \ud328\ud0a4\uc9c0\ub97c ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\ub85c \uba85\uc2dc\ud560 \uacbd\uc6b0 \ud328\ud0a4\uc9c0\ub97c \uc81c\uacf5\ud558\ub294 \ucc45\uc784\uc744",(0,i.jsx)(e.br,{}),"\n","\uac00\uc7a5 \uc0c1\uc704\ud504\ub85c\uc81d\ud2b8\ub85c \ubc14\uafb8\uae30 \ub54c\ubb38\uc5d0 \ubc88\ub4e4\ub9c1 \uacb0\uacfc\uc5d0\uc11c \uc911\ubcf5\uc744 \ub9c9\uc744 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.p,{children:"\ud558\uc9c0\ub9cc \uc774\ub7ec\ud55c \uc7a5\uc810\uc5d0\ub3c4 \uce58\uba85\uc801\uc778 \ub2e8\uc810\uc740 \uc758\uc874\uc131 \uc804\ud30c\ubb38\uc81c\uc774\ub2e4."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-json",children:'package A:\n peerDependencies:\n "package P"\npackage B:\n dependencies:\n "package A"\n peerDependencies:\n "package P"\npackage C\n dependencies:\n "package B"\n peerDependencies:\n "package P"\n'})}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc774 peerDependency\ub97c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(e.code,{children:"package A"}),"\uc5d0\uc11c A\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubaa8\ub4e0 \ud328\ud0a4\uc9c0\ub4e4\uc740\nA\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c\uc5d0\ub3c4 peerDependencies\uc5d0 \ucd94\uac00\ud574\uc8fc\uc5b4\uc57c \ud558\uba70 \uc774\ub294 \uc758\uc874\uc131\uc758 \uad00\ub9ac\ubcf5\uc7a1\ub3c4\ub97c \uc99d\uac00\uc2dc\ucf1c",(0,i.jsx)(e.br,{}),"\n","\uc5d0\ub7ec\uc758 \ud655\ub960\uc744 \ub192\uc778\ub2e4 npm\uacfc \uac19\uc740 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub4e4\uc5d0\uc11c \uc774\ub7ec\ud55c \uc624\ub958\ub4e4\uc744 \uc5c4\ubc00\ud788 \uac80\uc0ac\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0\n\uc720\uc758\ud574\uc57c \ud558\uba70 \ub530\ub77c\uc11c ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0",(0,i.jsx)(e.br,{}),"\n","\ub2e8 \ud558\ub098\uc758 \ud328\ud0a4\uc9c0\ub9cc \uc874\uc7ac\ud574\uc57c \ud558\ub294\uacbd\uc6b0(\uc2f1\uae00\ud1a4) \uc77c\ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"dependencies\uc758-\ubb38\uc81c\uc810",children:"dependencies\uc758 \ubb38\uc81c\uc810"}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \ubb38\uc81c\ub9d0\uace0\ub3c4 ",(0,i.jsx)(e.code,{children:"npm/node_modules"}),"\uc758 \ubb38\uc81c\ub294 ",(0,i.jsx)(e.strong,{children:"\uc720\ub839\uc758\uc874\uc131(Phantom Dependency)"})," \ud604\uc0c1\uc774\ub2e4",(0,i.jsx)(e.br,{}),"\n","node_modules\ub97c \uc0ac\uc6a9\ud558\ub294 yarn v1 \ubc0f npm\uc5d0\uc11c\ub294 \uc911\ubcf5\ud574\uc11c \uc124\uce58\ud558\ub294 \ubaa8\ub4c8\uc744 \ud53c\ud558\uae30 \uc704\ud574",(0,i.jsx)(e.br,{}),"\n","\ud638\uc774\uc2a4\ud305 \uae30\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{alt:"Hoisting Tree",src:s(6112).c+"",width:"1024",height:"458"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc67c\ucabd\uacfc \uac19\uc740 \uc758\uc874\uc131\ud2b8\ub9ac\uc77c \uacbd\uc6b0 \ub514\uc2a4\ud06c\uacf5\uac04\uc758 \uc808\uc57d\uc744 \uc704\ud574 \uc911\ubcf5\ub418\ub294 \ud2b8\ub9ac\ub97c \uc9c0\uc6b0\ub294 \uacfc\uc815\uc5d0\uc11c",(0,i.jsx)(e.br,{}),"\n","\uc9c1\uc811 \uc758\uc874\ud558\uace0 \uc788\uc9c0 \uc54a\uc558\ub358 ",(0,i.jsx)(e.code,{children:"B(1.0)"})," \ud328\ud0a4\uc9c0\ub97c \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.",(0,i.jsx)(e.br,{}),"\n","package.json \uc5d0 \uba85\uc2dc\ud558\uc9c0 \uc54a\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ud604\uc0c1\uc744 Phantom Dependency\ub77c\uace0 \ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\uc774\ub7ec\ud55c \ud2b9\uc131\uc740 \uc2dc\uc2a4\ud15c\uc744 \ud63c\ub780\uc2a4\ub7fd\uac8c \ud558\uace0 \ucd5c\uc545\uc758 \uacbd\uc6b0 Runtime Error\uc758 \uac00\ub2a5\uc131\uc744 \ub192\ud78c\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ud1a0\uc2a4\ud300\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,i.jsx)(e.code,{children:"Yarn Berry + PnP"}),"\ub97c \ub3c4\uc785\ud558\uba70 \ud574\uacb0\ud588\ub2e4.",(0,i.jsx)(e.br,{}),"\n","Yarn Berry\ub294 ",(0,i.jsx)(e.code,{children:"Plug'n'Play"})," \uc804\ub7b5\uc744 \uc774\uc6a9\ud558\uc5ec \uae30\uc874\uc758 Package.json\uc744 \uae30\ubc18\uc73c\ub85c \uc758\uc874\uc131 \ud2b8\ub9ac\ub97c",(0,i.jsx)(e.br,{}),"\n","\ub9cc\ub4e4\uc5b4 node_modules \uad6c\uc870\ub97c \uc0dd\uc131\ud558\ub358 \ubc29\uc2dd\uc5d0\uc11c \uc758\uc874\uc131 \uc124\uce58\uc2dc node_modules\ub97c \uc0dd\uc131\ud558\uc9c0 \uc54a\uace0",(0,i.jsx)(e.br,{}),"\n",(0,i.jsx)(e.code,{children:".yarn/cache"}),"\ud3f4\ub354\uc5d0 \uc758\uc874\uc131 \uc815\ubcf4\ub97c \uc800\uc7a5\ud55c\ub2e4 \ub610\ud55c ",(0,i.jsx)(e.code,{children:".pnp.cjs"})," \ud30c\uc77c\uc5d0 \uc758\uc874\uc131\uc744 \ucc3e\uc744 \uc218 \uc788\ub294",(0,i.jsx)(e.br,{}),"\n","\uc815\ubcf4\ub97c \uae30\ub85d\ud558\uc5ec \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0 \uad00\ub9ac\ub97c \ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["yarn\uc740 \uae30\uc874 node.js\uc758 ",(0,i.jsx)(e.code,{children:"require"}),"\ud568\uc218\ub97c \ub36e\uc5b4\uc50c\uc6cc \ub3d9\uc791\ud558\uba70 \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0\uad00\ub9ac\ub97c",(0,i.jsx)(e.br,{}),"\n","\ud560 \uc218 \uc788\uace0 \uc774\ub54c\ubb38\uc5d0 \ud2b9\uc815 \ud328\ud0a4\uc9c0\uc640 \uc758\uc874\uc131\uc5d0 \ub300\ud55c \uc815\ubcf4\uac00 \ud544\uc694\ud560 \ub54c \ubc14\ub85c \uc54c \uc218 \uc788\ub2e4",(0,i.jsx)(e.br,{}),"\n","\ub610\ud55c Yarn PnP \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uac01 \uc758\uc874\uc131\uc740 Zip \uc544\uce74\uc774\ube0c\ub85c \uad00\ub9ac\ud558\uac8c \ub418\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \uc7a5\uc810\uc774 \uc0dd\uae34\ub2e4"]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"node_modules\uac00 \uc5c6\uc74c -> \ube60\ub978 \uc124\uce58 \uac00\ub2a5"}),"\n",(0,i.jsx)(e.li,{children:"\ud328\ud0a4\uc9c0\ub4e4\uc740 \ud558\ub098\uc758 Zip\uc544\uce74\uc774\ube0c\ub85c \uc800\uc7a5\ud558\uc5ec \uc911\ubcf5\ubc29\uc9c0"}),"\n",(0,i.jsx)(e.li,{children:"\ud30c\uc77c\uc758 \uc218\uac00 \uc801\uc5b4\uc9c0\uba70 \ubcc0\uacbd\uc0ac\ud56d\uc758 \uac10\uc9c0\uac00 \uc26c\uc6cc\uc9c0\uace0 \uc0ad\uc81c\uac00 \ube60\ub974\ub2e4."}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"zero-install",children:"Zero Install"}),"\n",(0,i.jsxs)(e.p,{children:["\uc5ec\uae30\uc11c \ud55c\ubc1c \ub354 \ub098\uc544\uac00 \uc758\uc874\uc131\uc744 Git\uc73c\ub85c \uad00\ub9ac\ud55c\ub2e4\uba74 \uc5b4\ub5a8\uae4c?",(0,i.jsx)(e.br,{}),"\n","\uc77c\ubc18\uc801\uc778 node_modules\uc758 \ud06c\uae30\ub294 1.2GB/13\ub9cc5\ucc9c\uac1c\uc758 \ud30c\uc77c\uc744 \uac00\uc9c0\uace0 \uc788\uc9c0\ub9cc yarn\uc744 \uc0ac\uc6a9\ud55c\ub2e4\uba74",(0,i.jsx)(e.br,{}),"\n","139MB/2\ucc9c\uac1c\uc758 \uc555\ucd95\ud30c\uc77c\ub85c \uc904\uc5b4\ub4e0\ub2e4 \uc774\ub807\uac8c \uc904\uc5b4\ub4e0 \ud30c\uc77c\ud06c\uae30\ub294 Git\uc73c\ub85c \uad00\ub9ac\ud558\uc5ec \ubc84\uc804\uad00\ub9ac\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ud3ec\ud568\uc2dc\ud0a4\uace0 \uc124\uce58\ud560\uac8c \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc744 \uad6c\uc131\ud55c\ub2e4.(Zero-Install)"]}),"\n",(0,i.jsx)(e.p,{children:"\ud1a0\uc2a4\ud300\uc5d0\uc11c Zero-Install\uc744 \uc0ac\uc6a9\ud558\uba70 \uc5bb\uc740 \uc7a5\uc810 \ub450 \uac00\uc9c0"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"clone \ud639\uc740 branch\ubcc0\uacbd\uc2dc yarn install \uc2e4\ud589x"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"\ub9cc\uc57d \ub2e4\ub978 \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294 \ube0c\ub79c\uce58\ub85c \uc774\ub3d9\ud55c\ub2e4\uba74 \uc7ac\uc124\uce58\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"CI\ub3d9\uc791\uc2dc \uc758\uc874\uc131 \uc124\uce58\uc2dc\uac04 \uc808\uc57d"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["cache miss \uc77c\uacbd\uc6b0 60 ~ 90\ucd08 \uac00\ub7c9 \uc18c\uc694\ub418\ub358 \uc2dc\uac04\uc744 \uc758\uc874\uc131 \ubcf5\uc81c\ub9cc\uc73c\ub85c",(0,i.jsx)(e.br,{}),"\n","\ubc14\ub85c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\uc5ec \uc2dc\uac04\uc808\uc57d"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(e.h2,{id:"bundler",children:"Bundler"}),"\n",(0,i.jsxs)(e.p,{children:["javascript\uc5d0 \ubaa8\ub4c8\uc774\ub77c\ub294 \uac1c\ub150\uc774 \uc5c6\ub358\uc2dc\uc808 \uaddc\ubaa8\uac00 \ud070 \ud504\ub85c\uadf8\ub7a8\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ucabc\uac1c\uc11c \uc791\uc5c5\ud588\uc9c0\ub9cc",(0,i.jsx)(e.br,{}),"\n","\uc2a4\ud06c\ub9bd\ud2b8 \ud0dc\uadf8\ub97c \ud1b5\ud55c \uc804\uc5ed\ubcc0\uc218 \ucc38\uc870\ub97c \ud588\uae30\ub54c\ubb38\uc5d0 \ud568\uc218\ub098 \ubcc0\uc218\uc758 \uc774\ub984 \ucda9\ub3cc \ubb38\uc81c\ub97c \uc77c\uc73c\ud0a4\uace0",(0,i.jsx)(e.br,{}),"\n","\uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \uc2a4\ud06c\ub9bd\ud2b8 \ub85c\ub4dc\uc2dc\uac04\uc774 \uc99d\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc5d0 \uc548\uc88b\uc740 \uc601\ud5a5\uc744 \ub07c\ucce4\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ud558\ub098\ub85c \ud569\uce58\ub294 ",(0,i.jsx)(e.strong,{children:"\ubc88\ub4e4\ub9c1(Bundling)"})," \uc774\ub77c\ub294 \uac1c\ub150\uc774 \ud0c4\uc0dd\ud558\uace0",(0,i.jsx)(e.br,{}),"\n","CommonJS\uc758 ",(0,i.jsx)(e.code,{children:"require"}),"\ud568\uc218\uac00 \ub4f1\uc7a5\ud558\uba70 \uc774 \uc2dc\uc810\ubd80\ud130 \ud30c\uc77c\ub2e8\uc704\uc758 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud574\uc9c0\uace0 \uc218\ucc9c\uac1c\uc758",(0,i.jsx)(e.br,{}),"\n","JS\ud30c\uc77c\ub85c \ubd84\ub9ac\ud558\uba70 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc26c\uc6b4 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ud1b5\ud574 \ub354 \ub098\uc740 \uac1c\ubc1c\uacbd\ud5d8\uc744 \uc81c\uacf5\ud588\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ubaa8\ub4c8\uc758 \ud0c4\uc0dd\uacfc \ud568\uaed8 \uc0dd\uaca8\ub09c \ubc88\ub4e4\ub7ec\ub294 ",(0,i.jsx)(e.code,{children:"CommonJS"}),"\uc774\ud6c4\uc5d0\ub3c4 \uc0dd\uaca8\ub09c \ubaa8\ub4c8\uc5d0 \uc758\ud574 \uc124\uacc4\uc758 \uc601\ud5a5\uc744 \ubbf8\ucce4\uace0",(0,i.jsx)(e.br,{}),"\n","\uc9c0\uae08 \uc774\uc2dc\uc810\uc5d0\ub3c4 \uad49\uc7a5\ud788 \ub2e4\uc591\ud55c \ubc88\ub4e4\ub7ec\ub4e4\uc774 \uc788\uc9c0\ub9cc \ubc88\ub4e4\ub7ec\uc758 \ub3d9\uc791\uc740 \ud06c\uac8c \uc138 \uac00\uc9c0\ub85c \uad6c\ubd84\ud55c\ub2e4."]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Resolution"}),"\n",(0,i.jsx)(e.li,{children:"Load"}),"\n",(0,i.jsx)(e.li,{children:"Optimization"}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"resolution",children:"Resolution"}),"\n",(0,i.jsx)(e.p,{children:"resolution\ub2e8\uacc4\uc5d0\uc11c\ub294 import/require\ub418\ub294 \ud30c\uc77c\uc758 \uc704\uce58\ub97c \uc815\ud655\ud558\uac8c \ucc3e\ub294\uc5ed\ud560"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-tsx",children:"import { App } from './App';\n"})}),"\n",(0,i.jsxs)(e.p,{children:["App\uc744 import \ud558\ub294\uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"./App"}),"\uc758 \uc815\ud655\ud55c \uacbd\ub85c\ub97c \ud0d0\uc0c9\ud55c\ub2e4 (App.js, App.ts, App.tsx)",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub7ec\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \uc124\uc815\uc744 \uae30\ubcf8\uc81c\uacf5\ud558\uace0 \ud544\uc694\uc5d0\ub530\ub77c \ucee4\uc2a4\ud140\uac00\ub2a5.",(0,i.jsx)(e.br,{}),"\n","\uc774\ub807\uac8c \uc815\ud655\ud55c\uacbd\ub85c\ub97c \ud0d0\uc0c9\ud558\uc5ec \uc5b4\ub5a4\ud30c\uc77c\ub4e4\uc744 \ud569\uccd0\uc57c \ucd5c\uc885\uacb0\uacfc\ubb3c\uc774 \ub418\ub294\uc9c0 \uc54c \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"load",children:"Load"}),"\n",(0,i.jsxs)(e.p,{children:["Load\ub2e8\uacc4\uc5d0\uc11c\ub294 \ud45c\uc900 Javascript\ub85c \ubcc0\ud658\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \ud604\ub300\uc758 \uc6f9 \uac1c\ubc1c\uc740",(0,i.jsx)(e.br,{}),"\n","HTML,CSS,Javascript\ub85c\ub9cc \uac1c\ubc1c\ud558\uae30\uc5d4 \uc5b4\ub824\uc6c0\uc774 \uc788\uace0 \uc774\ub97c \ubcf4\uc644\ud558\uace0\uc790 \uc288\ud37c\uc14b \uc5b8\uc5b4\ub4e4\uc774 \ub4f1\uc7a5\ud558\uc600\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc774\uc5d0 \ub530\ub77c \ub300\ud45c\uc801\uc73c\ub85c Typescript\uc640 \uac19\uc740\uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uae30\uc704\ud574 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\uac00 \ub4f1\uc7a5\ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub9c1\uacfc\uc815\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"Babel/SWC"}),"\uac19\uc740 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub97c \uc218\uc6a9\ud558\uc5ec \ud45c\uc900Javascript \uc774\uc678\uc5d0\ub3c4 \uc0ac\uc6a9\uac00\ub2a5\ud55c",(0,i.jsx)(e.br,{}),"\n","\ud615\ud0dc\ub85c \ubc1c\uc804\ud588\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\uc5ec\uae30\uc11c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub294 \ud55c \uc5b8\uc5b4\ub97c \ucd94\uc0c1\ud654\ub2e8\uacc4\uac00 \ube44\uc2b7\ud55c \uc5b8\uc5b4\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uc5ed\ud560\uc744\ud558\uc9c0\ub9cc",(0,i.jsx)(e.br,{}),"\n","\uc5b8\uc5b4 \uc804\uccb4\uc801\uc73c\ub85c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4. \ubb38\ubc95\uc758 \ubb38\uc81c\uac00 \uc544\ub2cc \uc5b8\uc5b4\uc758 \ud45c\uc900\uc774 \ubcc0\uacbd\ub418\uac70\ub098 \uc0c8\ub85c\ucd94\uac00\ub418\ub294",(0,i.jsx)(e.br,{}),"\n","\ud568\uc218\uc758 \uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"\ud3f4\ub9ac\ud544(polyfill)"}),"\uacfc\uc815\uc744 \uac70\uccd0\uc57c\ud55c\ub2e4 \uad6c\ud604\uc774 \ub204\ub77d\ub41c \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \uba54\uafd4\uc8fc\ub294(fill in)",(0,i.jsx)(e.br,{}),"\n","\uc5ed\ud560\uc744 \ud558\uba70 \uae30\ub2a5\uc774\ub098 \uc0ac\uc6a9\uc790\uc758 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub530\ub77c \ub2e4\uc591\ud558\uac8c \uc124\uc815\ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"optimization",children:"Optimization"}),"\n",(0,i.jsxs)(e.p,{children:["Resolution/Load \ub2e8\uacc4\ub97c \uac70\uccd0 \uc644\uc804\ud55c JS\ud30c\uc77c \ud558\ub098\ub97c \uc0dd\uc131\ud588\ub2e4\uba74 \ub2e4\uc591\ud55c \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294",(0,i.jsx)(e.br,{}),"\n","JS\ud30c\uc77c\uc758 \ud06c\uae30\ub294 \ub108\ubb34 \ud06c\uae30 \ub54c\ubb38\uc5d0 \uc131\ub2a5\uc800\ud558\ub97c \uc720\ubc1c\ud560 \uc218 \uc788\ub2e4 \ub530\ub77c\uc11c \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc774\uae30\uc704\ud574",(0,i.jsx)(e.br,{}),"\n","\ub450 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud568"]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Minification (Compression + Mangling)"}),"\n",(0,i.jsx)(e.li,{children:"Tree Shaking"}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"1-1. Minification - Compression \ucf54\ub4dc\uc758 text\ub97c \ucd5c\ub300\ud55c \uc555\ucd95"})}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"undefined -> void 0"}),"\n",(0,i.jsx)(e.li,{children:"2 + 3 -> 5"}),"\n",(0,i.jsx)(e.li,{children:"!a && !b -> !(a || b)"}),"\n",(0,i.jsx)(e.li,{children:"Infinity -> 1/0"}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"1-2. Minification - Mangling \ubcc0\uc218,Class,\ud30c\uc77c\uc774\ub984 \ucd5c\uc801\ud654"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-javascript",children:"// function add(num1, num2) { return num1 + num2 }\nfunction add(l, r) {\n return l + r;\n}\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"2. Tree Shaking \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc \uc81c\uac70"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\ub97c \ubd84\uc11d\ud558\uace0 \uc81c\uac70\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \uc815\uc801\ubd84\uc11d\uc774 \uae4c\ub2e4\ub86d\uae30 \ub54c\ubb38\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub7ec\uc5d0 \ub530\ub77c \uc54c\uace0\ub9ac\uc998 \ubc0f \uc811\uadfc\ubc29\uc2dd\uc774 \ub2e4\ub974\uae30 \ub54c\ubb38\uc5d0 \ud070 \ucc28\uc774\uac00 \ub0a0 \uc218\uc788\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ud1a0\uc2a4\uc5d0\uc11c\ub294 \uc704\uc640 \uac19\uc740 \ubc88\ub4e4\ub7ec\uc758 \ud2b9\uc131\uc744 \ud65c\uc6a9\ud574 React Native\uc758 Metro \uc5d0\uc11c",(0,i.jsx)(e.br,{}),"\n","ESbuild\ub85c \uc62e\uae30\uba70 \ube4c\ub4dc\uc18d\ub3c4\ub97c \ucd5c\uc801\ud654 \ud588\ub358 \uc0ac\ub840\ub97c \uc18c\uac1c\ud55c\ub2e4."]}),"\n",(0,i.jsx)(e.h2,{id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",children:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9"}),"\n",(0,i.jsxs)(e.p,{children:["VCS\uc911 \ud558\ub098\uc778 Git\uc740 \uc0c8\ub85c \ucd94\uac00\ub41c \ud30c\uc77c \ud639\uc740 \ubcc0\uacbd\ub41c \ud30c\uc77c\uc758 \ub0b4\uc6a9\ub4e4\uc744 \uc27d\uac8c \ucd94\uc801\ud558\uace0 \uad00\ub9ac\ud560 \uc218 \uc788\ub294",(0,i.jsx)(e.br,{}),"\n","\ub3c4\uad6c\uc774\uba70 \uad00\ub9ac \ud560 \ud3f4\ub354\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"git init"})," \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 \uc2dc\uc791."]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Working Directory - \uc2e4\uc81c \uc791\uc5c5\uacf5\uac04"}),"\n",(0,i.jsx)(e.li,{children:"Staging Area - \ubcc0\uacbd\ub41c \ud30c\uc77c\ub4e4\uc758 \ub300\uae30\uacf5\uac04"}),"\n",(0,i.jsx)(e.li,{children:"Repository - \ucd5c\uc885\uc801\uc73c\ub85c \uc800\uc7a5\ub41c \ud30c\uc77c\ub4e4\uc758 \uacf5\uac04"}),"\n"]}),"\n",(0,i.jsxs)(e.p,{children:["\uc6b0\uc120 Git\uc740 \ud06c\uac8c \uc138 \uac00\uc9c0 \uc601\uc5ed\uc73c\ub85c \ubd84\ub9ac\ub418\uba70 \ud30c\uc77c\ub4e4\uc758 \ubcc0\ud654\ub97c gistory\ub97c \ud1b5\ud574 \ubd84\uc11d\ud558\uc5ec \uc815\ub9ac",(0,i.jsx)(e.br,{}),"\n","\u3141\u3141\u3141\u3141\u3141\u3141\u3141\u3141\u3141"]}),"\n",(0,i.jsx)(e.h2,{id:"\ucc38\uace0",children:"\ucc38\uace0"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://programmingsummaries.tistory.com/385",children:"package.json \ubc88\uc5ed"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://toss.tech/article/node-modules-and-yarn-berry",children:"node_modules\ub85c\ubd80\ud130 \uc6b0\ub9ac\ub97c \uad6c\uc6d0\ud574 \uc904 Yarn Berry"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=mee1QbvaO10&t=325s",children:"FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=Ix9gxqKOatY&t=114s",children:"FECONF 2022 [B2] \uc77c\ubc31\uac1c \ud328\ud0a4\uc9c0 \ubaa8\ub178\ub808\ud3ec \uc6b0\uc544\ud558\uac8c \uc6b4\uc601\ud558\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=QfU5REp8sjQ&t=1253s",children:"FEConf 2023 [B4] React Native, Metro\ub97c \ub118\uc5b4\uc11c"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=2IE68SDTYvI&list=PL1DJtS1Hv1PiGXmgruP1_gM2TSvQiOsFL&index=32",children:"\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uac1c\ubc1c\uc790\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c: \ub9e4\uc77c \ud558\ub8e8\ub97c \uc544\ub07c\ub294 DevOps \uc774\uc57c\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=IKyA8BKxpXc",children:"\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uc720\uc800\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c : 100\ub144\uc744 \uc544\uaef4\uc900 SSR \uc774\uc57c\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://medium.com/naver-place-dev/javascript-%EB%B2%88%EB%93%A4%EB%9F%AC%EC%9D%98-%EC%9D%B4%ED%95%B4-1-javascript-%EB%AA%A8%EB%93%88-d68c7e438fcd",children:"JavaScript \ubc88\ub4e4\ub7ec\uc758 \uc774\ud574"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://tech.wonderwall.kr/articles/git/",children:"Git \ub0b4\ubd80 \ub3d9\uc791 \ud30c\ud5e4\uce58\uae30"})}),"\n"]})]})}function h(n={}){const{wrapper:e}={...(0,r.M)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(a,{...n})}):a(n)}},6112:(n,e,s)=>{s.d(e,{c:()=>i});const i=s.p+"assets/images/hoisting-tree-45c2932b3dc3597787977575c84561d2.png"},2172:(n,e,s)=>{s.d(e,{I:()=>c,M:()=>d});var i=s(1504);const r={},l=i.createContext(r);function d(n){const e=i.useContext(l);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function c(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(r):n.components||r:d(n.components),i.createElement(l.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/528fb942.4de6bbc2.js b/assets/js/528fb942.4de6bbc2.js new file mode 100644 index 0000000..b271747 --- /dev/null +++ b/assets/js/528fb942.4de6bbc2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[3664],{3884:(n,e,s)=>{s.r(e),s.d(e,{assets:()=>t,contentTitle:()=>l,default:()=>h,frontMatter:()=>d,metadata:()=>c,toc:()=>o});var i=s(7624),r=s(2172);const d={slug:"frontend-environment",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",authors:["WanderedToLa"],tags:["frontend","environment","dependencies","transplier","git"]},l=void 0,c={permalink:"/blog/frontend-environment",editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-07-19-frontend/index.md",source:"@site/blog/2024-07-19-frontend/index.md",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",description:"\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574",date:"2024-07-19T00:00:00.000Z",formattedDate:"July 19, 2024",tags:[{label:"frontend",permalink:"/blog/tags/frontend"},{label:"environment",permalink:"/blog/tags/environment"},{label:"dependencies",permalink:"/blog/tags/dependencies"},{label:"transplier",permalink:"/blog/tags/transplier"},{label:"git",permalink:"/blog/tags/git"}],readingTime:14.845,hasTruncateMarker:!1,authors:[{name:"WooSeok",url:"https://github.com/WanderedToLa",imageURL:"https://avatars.githubusercontent.com/u/87642287?v=4",key:"WanderedToLa"}],frontMatter:{slug:"frontend-environment",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",authors:["WanderedToLa"],tags:["frontend","environment","dependencies","transplier","git"]},unlisted:!1,nextItem:{title:"docusaurus custom plugin \ub9cc\ub4e4\uae30",permalink:"/blog/docusaurus-plugin"}},t={authorsImageUrls:[void 0]},o=[{value:"dependencies in Package.json",id:"dependencies-in-packagejson",level:2},{value:"dependencies\uc758 \ubb38\uc81c\uc810",id:"dependencies\uc758-\ubb38\uc81c\uc810",level:3},{value:"Zero Install",id:"zero-install",level:3},{value:"Bundler",id:"bundler",level:2},{value:"Resolution",id:"resolution",level:3},{value:"Load",id:"load",level:3},{value:"Optimization",id:"optimization",level:3},{value:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9",id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",level:2},{value:"Git basic",id:"git-basic",level:3},{value:"\ucc38\uace0",id:"\ucc38\uace0",level:2}];function a(n){const e={a:"a",admonition:"admonition",br:"br",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.M)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.p,{children:["\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574",(0,i.jsx)(e.br,{}),"\n","frontend \ub85c\uc9c1\ubfd0 \uc544\ub2c8\ub77c \ubcf4\uc774\uc9c0 \uc54a\ub294 \ud658\uacbd\uc124\uc815\uc5d0\ub3c4 \uc5c4\uccad\ub09c \ub178\ub825\uc744 \ud558\uace0\uc788\uc74c\uc744 \uc54c\uac8c\ub418\uc5c8\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc774\uc804\uc5d0 \uac1c\ubc1c\uc744 \ud558\uba70 \uc54c\uace0\ub294 \uc788\uc9c0\ub9cc \uc790\uc138\ud558\uac8c \ubab0\ub790\ub358 \ubd80\ubd84\uacfc \uadf8\ub4e4\uc758 \ub514\ud14c\uc77c\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ub180\ub77c\uc6cc\ud558\uba70 \uba74\uc811\uc900\ube44\ub97c \ud588\ub294\ub370 \uc774 \uae00\uc5d0\uc11c\ub294 \uc774 \uacfc\uc815\uc5d0\uc11c \uc54c\uac8c\ub41c \uc0ac\uc2e4\ub4e4\uc744 \uc815\ub9ac\ud55c\ub2e4."]}),"\n",(0,i.jsx)(e.admonition,{title:"\ucc38\uace0",type:"important",children:(0,i.jsx)(e.p,{children:"Youtube \ubc0f toss tech blog\ub97c \ucc38\uace0\ud558\uc5ec \uc791\uc131\ud55c \uae00 \uc785\ub2c8\ub2e4."})}),"\n",(0,i.jsx)(e.h2,{id:"dependencies-in-packagejson",children:"dependencies in Package.json"}),"\n",(0,i.jsxs)(e.p,{children:["\uc6b0\ub9ac\uac00 \uac1c\ubc1c\uc744\ud558\uba70 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub97c \ud1b5\ud574 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud560 \ub54c\ub294\n",(0,i.jsx)(e.code,{children:"package.json"})," \ub0b4\uc758 ",(0,i.jsx)(e.code,{children:"dependencies"})," \ud544\ub4dc\ub97c \ud1b5\ud574 \uc758\uc874\uc131\uc744 \uaddc\uc815\ud558\ub294\uac83\uc73c\ub85c \uc124\uce58\ud55c\ub2e4\n\uc774\ub54c \ud574\ub2f9 \ud328\ud0a4\uc9c0\uc758 \uc774\ub984\uacfc \ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud55c \uac1d\uccb4\ub97c \ud1b5\ud574 \uc124\uce58\ud558\ub294\ub370\n\ubc84\uc804\uc758 \ubc94\uc704\ub294 \ud558\ub098 \ud639\uc740 \uc5ec\ub7ec\uac1c\uc758 \uacf5\ubc31\uc73c\ub85c \ubd84\ub9ac\ub41c \ubb38\uc790\uc5f4\uc774\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud558\ub294 \uc790\uc138\ud55c \ubc29\ubc95\uc740 ",(0,i.jsx)(e.a,{href:"https://docs.npmjs.com/misc/semver",children:"semver"}),"\ub97c \ucc38\uace0"]}),"\n",(0,i.jsxs)(e.p,{children:["\ub9cc\uc57d \uac1c\ubc1c\uc911\uc5d0\ub9cc \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc77c \uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\ud544\ub4dc\ub97c \ud65c\uc6a9\ud558\uba70"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-bash",children:"npm install some-package --save-dev\n"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \uba85\ub839\uc5b4\ub85c \uc124\uce58 \uac00\ub2a5\ud558\uace0 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58 \ud6c4 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud55c\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc5ec\uae30\uc11c \ub9cc\uc57d \ub0b4\uac00 clone\ub41c repository\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"npm install"}),"\ud588\uc744 \uacbd\uc6b0 npm\uc740 \uc774\ub97c \ud504\ub85c\uc81d\ud2b8\ub97c",(0,i.jsx)(e.br,{}),"\n","\uac1c\ubc1c\uc911\uc774\ub77c\uace0 \uc778\uc2dd\ud558\uace0 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud558\ub2c8 \uc720\uc758\ud560 \uac83."]}),"\n",(0,i.jsxs)(e.p,{children:["\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ubcf8\uc778\ub9cc\uc758 plugin\uc744 \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\uc778\ub370",(0,i.jsx)(e.br,{}),"\n","\uc815\uc758\uc5d0 \ub530\ub974\uba74 \uc0c1\uc18d\ub418\ub294 \uc758\uc874\uc131\uc73c\ub85c \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\ub294 \uacf3\uc5d0\uc11c \uc81c\uacf5\ud574\uc57c\ud558\ub294 \uc758\uc874\uc131\uc774\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\ub9cc\uc57d \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc5d0\uc11c \ud328\ud0a4\uc9c0\ub97c ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\ub85c \uba85\uc2dc\ud560 \uacbd\uc6b0 \ud328\ud0a4\uc9c0\ub97c \uc81c\uacf5\ud558\ub294 \ucc45\uc784\uc744",(0,i.jsx)(e.br,{}),"\n","\uac00\uc7a5 \uc0c1\uc704\ud504\ub85c\uc81d\ud2b8\ub85c \ubc14\uafb8\uae30 \ub54c\ubb38\uc5d0 \ubc88\ub4e4\ub9c1 \uacb0\uacfc\uc5d0\uc11c \uc911\ubcf5\uc744 \ub9c9\uc744 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.p,{children:"\ud558\uc9c0\ub9cc \uc774\ub7ec\ud55c \uc7a5\uc810\uc5d0\ub3c4 \uce58\uba85\uc801\uc778 \ub2e8\uc810\uc740 \uc758\uc874\uc131 \uc804\ud30c\ubb38\uc81c\uc774\ub2e4."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-json",children:'package A:\n peerDependencies:\n "package P"\npackage B:\n dependencies:\n "package A"\n peerDependencies:\n "package P"\npackage C\n dependencies:\n "package B"\n peerDependencies:\n "package P"\n'})}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc774 peerDependency\ub97c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(e.code,{children:"package A"}),"\uc5d0\uc11c A\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubaa8\ub4e0 \ud328\ud0a4\uc9c0\ub4e4\uc740\nA\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c\uc5d0\ub3c4 peerDependencies\uc5d0 \ucd94\uac00\ud574\uc8fc\uc5b4\uc57c \ud558\uba70 \uc774\ub294 \uc758\uc874\uc131\uc758 \uad00\ub9ac\ubcf5\uc7a1\ub3c4\ub97c \uc99d\uac00\uc2dc\ucf1c",(0,i.jsx)(e.br,{}),"\n","\uc5d0\ub7ec\uc758 \ud655\ub960\uc744 \ub192\uc778\ub2e4 npm\uacfc \uac19\uc740 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub4e4\uc5d0\uc11c \uc774\ub7ec\ud55c \uc624\ub958\ub4e4\uc744 \uc5c4\ubc00\ud788 \uac80\uc0ac\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0\n\uc720\uc758\ud574\uc57c \ud558\uba70 \ub530\ub77c\uc11c ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0",(0,i.jsx)(e.br,{}),"\n","\ub2e8 \ud558\ub098\uc758 \ud328\ud0a4\uc9c0\ub9cc \uc874\uc7ac\ud574\uc57c \ud558\ub294\uacbd\uc6b0(\uc2f1\uae00\ud1a4) \uc77c\ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"dependencies\uc758-\ubb38\uc81c\uc810",children:"dependencies\uc758 \ubb38\uc81c\uc810"}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \ubb38\uc81c\ub9d0\uace0\ub3c4 ",(0,i.jsx)(e.code,{children:"npm/node_modules"}),"\uc758 \ubb38\uc81c\ub294 ",(0,i.jsx)(e.strong,{children:"\uc720\ub839\uc758\uc874\uc131(Phantom Dependency)"})," \ud604\uc0c1\uc774\ub2e4",(0,i.jsx)(e.br,{}),"\n","node_modules\ub97c \uc0ac\uc6a9\ud558\ub294 yarn v1 \ubc0f npm\uc5d0\uc11c\ub294 \uc911\ubcf5\ud574\uc11c \uc124\uce58\ud558\ub294 \ubaa8\ub4c8\uc744 \ud53c\ud558\uae30 \uc704\ud574",(0,i.jsx)(e.br,{}),"\n","\ud638\uc774\uc2a4\ud305 \uae30\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{alt:"Hoisting Tree",src:s(6112).c+"",width:"1024",height:"458"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc67c\ucabd\uacfc \uac19\uc740 \uc758\uc874\uc131\ud2b8\ub9ac\uc77c \uacbd\uc6b0 \ub514\uc2a4\ud06c\uacf5\uac04\uc758 \uc808\uc57d\uc744 \uc704\ud574 \uc911\ubcf5\ub418\ub294 \ud2b8\ub9ac\ub97c \uc9c0\uc6b0\ub294 \uacfc\uc815\uc5d0\uc11c",(0,i.jsx)(e.br,{}),"\n","\uc9c1\uc811 \uc758\uc874\ud558\uace0 \uc788\uc9c0 \uc54a\uc558\ub358 ",(0,i.jsx)(e.code,{children:"B(1.0)"})," \ud328\ud0a4\uc9c0\ub97c \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.",(0,i.jsx)(e.br,{}),"\n","package.json \uc5d0 \uba85\uc2dc\ud558\uc9c0 \uc54a\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ud604\uc0c1\uc744 Phantom Dependency\ub77c\uace0 \ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\uc774\ub7ec\ud55c \ud2b9\uc131\uc740 \uc2dc\uc2a4\ud15c\uc744 \ud63c\ub780\uc2a4\ub7fd\uac8c \ud558\uace0 \ucd5c\uc545\uc758 \uacbd\uc6b0 Runtime Error\uc758 \uac00\ub2a5\uc131\uc744 \ub192\ud78c\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ud1a0\uc2a4\ud300\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,i.jsx)(e.code,{children:"Yarn Berry + PnP"}),"\ub97c \ub3c4\uc785\ud558\uba70 \ud574\uacb0\ud588\ub2e4.",(0,i.jsx)(e.br,{}),"\n","Yarn Berry\ub294 ",(0,i.jsx)(e.code,{children:"Plug'n'Play"})," \uc804\ub7b5\uc744 \uc774\uc6a9\ud558\uc5ec \uae30\uc874\uc758 Package.json\uc744 \uae30\ubc18\uc73c\ub85c \uc758\uc874\uc131 \ud2b8\ub9ac\ub97c",(0,i.jsx)(e.br,{}),"\n","\ub9cc\ub4e4\uc5b4 node_modules \uad6c\uc870\ub97c \uc0dd\uc131\ud558\ub358 \ubc29\uc2dd\uc5d0\uc11c \uc758\uc874\uc131 \uc124\uce58\uc2dc node_modules\ub97c \uc0dd\uc131\ud558\uc9c0 \uc54a\uace0",(0,i.jsx)(e.br,{}),"\n",(0,i.jsx)(e.code,{children:".yarn/cache"}),"\ud3f4\ub354\uc5d0 \uc758\uc874\uc131 \uc815\ubcf4\ub97c \uc800\uc7a5\ud55c\ub2e4 \ub610\ud55c ",(0,i.jsx)(e.code,{children:".pnp.cjs"})," \ud30c\uc77c\uc5d0 \uc758\uc874\uc131\uc744 \ucc3e\uc744 \uc218 \uc788\ub294",(0,i.jsx)(e.br,{}),"\n","\uc815\ubcf4\ub97c \uae30\ub85d\ud558\uc5ec \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0 \uad00\ub9ac\ub97c \ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["yarn\uc740 \uae30\uc874 node.js\uc758 ",(0,i.jsx)(e.code,{children:"require"}),"\ud568\uc218\ub97c \ub36e\uc5b4\uc50c\uc6cc \ub3d9\uc791\ud558\uba70 \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0\uad00\ub9ac\ub97c",(0,i.jsx)(e.br,{}),"\n","\ud560 \uc218 \uc788\uace0 \uc774\ub54c\ubb38\uc5d0 \ud2b9\uc815 \ud328\ud0a4\uc9c0\uc640 \uc758\uc874\uc131\uc5d0 \ub300\ud55c \uc815\ubcf4\uac00 \ud544\uc694\ud560 \ub54c \ubc14\ub85c \uc54c \uc218 \uc788\ub2e4",(0,i.jsx)(e.br,{}),"\n","\ub610\ud55c Yarn PnP \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uac01 \uc758\uc874\uc131\uc740 Zip \uc544\uce74\uc774\ube0c\ub85c \uad00\ub9ac\ud558\uac8c \ub418\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \uc7a5\uc810\uc774 \uc0dd\uae34\ub2e4"]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"node_modules\uac00 \uc5c6\uc74c -> \ube60\ub978 \uc124\uce58 \uac00\ub2a5"}),"\n",(0,i.jsx)(e.li,{children:"\ud328\ud0a4\uc9c0\ub4e4\uc740 \ud558\ub098\uc758 Zip\uc544\uce74\uc774\ube0c\ub85c \uc800\uc7a5\ud558\uc5ec \uc911\ubcf5\ubc29\uc9c0"}),"\n",(0,i.jsx)(e.li,{children:"\ud30c\uc77c\uc758 \uc218\uac00 \uc801\uc5b4\uc9c0\uba70 \ubcc0\uacbd\uc0ac\ud56d\uc758 \uac10\uc9c0\uac00 \uc26c\uc6cc\uc9c0\uace0 \uc0ad\uc81c\uac00 \ube60\ub974\ub2e4."}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"zero-install",children:"Zero Install"}),"\n",(0,i.jsxs)(e.p,{children:["\uc5ec\uae30\uc11c \ud55c\ubc1c \ub354 \ub098\uc544\uac00 \uc758\uc874\uc131\uc744 Git\uc73c\ub85c \uad00\ub9ac\ud55c\ub2e4\uba74 \uc5b4\ub5a8\uae4c?",(0,i.jsx)(e.br,{}),"\n","\uc77c\ubc18\uc801\uc778 node_modules\uc758 \ud06c\uae30\ub294 1.2GB/13\ub9cc5\ucc9c\uac1c\uc758 \ud30c\uc77c\uc744 \uac00\uc9c0\uace0 \uc788\uc9c0\ub9cc yarn\uc744 \uc0ac\uc6a9\ud55c\ub2e4\uba74",(0,i.jsx)(e.br,{}),"\n","139MB/2\ucc9c\uac1c\uc758 \uc555\ucd95\ud30c\uc77c\ub85c \uc904\uc5b4\ub4e0\ub2e4 \uc774\ub807\uac8c \uc904\uc5b4\ub4e0 \ud30c\uc77c\ud06c\uae30\ub294 Git\uc73c\ub85c \uad00\ub9ac\ud558\uc5ec \ubc84\uc804\uad00\ub9ac\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ud3ec\ud568\uc2dc\ud0a4\uace0 \uc124\uce58\ud560\uac8c \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc744 \uad6c\uc131\ud55c\ub2e4.(Zero-Install)"]}),"\n",(0,i.jsx)(e.p,{children:"\ud1a0\uc2a4\ud300\uc5d0\uc11c Zero-Install\uc744 \uc0ac\uc6a9\ud558\uba70 \uc5bb\uc740 \uc7a5\uc810 \ub450 \uac00\uc9c0"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"clone \ud639\uc740 branch\ubcc0\uacbd\uc2dc yarn install \uc2e4\ud589x"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"\ub9cc\uc57d \ub2e4\ub978 \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294 \ube0c\ub79c\uce58\ub85c \uc774\ub3d9\ud55c\ub2e4\uba74 \uc7ac\uc124\uce58\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"CI\ub3d9\uc791\uc2dc \uc758\uc874\uc131 \uc124\uce58\uc2dc\uac04 \uc808\uc57d"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["cache miss \uc77c\uacbd\uc6b0 60 ~ 90\ucd08 \uac00\ub7c9 \uc18c\uc694\ub418\ub358 \uc2dc\uac04\uc744 \uc758\uc874\uc131 \ubcf5\uc81c\ub9cc\uc73c\ub85c",(0,i.jsx)(e.br,{}),"\n","\ubc14\ub85c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\uc5ec \uc2dc\uac04\uc808\uc57d"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(e.h2,{id:"bundler",children:"Bundler"}),"\n",(0,i.jsxs)(e.p,{children:["javascript\uc5d0 \ubaa8\ub4c8\uc774\ub77c\ub294 \uac1c\ub150\uc774 \uc5c6\ub358\uc2dc\uc808 \uaddc\ubaa8\uac00 \ud070 \ud504\ub85c\uadf8\ub7a8\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ucabc\uac1c\uc11c \uc791\uc5c5\ud588\uc9c0\ub9cc",(0,i.jsx)(e.br,{}),"\n","\uc2a4\ud06c\ub9bd\ud2b8 \ud0dc\uadf8\ub97c \ud1b5\ud55c \uc804\uc5ed\ubcc0\uc218 \ucc38\uc870\ub97c \ud588\uae30\ub54c\ubb38\uc5d0 \ud568\uc218\ub098 \ubcc0\uc218\uc758 \uc774\ub984 \ucda9\ub3cc \ubb38\uc81c\ub97c \uc77c\uc73c\ud0a4\uace0",(0,i.jsx)(e.br,{}),"\n","\uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \uc2a4\ud06c\ub9bd\ud2b8 \ub85c\ub4dc\uc2dc\uac04\uc774 \uc99d\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc5d0 \uc548\uc88b\uc740 \uc601\ud5a5\uc744 \ub07c\ucce4\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ud558\ub098\ub85c \ud569\uce58\ub294 ",(0,i.jsx)(e.strong,{children:"\ubc88\ub4e4\ub9c1(Bundling)"})," \uc774\ub77c\ub294 \uac1c\ub150\uc774 \ud0c4\uc0dd\ud558\uace0",(0,i.jsx)(e.br,{}),"\n","CommonJS\uc758 ",(0,i.jsx)(e.code,{children:"require"}),"\ud568\uc218\uac00 \ub4f1\uc7a5\ud558\uba70 \uc774 \uc2dc\uc810\ubd80\ud130 \ud30c\uc77c\ub2e8\uc704\uc758 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud574\uc9c0\uace0 \uc218\ucc9c\uac1c\uc758",(0,i.jsx)(e.br,{}),"\n","JS\ud30c\uc77c\ub85c \ubd84\ub9ac\ud558\uba70 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc26c\uc6b4 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ud1b5\ud574 \ub354 \ub098\uc740 \uac1c\ubc1c\uacbd\ud5d8\uc744 \uc81c\uacf5\ud588\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ubaa8\ub4c8\uc758 \ud0c4\uc0dd\uacfc \ud568\uaed8 \uc0dd\uaca8\ub09c \ubc88\ub4e4\ub7ec\ub294 ",(0,i.jsx)(e.code,{children:"CommonJS"}),"\uc774\ud6c4\uc5d0\ub3c4 \uc0dd\uaca8\ub09c \ubaa8\ub4c8\uc5d0 \uc758\ud574 \uc124\uacc4\uc758 \uc601\ud5a5\uc744 \ubbf8\ucce4\uace0",(0,i.jsx)(e.br,{}),"\n","\uc9c0\uae08 \uc774\uc2dc\uc810\uc5d0\ub3c4 \uad49\uc7a5\ud788 \ub2e4\uc591\ud55c \ubc88\ub4e4\ub7ec\ub4e4\uc774 \uc788\uc9c0\ub9cc \ubc88\ub4e4\ub7ec\uc758 \ub3d9\uc791\uc740 \ud06c\uac8c \uc138 \uac00\uc9c0\ub85c \uad6c\ubd84\ud55c\ub2e4."]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Resolution"}),"\n",(0,i.jsx)(e.li,{children:"Load"}),"\n",(0,i.jsx)(e.li,{children:"Optimization"}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"resolution",children:"Resolution"}),"\n",(0,i.jsx)(e.p,{children:"resolution\ub2e8\uacc4\uc5d0\uc11c\ub294 import/require\ub418\ub294 \ud30c\uc77c\uc758 \uc704\uce58\ub97c \uc815\ud655\ud558\uac8c \ucc3e\ub294\uc5ed\ud560"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-tsx",children:"import { App } from './App';\n"})}),"\n",(0,i.jsxs)(e.p,{children:["App\uc744 import \ud558\ub294\uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"./App"}),"\uc758 \uc815\ud655\ud55c \uacbd\ub85c\ub97c \ud0d0\uc0c9\ud55c\ub2e4 (App.js, App.ts, App.tsx)",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub7ec\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \uc124\uc815\uc744 \uae30\ubcf8\uc81c\uacf5\ud558\uace0 \ud544\uc694\uc5d0\ub530\ub77c \ucee4\uc2a4\ud140\uac00\ub2a5.",(0,i.jsx)(e.br,{}),"\n","\uc774\ub807\uac8c \uc815\ud655\ud55c\uacbd\ub85c\ub97c \ud0d0\uc0c9\ud558\uc5ec \uc5b4\ub5a4\ud30c\uc77c\ub4e4\uc744 \ud569\uccd0\uc57c \ucd5c\uc885\uacb0\uacfc\ubb3c\uc774 \ub418\ub294\uc9c0 \uc54c \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"load",children:"Load"}),"\n",(0,i.jsxs)(e.p,{children:["Load\ub2e8\uacc4\uc5d0\uc11c\ub294 \ud45c\uc900 Javascript\ub85c \ubcc0\ud658\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \ud604\ub300\uc758 \uc6f9 \uac1c\ubc1c\uc740",(0,i.jsx)(e.br,{}),"\n","HTML,CSS,Javascript\ub85c\ub9cc \uac1c\ubc1c\ud558\uae30\uc5d4 \uc5b4\ub824\uc6c0\uc774 \uc788\uace0 \uc774\ub97c \ubcf4\uc644\ud558\uace0\uc790 \uc288\ud37c\uc14b \uc5b8\uc5b4\ub4e4\uc774 \ub4f1\uc7a5\ud558\uc600\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc774\uc5d0 \ub530\ub77c \ub300\ud45c\uc801\uc73c\ub85c Typescript\uc640 \uac19\uc740\uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uae30\uc704\ud574 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\uac00 \ub4f1\uc7a5\ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub9c1\uacfc\uc815\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"Babel/SWC"}),"\uac19\uc740 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub97c \uc218\uc6a9\ud558\uc5ec \ud45c\uc900Javascript \uc774\uc678\uc5d0\ub3c4 \uc0ac\uc6a9\uac00\ub2a5\ud55c",(0,i.jsx)(e.br,{}),"\n","\ud615\ud0dc\ub85c \ubc1c\uc804\ud574 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub9c1 \uacfc\uc815\uc744 \uac70\uce58\ub294\uac83\uc774 Load\ub2e8\uacc4\uc5d0 \ud574\ub2f9\ud568."]}),"\n",(0,i.jsxs)(e.p,{children:["\uc5ec\uae30\uc11c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub294 \ud55c \uc5b8\uc5b4\ub97c \ucd94\uc0c1\ud654\ub2e8\uacc4\uac00 \ube44\uc2b7\ud55c \uc5b8\uc5b4\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uc5ed\ud560\uc744\ud558\uc9c0\ub9cc",(0,i.jsx)(e.br,{}),"\n","\uc5b8\uc5b4 \uc804\uccb4\uc801\uc73c\ub85c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4. \ubb38\ubc95\uc758 \ubb38\uc81c\uac00 \uc544\ub2cc \uc5b8\uc5b4\uc758 \ud45c\uc900\uc774 \ubcc0\uacbd\ub418\uac70\ub098",(0,i.jsx)(e.br,{}),"\n","\uc0c8\ub85c\ucd94\uac00\ub418\ub294 \ud568\uc218\uc758 \uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"\ud3f4\ub9ac\ud544(polyfill)"}),"\uacfc\uc815\uc744 \uac70\uccd0\uc57c\ud55c\ub2e4 \uad6c\ud604\uc774 \ub204\ub77d\ub41c",(0,i.jsx)(e.br,{}),"\n","\uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \uba54\uafd4\uc8fc\ub294(fill in) \uc5ed\ud560\uc744 \ud558\uba70 \uae30\ub2a5\uc774\ub098 \uc0ac\uc6a9\uc790\uc758 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub530\ub77c",(0,i.jsx)(e.br,{}),"\n","\ub2e4\uc591\ud558\uac8c \uc124\uc815\ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"optimization",children:"Optimization"}),"\n",(0,i.jsxs)(e.p,{children:["Resolution/Load \ub2e8\uacc4\ub97c \uac70\uccd0 \uc644\uc804\ud55c JS\ud30c\uc77c \ud558\ub098\ub97c \uc0dd\uc131\ud588\ub2e4\uba74 \ub2e4\uc591\ud55c \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294",(0,i.jsx)(e.br,{}),"\n","JS\ud30c\uc77c\uc758 \ud06c\uae30\ub294 \ub108\ubb34 \ud06c\uae30 \ub54c\ubb38\uc5d0 \uc131\ub2a5\uc800\ud558\ub97c \uc720\ubc1c\ud560 \uc218 \uc788\ub2e4 \ub530\ub77c\uc11c \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc774\uae30\uc704\ud574",(0,i.jsx)(e.br,{}),"\n","\ub450 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud568"]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Minification (Compression + Mangling)"}),"\n",(0,i.jsx)(e.li,{children:"Tree Shaking"}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"1-1. Minification - Compression \ucf54\ub4dc\uc758 text\ub97c \ucd5c\ub300\ud55c \uc555\ucd95"})}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"undefined -> void 0"}),"\n",(0,i.jsx)(e.li,{children:"2 + 3 -> 5"}),"\n",(0,i.jsx)(e.li,{children:"!a && !b -> !(a || b)"}),"\n",(0,i.jsx)(e.li,{children:"Infinity -> 1/0"}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"1-2. Minification - Mangling \ubcc0\uc218,Class,\ud30c\uc77c\uc774\ub984 \ucd5c\uc801\ud654"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-javascript",children:"// function add(num1, num2) { return num1 + num2 }\nfunction add(l, r) {\n return l + r;\n}\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"2. Tree Shaking \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc \uc81c\uac70"})}),"\n",(0,i.jsxs)(e.p,{children:["Tree Shaking \ub2e8\uacc4\uc5d0\uc11c\ub294 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\ub97c \ubd84\uc11d\ud558\uace0 \uc81c\uac70\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370",(0,i.jsx)(e.br,{}),"\n","\uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\uac00 \ubb34\uc5c7\uc778\uc9c0 \ud310\ubcc4\ud558\ub294 \uc77c\uc740 \uae4c\ub2e4\ub85c\uc6b4 \ud3b8\uc5d0 \uc18d\ud55c\ub2e4(\uc815\uc801\ubd84\uc11d\uc758 \uc5b4\ub824\uc6c0)",(0,i.jsx)(e.br,{}),"\n","\ub530\ub77c\uc11c \ubc88\ub4e4\ub7ec\ubcc4\ub85c \uc54c\uace0\ub9ac\uc998 \ubc0f \uc811\uadfc\ubc29\uc2dd\uc774 \ucc9c\ucc28\ub9cc\ubcc4\uc774\ub77c \ud070 \ucc28\uc774\uac00 \uc788\ub294 \uc0ac\ud56d\uc774\uae30\ub3c4 \ud558\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ud1a0\uc2a4\uc5d0\uc11c\ub294 \uc704\uc640 \uac19\uc740 \ubc88\ub4e4\ub7ec\uc758 \ud2b9\uc131\uc744 \ud65c\uc6a9\ud574 React Native\uc758 Metro \uc5d0\uc11c",(0,i.jsx)(e.br,{}),"\n","ESbuild\ub85c \uc62e\uae30\uba70 \ube4c\ub4dc\uc18d\ub3c4\ub97c \ucd5c\uc801\ud654 \ud588\ub358 \uc0ac\ub840\ub97c \uc18c\uac1c\ud588\ub2e4."]}),"\n",(0,i.jsx)(e.h2,{id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",children:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9"}),"\n",(0,i.jsxs)(e.p,{children:["VCS\uc911 \ud558\ub098\uc778 Git\uc740 ",(0,i.jsx)(e.strong,{children:"\ub378\ud0c0\uae30\ubc18 \ubc84\uc804\uad00\ub9ac \uc2dc\uc2a4\ud15c"}),"\uc73c\ub85c \ud30c\uc77c\uc758 \ubcc0\ud654\ub97c \uc2dc\uac04\uc21c\uc73c\ub85c \uad00\ub9ac\ud574",(0,i.jsx)(e.br,{}),"\n","\ud504\ub85c\uc81d\ud2b8\uc758 \uc2a4\ub0c5\uc0f7\uc744 \uc800\uc7a5\ud558\uace0 \ud30c\uc77c\uac04 \ubcc0\uacbd\uc0ac\ud56d\uc744 ",(0,i.jsx)(e.code,{children:"\ucc28\uc774(diff)"}),"/",(0,i.jsx)(e.code,{children:"\ub378\ud0c0(delta)"})," \ud615\ud0dc\ub85c",(0,i.jsx)(e.br,{}),"\n","\uc800\uc7a5\ud558\uace0 \ud30c\uc77c\uc744 \uc138 \uac00\uc9c0 \uc0c1\ud0dc\uc778 ",(0,i.jsx)(e.code,{children:"Committed"}),", ",(0,i.jsx)(e.code,{children:"Modified"}),", ",(0,i.jsx)(e.code,{children:"Staged"})," \uad00\ub9ac\ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\uc774 \uc138 \uac00\uc9c0\uc758 \uc0c1\ud0dc\ub294 \ud504\ub85c\uc81d\ud2b8\uc758 \uc138 \uac00\uc9c0 \uc0c1\ud0dc\uc640 \uc5f0\uad00\ub418\uc5b4 \uc788\uace0 \ub2e4\uc74c\uacfc \uac19\ub2e4."]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Working Directory - \uc2e4\uc81c \uc791\uc5c5\uacf5\uac04"}),"\n",(0,i.jsx)(e.li,{children:"Staging Area - \ubcc0\uacbd\ub41c \ud30c\uc77c\ub4e4\uc758 \ub300\uae30\uacf5\uac04"}),"\n",(0,i.jsx)(e.li,{children:"Repository(.git directory) - \ucd5c\uc885\uc801\uc73c\ub85c \uc800\uc7a5\ub41c \ud30c\uc77c\ub4e4\uc758 \uacf5\uac04"}),"\n"]}),"\n",(0,i.jsxs)(e.p,{children:["Git\uc740 \uc548\uc804\ud558\uace0 \uc77c\uad00\ub41c \ud30c\uc77c\uad00\ub9ac\ub97c \uc704\ud574 ",(0,i.jsx)(e.code,{children:"sha-1"})," \ud574\uc2dc\uc54c\uace0\ub9ac\uc998\uc73c\ub85c 40\uc790\uae38\uc774\uc758 16\uc9c4\uc218 \ubb38\uc790\uc5f4\uc744",(0,i.jsx)(e.br,{}),"\n","\ub9cc\ub4e4\uace0 \ubaa8\ub4e0\uac83\uc744 \ud574\uc2dc\ub85c \uc2dd\ubcc4\ud558\uc5ec \ub370\uc774\ud130\uc758 \ubb34\uacb0\uc131\uc744 \ud655\uc778\ud55c\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"git-basic",children:"Git basic"}),"\n",(0,i.jsxs)(e.p,{children:["git\uc73c\ub85c \ubc84\uc804\uad00\ub9ac\ub97c \uc2dc\uc791\ud558\uae30 \uc704\ud574 \ubcf8\uc778\uc758 \uc791\uc5c5\ud3f4\ub354\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"git init"})," \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uba74",(0,i.jsx)(e.br,{}),"\n",(0,i.jsx)(e.code,{children:".git"}),"\ud3f4\ub354\uac00 \uc0dd\uc131\ub418\uace0 \uc774\uacf3\uc5d0 \ud30c\uc77c\ub4e4\uc758 \uc815\ubcf4\uac00 \uc800\uc7a5\ub41c\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc6b0\ub9ac\uac00 \uc2e4\uc81c\ub85c \uc791\uc5c5\ud558\ub294\uacf5\uac04(Working Directory)\uc758 \ud30c\uc77c\uc740 Tracked\uc640 Untracked\ub85c \ub098\ub204\uba70",(0,i.jsx)(e.br,{}),"\n","Tracked\ud30c\uc77c\uc758 \uacbd\uc6b0 \uc2a4\ub0c5\uc0f7\uc5d0 \ud3ec\ud568\ub3fc \uc788\ub358 \ud30c\uc77c\ub85c ",(0,i.jsx)(e.code,{children:"Unmodified"}),", ",(0,i.jsx)(e.code,{children:"Modified"}),", ",(0,i.jsx)(e.code,{children:"Staged"})," \uc0c1\ud0dc\uc911",(0,i.jsx)(e.br,{}),"\n","\ud558\ub098\uc774\ub2e4."]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{alt:"git-status",src:s(5904).c+"",width:"1065",height:"627"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{alt:"git-add",src:s(4584).c+"",width:"742",height:"164"})}),"\n",(0,i.jsx)(e.h2,{id:"\ucc38\uace0",children:"\ucc38\uace0"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://programmingsummaries.tistory.com/385",children:"package.json \ubc88\uc5ed"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://toss.tech/article/node-modules-and-yarn-berry",children:"node_modules\ub85c\ubd80\ud130 \uc6b0\ub9ac\ub97c \uad6c\uc6d0\ud574 \uc904 Yarn Berry"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=mee1QbvaO10&t=325s",children:"FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=Ix9gxqKOatY&t=114s",children:"FECONF 2022 [B2] \uc77c\ubc31\uac1c \ud328\ud0a4\uc9c0 \ubaa8\ub178\ub808\ud3ec \uc6b0\uc544\ud558\uac8c \uc6b4\uc601\ud558\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=QfU5REp8sjQ&t=1253s",children:"FEConf 2023 [B4] React Native, Metro\ub97c \ub118\uc5b4\uc11c"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=2IE68SDTYvI&list=PL1DJtS1Hv1PiGXmgruP1_gM2TSvQiOsFL&index=32",children:"\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uac1c\ubc1c\uc790\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c: \ub9e4\uc77c \ud558\ub8e8\ub97c \uc544\ub07c\ub294 DevOps \uc774\uc57c\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=IKyA8BKxpXc",children:"\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uc720\uc800\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c : 100\ub144\uc744 \uc544\uaef4\uc900 SSR \uc774\uc57c\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://medium.com/naver-place-dev/javascript-%EB%B2%88%EB%93%A4%EB%9F%AC%EC%9D%98-%EC%9D%B4%ED%95%B4-1-javascript-%EB%AA%A8%EB%93%88-d68c7e438fcd",children:"JavaScript \ubc88\ub4e4\ub7ec\uc758 \uc774\ud574"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://tech.wonderwall.kr/articles/git/",children:"Git \ub0b4\ubd80 \ub3d9\uc791 \ud30c\ud5e4\uce58\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EA%B8%B0%EC%B4%88",children:"\uc2dc\uc791\ud558\uae30 - Git \uae30\ucd08"})}),"\n"]})]})}function h(n={}){const{wrapper:e}={...(0,r.M)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(a,{...n})}):a(n)}},4584:(n,e,s)=>{s.d(e,{c:()=>i});const i=s.p+"assets/images/git-add-b3ba9ff3088ef52c696147b24dca6437.png"},5904:(n,e,s)=>{s.d(e,{c:()=>i});const i=s.p+"assets/images/git-status-0c69ca9fd992f3efb893ab5a89f6d2a6.png"},6112:(n,e,s)=>{s.d(e,{c:()=>i});const i=s.p+"assets/images/hoisting-tree-45c2932b3dc3597787977575c84561d2.png"},2172:(n,e,s)=>{s.d(e,{I:()=>c,M:()=>l});var i=s(1504);const r={},d=i.createContext(r);function l(n){const e=i.useContext(d);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function c(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(r):n.components||r:l(n.components),i.createElement(d.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/5854caf2.1ebc43af.js b/assets/js/5854caf2.1ebc43af.js deleted file mode 100644 index af1405b..0000000 --- a/assets/js/5854caf2.1ebc43af.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[1456],{4867:(n,e,s)=>{s.r(e),s.d(e,{assets:()=>t,contentTitle:()=>d,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>o});var i=s(7624),r=s(2172);const l={slug:"frontend-environment",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",authors:["WanderedToLa"],tags:["frontend","environment","dependencies","transplier","git"]},d=void 0,c={permalink:"/blog/frontend-environment",editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-07-19-frontend/index.md",source:"@site/blog/2024-07-19-frontend/index.md",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",description:"\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574",date:"2024-07-19T00:00:00.000Z",formattedDate:"July 19, 2024",tags:[{label:"frontend",permalink:"/blog/tags/frontend"},{label:"environment",permalink:"/blog/tags/environment"},{label:"dependencies",permalink:"/blog/tags/dependencies"},{label:"transplier",permalink:"/blog/tags/transplier"},{label:"git",permalink:"/blog/tags/git"}],readingTime:13.525,hasTruncateMarker:!1,authors:[{name:"WooSeok",url:"https://github.com/WanderedToLa",imageURL:"https://avatars.githubusercontent.com/u/87642287?v=4",key:"WanderedToLa"}],frontMatter:{slug:"frontend-environment",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",authors:["WanderedToLa"],tags:["frontend","environment","dependencies","transplier","git"]},unlisted:!1,nextItem:{title:"docusaurus custom plugin \ub9cc\ub4e4\uae30",permalink:"/blog/docusaurus-plugin"}},t={authorsImageUrls:[void 0]},o=[{value:"dependencies in Package.json",id:"dependencies-in-packagejson",level:2},{value:"dependencies\uc758 \ubb38\uc81c\uc810",id:"dependencies\uc758-\ubb38\uc81c\uc810",level:3},{value:"Zero Install",id:"zero-install",level:3},{value:"Bundler",id:"bundler",level:2},{value:"Resolution",id:"resolution",level:3},{value:"Load",id:"load",level:3},{value:"Optimization",id:"optimization",level:3},{value:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9",id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",level:2},{value:"\ucc38\uace0",id:"\ucc38\uace0",level:2}];function a(n){const e={a:"a",admonition:"admonition",br:"br",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.M)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.p,{children:["\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574",(0,i.jsx)(e.br,{}),"\n","frontend \ub85c\uc9c1\ubfd0 \uc544\ub2c8\ub77c \ubcf4\uc774\uc9c0 \uc54a\ub294 \ud658\uacbd\uc124\uc815\uc5d0\ub3c4 \uc5c4\uccad\ub09c \ub178\ub825\uc744 \ud558\uace0\uc788\uc74c\uc744 \uc54c\uac8c\ub418\uc5c8\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc774\uc804\uc5d0 \uac1c\ubc1c\uc744 \ud558\uba70 \uc54c\uace0\ub294 \uc788\uc9c0\ub9cc \uc790\uc138\ud558\uac8c \ubab0\ub790\ub358 \ubd80\ubd84\uacfc \uadf8\ub4e4\uc758 \ub514\ud14c\uc77c\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ub180\ub77c\uc6cc\ud558\uba70 \uba74\uc811\uc900\ube44\ub97c \ud588\ub294\ub370 \uc774 \uae00\uc5d0\uc11c\ub294 \uc774 \uacfc\uc815\uc5d0\uc11c \uc54c\uac8c\ub41c \uc0ac\uc2e4\ub4e4\uc744 \uc815\ub9ac\ud55c\ub2e4."]}),"\n",(0,i.jsx)(e.admonition,{title:"\ucc38\uace0",type:"important",children:(0,i.jsx)(e.p,{children:"Youtube \ubc0f toss tech blog\ub97c \ucc38\uace0\ud558\uc5ec \uc791\uc131\ud55c \uae00 \uc785\ub2c8\ub2e4."})}),"\n",(0,i.jsx)(e.h2,{id:"dependencies-in-packagejson",children:"dependencies in Package.json"}),"\n",(0,i.jsxs)(e.p,{children:["\uc6b0\ub9ac\uac00 \uac1c\ubc1c\uc744\ud558\uba70 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub97c \ud1b5\ud574 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud560 \ub54c\ub294\n",(0,i.jsx)(e.code,{children:"package.json"})," \ub0b4\uc758 ",(0,i.jsx)(e.code,{children:"dependencies"})," \ud544\ub4dc\ub97c \ud1b5\ud574 \uc758\uc874\uc131\uc744 \uaddc\uc815\ud558\ub294\uac83\uc73c\ub85c \uc124\uce58\ud55c\ub2e4\n\uc774\ub54c \ud574\ub2f9 \ud328\ud0a4\uc9c0\uc758 \uc774\ub984\uacfc \ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud55c \uac1d\uccb4\ub97c \ud1b5\ud574 \uc124\uce58\ud558\ub294\ub370\n\ubc84\uc804\uc758 \ubc94\uc704\ub294 \ud558\ub098 \ud639\uc740 \uc5ec\ub7ec\uac1c\uc758 \uacf5\ubc31\uc73c\ub85c \ubd84\ub9ac\ub41c \ubb38\uc790\uc5f4\uc774\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud558\ub294 \uc790\uc138\ud55c \ubc29\ubc95\uc740 ",(0,i.jsx)(e.a,{href:"https://docs.npmjs.com/misc/semver",children:"semver"}),"\ub97c \ucc38\uace0"]}),"\n",(0,i.jsxs)(e.p,{children:["\ub9cc\uc57d \uac1c\ubc1c\uc911\uc5d0\ub9cc \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc77c \uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\ud544\ub4dc\ub97c \ud65c\uc6a9\ud558\uba70"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-bash",children:"npm install some-package --save-dev\n"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \uba85\ub839\uc5b4\ub85c \uc124\uce58 \uac00\ub2a5\ud558\uace0 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58 \ud6c4 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud55c\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc5ec\uae30\uc11c \ub9cc\uc57d \ub0b4\uac00 clone\ub41c repository\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"npm install"}),"\ud588\uc744 \uacbd\uc6b0 npm\uc740 \uc774\ub97c \ud504\ub85c\uc81d\ud2b8\ub97c",(0,i.jsx)(e.br,{}),"\n","\uac1c\ubc1c\uc911\uc774\ub77c\uace0 \uc778\uc2dd\ud558\uace0 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud558\ub2c8 \uc720\uc758\ud560 \uac83."]}),"\n",(0,i.jsxs)(e.p,{children:["\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ubcf8\uc778\ub9cc\uc758 plugin\uc744 \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\uc778\ub370",(0,i.jsx)(e.br,{}),"\n","\uc815\uc758\uc5d0 \ub530\ub974\uba74 \uc0c1\uc18d\ub418\ub294 \uc758\uc874\uc131\uc73c\ub85c \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\ub294 \uacf3\uc5d0\uc11c \uc81c\uacf5\ud574\uc57c\ud558\ub294 \uc758\uc874\uc131\uc774\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\ub9cc\uc57d \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc5d0\uc11c \ud328\ud0a4\uc9c0\ub97c ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\ub85c \uba85\uc2dc\ud560 \uacbd\uc6b0 \ud328\ud0a4\uc9c0\ub97c \uc81c\uacf5\ud558\ub294 \ucc45\uc784\uc744",(0,i.jsx)(e.br,{}),"\n","\uac00\uc7a5 \uc0c1\uc704\ud504\ub85c\uc81d\ud2b8\ub85c \ubc14\uafb8\uae30 \ub54c\ubb38\uc5d0 \ubc88\ub4e4\ub9c1 \uacb0\uacfc\uc5d0\uc11c \uc911\ubcf5\uc744 \ub9c9\uc744 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.p,{children:"\ud558\uc9c0\ub9cc \uc774\ub7ec\ud55c \uc7a5\uc810\uc5d0\ub3c4 \uce58\uba85\uc801\uc778 \ub2e8\uc810\uc740 \uc758\uc874\uc131 \uc804\ud30c\ubb38\uc81c\uc774\ub2e4."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-json",children:'package A:\n peerDependencies:\n "package P"\npackage B:\n dependencies:\n "package A"\n peerDependencies:\n "package P"\npackage C\n dependencies:\n "package B"\n peerDependencies:\n "package P"\n'})}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc774 peerDependency\ub97c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(e.code,{children:"package A"}),"\uc5d0\uc11c A\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubaa8\ub4e0 \ud328\ud0a4\uc9c0\ub4e4\uc740\nA\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c\uc5d0\ub3c4 peerDependencies\uc5d0 \ucd94\uac00\ud574\uc8fc\uc5b4\uc57c \ud558\uba70 \uc774\ub294 \uc758\uc874\uc131\uc758 \uad00\ub9ac\ubcf5\uc7a1\ub3c4\ub97c \uc99d\uac00\uc2dc\ucf1c",(0,i.jsx)(e.br,{}),"\n","\uc5d0\ub7ec\uc758 \ud655\ub960\uc744 \ub192\uc778\ub2e4 npm\uacfc \uac19\uc740 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub4e4\uc5d0\uc11c \uc774\ub7ec\ud55c \uc624\ub958\ub4e4\uc744 \uc5c4\ubc00\ud788 \uac80\uc0ac\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0\n\uc720\uc758\ud574\uc57c \ud558\uba70 \ub530\ub77c\uc11c ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0",(0,i.jsx)(e.br,{}),"\n","\ub2e8 \ud558\ub098\uc758 \ud328\ud0a4\uc9c0\ub9cc \uc874\uc7ac\ud574\uc57c \ud558\ub294\uacbd\uc6b0(\uc2f1\uae00\ud1a4) \uc77c\ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"dependencies\uc758-\ubb38\uc81c\uc810",children:"dependencies\uc758 \ubb38\uc81c\uc810"}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \ubb38\uc81c\ub9d0\uace0\ub3c4 ",(0,i.jsx)(e.code,{children:"npm/node_modules"}),"\uc758 \ubb38\uc81c\ub294 ",(0,i.jsx)(e.strong,{children:"\uc720\ub839\uc758\uc874\uc131(Phantom Dependency)"})," \ud604\uc0c1\uc774\ub2e4",(0,i.jsx)(e.br,{}),"\n","node_modules\ub97c \uc0ac\uc6a9\ud558\ub294 yarn v1 \ubc0f npm\uc5d0\uc11c\ub294 \uc911\ubcf5\ud574\uc11c \uc124\uce58\ud558\ub294 \ubaa8\ub4c8\uc744 \ud53c\ud558\uae30 \uc704\ud574",(0,i.jsx)(e.br,{}),"\n","\ud638\uc774\uc2a4\ud305 \uae30\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{alt:"Hoisting Tree",src:s(6112).c+"",width:"1024",height:"458"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc67c\ucabd\uacfc \uac19\uc740 \uc758\uc874\uc131\ud2b8\ub9ac\uc77c \uacbd\uc6b0 \ub514\uc2a4\ud06c\uacf5\uac04\uc758 \uc808\uc57d\uc744 \uc704\ud574 \uc911\ubcf5\ub418\ub294 \ud2b8\ub9ac\ub97c \uc9c0\uc6b0\ub294 \uacfc\uc815\uc5d0\uc11c",(0,i.jsx)(e.br,{}),"\n","\uc9c1\uc811 \uc758\uc874\ud558\uace0 \uc788\uc9c0 \uc54a\uc558\ub358 ",(0,i.jsx)(e.code,{children:"B(1.0)"})," \ud328\ud0a4\uc9c0\ub97c \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.",(0,i.jsx)(e.br,{}),"\n","package.json \uc5d0 \uba85\uc2dc\ud558\uc9c0 \uc54a\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ud604\uc0c1\uc744 Phantom Dependency\ub77c\uace0 \ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\uc774\ub7ec\ud55c \ud2b9\uc131\uc740 \uc2dc\uc2a4\ud15c\uc744 \ud63c\ub780\uc2a4\ub7fd\uac8c \ud558\uace0 \ucd5c\uc545\uc758 \uacbd\uc6b0 Runtime Error\uc758 \uac00\ub2a5\uc131\uc744 \ub192\ud78c\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ud1a0\uc2a4\ud300\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,i.jsx)(e.code,{children:"Yarn Berry + PnP"}),"\ub97c \ub3c4\uc785\ud558\uba70 \ud574\uacb0\ud588\ub2e4.",(0,i.jsx)(e.br,{}),"\n","Yarn Berry\ub294 ",(0,i.jsx)(e.code,{children:"Plug'n'Play"})," \uc804\ub7b5\uc744 \uc774\uc6a9\ud558\uc5ec \uae30\uc874\uc758 Package.json\uc744 \uae30\ubc18\uc73c\ub85c \uc758\uc874\uc131 \ud2b8\ub9ac\ub97c",(0,i.jsx)(e.br,{}),"\n","\ub9cc\ub4e4\uc5b4 node_modules \uad6c\uc870\ub97c \uc0dd\uc131\ud558\ub358 \ubc29\uc2dd\uc5d0\uc11c \uc758\uc874\uc131 \uc124\uce58\uc2dc node_modules\ub97c \uc0dd\uc131\ud558\uc9c0 \uc54a\uace0",(0,i.jsx)(e.br,{}),"\n",(0,i.jsx)(e.code,{children:".yarn/cache"}),"\ud3f4\ub354\uc5d0 \uc758\uc874\uc131 \uc815\ubcf4\ub97c \uc800\uc7a5\ud55c\ub2e4 \ub610\ud55c ",(0,i.jsx)(e.code,{children:".pnp.cjs"})," \ud30c\uc77c\uc5d0 \uc758\uc874\uc131\uc744 \ucc3e\uc744 \uc218 \uc788\ub294",(0,i.jsx)(e.br,{}),"\n","\uc815\ubcf4\ub97c \uae30\ub85d\ud558\uc5ec \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0 \uad00\ub9ac\ub97c \ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["yarn\uc740 \uae30\uc874 node.js\uc758 ",(0,i.jsx)(e.code,{children:"require"}),"\ud568\uc218\ub97c \ub36e\uc5b4\uc50c\uc6cc \ub3d9\uc791\ud558\uba70 \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0\uad00\ub9ac\ub97c",(0,i.jsx)(e.br,{}),"\n","\ud560 \uc218 \uc788\uace0 \uc774\ub54c\ubb38\uc5d0 \ud2b9\uc815 \ud328\ud0a4\uc9c0\uc640 \uc758\uc874\uc131\uc5d0 \ub300\ud55c \uc815\ubcf4\uac00 \ud544\uc694\ud560 \ub54c \ubc14\ub85c \uc54c \uc218 \uc788\ub2e4",(0,i.jsx)(e.br,{}),"\n","\ub610\ud55c Yarn PnP \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uac01 \uc758\uc874\uc131\uc740 Zip \uc544\uce74\uc774\ube0c\ub85c \uad00\ub9ac\ud558\uac8c \ub418\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \uc7a5\uc810\uc774 \uc0dd\uae34\ub2e4"]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"node_modules\uac00 \uc5c6\uc74c -> \ube60\ub978 \uc124\uce58 \uac00\ub2a5"}),"\n",(0,i.jsx)(e.li,{children:"\ud328\ud0a4\uc9c0\ub4e4\uc740 \ud558\ub098\uc758 Zip\uc544\uce74\uc774\ube0c\ub85c \uc800\uc7a5\ud558\uc5ec \uc911\ubcf5\ubc29\uc9c0"}),"\n",(0,i.jsx)(e.li,{children:"\ud30c\uc77c\uc758 \uc218\uac00 \uc801\uc5b4\uc9c0\uba70 \ubcc0\uacbd\uc0ac\ud56d\uc758 \uac10\uc9c0\uac00 \uc26c\uc6cc\uc9c0\uace0 \uc0ad\uc81c\uac00 \ube60\ub974\ub2e4."}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"zero-install",children:"Zero Install"}),"\n",(0,i.jsxs)(e.p,{children:["\uc5ec\uae30\uc11c \ud55c\ubc1c \ub354 \ub098\uc544\uac00 \uc758\uc874\uc131\uc744 Git\uc73c\ub85c \uad00\ub9ac\ud55c\ub2e4\uba74 \uc5b4\ub5a8\uae4c?",(0,i.jsx)(e.br,{}),"\n","\uc77c\ubc18\uc801\uc778 node_modules\uc758 \ud06c\uae30\ub294 1.2GB/13\ub9cc5\ucc9c\uac1c\uc758 \ud30c\uc77c\uc744 \uac00\uc9c0\uace0 \uc788\uc9c0\ub9cc yarn\uc744 \uc0ac\uc6a9\ud55c\ub2e4\uba74",(0,i.jsx)(e.br,{}),"\n","139MB/2\ucc9c\uac1c\uc758 \uc555\ucd95\ud30c\uc77c\ub85c \uc904\uc5b4\ub4e0\ub2e4 \uc774\ub807\uac8c \uc904\uc5b4\ub4e0 \ud30c\uc77c\ud06c\uae30\ub294 Git\uc73c\ub85c \uad00\ub9ac\ud558\uc5ec \ubc84\uc804\uad00\ub9ac\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ud3ec\ud568\uc2dc\ud0a4\uace0 \uc124\uce58\ud560\uac8c \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc744 \uad6c\uc131\ud55c\ub2e4.(Zero-Install)"]}),"\n",(0,i.jsx)(e.p,{children:"\ud1a0\uc2a4\ud300\uc5d0\uc11c Zero-Install\uc744 \uc0ac\uc6a9\ud558\uba70 \uc5bb\uc740 \uc7a5\uc810 \ub450 \uac00\uc9c0"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"clone \ud639\uc740 branch\ubcc0\uacbd\uc2dc yarn install \uc2e4\ud589x"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"\ub9cc\uc57d \ub2e4\ub978 \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294 \ube0c\ub79c\uce58\ub85c \uc774\ub3d9\ud55c\ub2e4\uba74 \uc7ac\uc124\uce58\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"CI\ub3d9\uc791\uc2dc \uc758\uc874\uc131 \uc124\uce58\uc2dc\uac04 \uc808\uc57d"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["cache miss \uc77c\uacbd\uc6b0 60 ~ 90\ucd08 \uac00\ub7c9 \uc18c\uc694\ub418\ub358 \uc2dc\uac04\uc744 \uc758\uc874\uc131 \ubcf5\uc81c\ub9cc\uc73c\ub85c",(0,i.jsx)(e.br,{}),"\n","\ubc14\ub85c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\uc5ec \uc2dc\uac04\uc808\uc57d"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(e.h2,{id:"bundler",children:"Bundler"}),"\n",(0,i.jsxs)(e.p,{children:["javascript\uc5d0 \ubaa8\ub4c8\uc774\ub77c\ub294 \uac1c\ub150\uc774 \uc5c6\ub358\uc2dc\uc808 \uaddc\ubaa8\uac00 \ud070 \ud504\ub85c\uadf8\ub7a8\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ucabc\uac1c\uc11c \uc791\uc5c5\ud588\uc9c0\ub9cc",(0,i.jsx)(e.br,{}),"\n","\uc2a4\ud06c\ub9bd\ud2b8 \ud0dc\uadf8\ub97c \ud1b5\ud55c \uc804\uc5ed\ubcc0\uc218 \ucc38\uc870\ub97c \ud588\uae30\ub54c\ubb38\uc5d0 \ud568\uc218\ub098 \ubcc0\uc218\uc758 \uc774\ub984 \ucda9\ub3cc \ubb38\uc81c\ub97c \uc77c\uc73c\ud0a4\uace0",(0,i.jsx)(e.br,{}),"\n","\uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \uc2a4\ud06c\ub9bd\ud2b8 \ub85c\ub4dc\uc2dc\uac04\uc774 \uc99d\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc5d0 \uc548\uc88b\uc740 \uc601\ud5a5\uc744 \ub07c\ucce4\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ud558\ub098\ub85c \ud569\uce58\ub294 ",(0,i.jsx)(e.strong,{children:"\ubc88\ub4e4\ub9c1(Bundling)"})," \uc774\ub77c\ub294 \uac1c\ub150\uc774 \ud0c4\uc0dd\ud558\uace0",(0,i.jsx)(e.br,{}),"\n","CommonJS\uc758 ",(0,i.jsx)(e.code,{children:"require"}),"\ud568\uc218\uac00 \ub4f1\uc7a5\ud558\uba70 \uc774 \uc2dc\uc810\ubd80\ud130 \ud30c\uc77c\ub2e8\uc704\uc758 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud574\uc9c0\uace0 \uc218\ucc9c\uac1c\uc758",(0,i.jsx)(e.br,{}),"\n","JS\ud30c\uc77c\ub85c \ubd84\ub9ac\ud558\uba70 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc26c\uc6b4 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ud1b5\ud574 \ub354 \ub098\uc740 \uac1c\ubc1c\uacbd\ud5d8\uc744 \uc81c\uacf5\ud588\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ubaa8\ub4c8\uc758 \ud0c4\uc0dd\uacfc \ud568\uaed8 \uc0dd\uaca8\ub09c \ubc88\ub4e4\ub7ec\ub294 ",(0,i.jsx)(e.code,{children:"CommonJS"}),"\uc774\ud6c4\uc5d0\ub3c4 \uc0dd\uaca8\ub09c \ubaa8\ub4c8\uc5d0 \uc758\ud574 \uc124\uacc4\uc758 \uc601\ud5a5\uc744 \ubbf8\ucce4\uace0",(0,i.jsx)(e.br,{}),"\n","\uc9c0\uae08 \uc774\uc2dc\uc810\uc5d0\ub3c4 \uad49\uc7a5\ud788 \ub2e4\uc591\ud55c \ubc88\ub4e4\ub7ec\ub4e4\uc774 \uc788\uc9c0\ub9cc \ubc88\ub4e4\ub7ec\uc758 \ub3d9\uc791\uc740 \ud06c\uac8c \uc138 \uac00\uc9c0\ub85c \uad6c\ubd84\ud55c\ub2e4."]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Resolution"}),"\n",(0,i.jsx)(e.li,{children:"Load"}),"\n",(0,i.jsx)(e.li,{children:"Optimization"}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"resolution",children:"Resolution"}),"\n",(0,i.jsx)(e.p,{children:"resolution\ub2e8\uacc4\uc5d0\uc11c\ub294 import/require\ub418\ub294 \ud30c\uc77c\uc758 \uc704\uce58\ub97c \uc815\ud655\ud558\uac8c \ucc3e\ub294\uc5ed\ud560"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-tsx",children:"import { App } from './App';\n"})}),"\n",(0,i.jsxs)(e.p,{children:["App\uc744 import \ud558\ub294\uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"./App"}),"\uc758 \uc815\ud655\ud55c \uacbd\ub85c\ub97c \ud0d0\uc0c9\ud55c\ub2e4 (App.js, App.ts, App.tsx)",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub7ec\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \uc124\uc815\uc744 \uae30\ubcf8\uc81c\uacf5\ud558\uace0 \ud544\uc694\uc5d0\ub530\ub77c \ucee4\uc2a4\ud140\uac00\ub2a5.",(0,i.jsx)(e.br,{}),"\n","\uc774\ub807\uac8c \uc815\ud655\ud55c\uacbd\ub85c\ub97c \ud0d0\uc0c9\ud558\uc5ec \uc5b4\ub5a4\ud30c\uc77c\ub4e4\uc744 \ud569\uccd0\uc57c \ucd5c\uc885\uacb0\uacfc\ubb3c\uc774 \ub418\ub294\uc9c0 \uc54c \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"load",children:"Load"}),"\n",(0,i.jsxs)(e.p,{children:["Load\ub2e8\uacc4\uc5d0\uc11c\ub294 \ud45c\uc900 Javascript\ub85c \ubcc0\ud658\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \ud604\ub300\uc758 \uc6f9 \uac1c\ubc1c\uc740",(0,i.jsx)(e.br,{}),"\n","HTML,CSS,Javascript\ub85c\ub9cc \uac1c\ubc1c\ud558\uae30\uc5d4 \uc5b4\ub824\uc6c0\uc774 \uc788\uace0 \uc774\ub97c \ubcf4\uc644\ud558\uace0\uc790 \uc288\ud37c\uc14b \uc5b8\uc5b4\ub4e4\uc774 \ub4f1\uc7a5\ud558\uc600\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc774\uc5d0 \ub530\ub77c \ub300\ud45c\uc801\uc73c\ub85c Typescript\uc640 \uac19\uc740\uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uae30\uc704\ud574 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\uac00 \ub4f1\uc7a5\ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub9c1\uacfc\uc815\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"Babel/SWC"}),"\uac19\uc740 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub97c \uc218\uc6a9\ud558\uc5ec \ud45c\uc900Javascript \uc774\uc678\uc5d0\ub3c4 \uc0ac\uc6a9\uac00\ub2a5\ud55c",(0,i.jsx)(e.br,{}),"\n","\ud615\ud0dc\ub85c \ubc1c\uc804\ud588\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\uc5ec\uae30\uc11c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub294 \ud55c \uc5b8\uc5b4\ub97c \ucd94\uc0c1\ud654\ub2e8\uacc4\uac00 \ube44\uc2b7\ud55c \uc5b8\uc5b4\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uc5ed\ud560\uc744\ud558\uc9c0\ub9cc",(0,i.jsx)(e.br,{}),"\n","\uc5b8\uc5b4 \uc804\uccb4\uc801\uc73c\ub85c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4. \ubb38\ubc95\uc758 \ubb38\uc81c\uac00 \uc544\ub2cc \uc5b8\uc5b4\uc758 \ud45c\uc900\uc774 \ubcc0\uacbd\ub418\uac70\ub098 \uc0c8\ub85c\ucd94\uac00\ub418\ub294",(0,i.jsx)(e.br,{}),"\n","\ud568\uc218\uc758 \uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"\ud3f4\ub9ac\ud544(polyfill)"}),"\uacfc\uc815\uc744 \uac70\uccd0\uc57c\ud55c\ub2e4 \uad6c\ud604\uc774 \ub204\ub77d\ub41c \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \uba54\uafd4\uc8fc\ub294(fill in)",(0,i.jsx)(e.br,{}),"\n","\uc5ed\ud560\uc744 \ud558\uba70 \uae30\ub2a5\uc774\ub098 \uc0ac\uc6a9\uc790\uc758 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub530\ub77c \ub2e4\uc591\ud558\uac8c \uc124\uc815\ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"optimization",children:"Optimization"}),"\n",(0,i.jsxs)(e.p,{children:["Resolution/Load \ub2e8\uacc4\ub97c \uac70\uccd0 \uc644\uc804\ud55c JS\ud30c\uc77c \ud558\ub098\ub97c \uc0dd\uc131\ud588\ub2e4\uba74 \ub2e4\uc591\ud55c \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294",(0,i.jsx)(e.br,{}),"\n","JS\ud30c\uc77c\uc758 \ud06c\uae30\ub294 \ub108\ubb34 \ud06c\uae30 \ub54c\ubb38\uc5d0 \uc131\ub2a5\uc800\ud558\ub97c \uc720\ubc1c\ud560 \uc218 \uc788\ub2e4 \ub530\ub77c\uc11c \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc774\uae30\uc704\ud574",(0,i.jsx)(e.br,{}),"\n","\ub450 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud568"]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Minification (Compression + Mangling)"}),"\n",(0,i.jsx)(e.li,{children:"Tree Shaking"}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"1-1. Minification - Compression \ucf54\ub4dc\uc758 text\ub97c \ucd5c\ub300\ud55c \uc555\ucd95"})}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"undefined -> void 0"}),"\n",(0,i.jsx)(e.li,{children:"2 + 3 -> 5"}),"\n",(0,i.jsx)(e.li,{children:"!a && !b -> !(a || b)"}),"\n",(0,i.jsx)(e.li,{children:"Infinity -> 1/0"}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"1-2. Minification - Mangling \ubcc0\uc218,Class,\ud30c\uc77c\uc774\ub984 \ucd5c\uc801\ud654"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-javascript",children:"// function add(num1, num2) { return num1 + num2 }\nfunction add(l, r) {\n return l + r;\n}\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"2. Tree Shaking \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc \uc81c\uac70"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\ub97c \ubd84\uc11d\ud558\uace0 \uc81c\uac70\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \uc815\uc801\ubd84\uc11d\uc774 \uae4c\ub2e4\ub86d\uae30 \ub54c\ubb38\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub7ec\uc5d0 \ub530\ub77c \uc54c\uace0\ub9ac\uc998 \ubc0f \uc811\uadfc\ubc29\uc2dd\uc774 \ub2e4\ub974\uae30 \ub54c\ubb38\uc5d0 \ud070 \ucc28\uc774\uac00 \ub0a0 \uc218\uc788\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ud1a0\uc2a4\uc5d0\uc11c\ub294 \uc704\uc640 \uac19\uc740 \ubc88\ub4e4\ub7ec\uc758 \ud2b9\uc131\uc744 \ud65c\uc6a9\ud574 React Native\uc758 Metro \uc5d0\uc11c",(0,i.jsx)(e.br,{}),"\n","ESbuild\ub85c \uc62e\uae30\uba70 \ube4c\ub4dc\uc18d\ub3c4\ub97c \ucd5c\uc801\ud654 \ud588\ub358 \uc0ac\ub840\ub97c \uc18c\uac1c\ud55c\ub2e4."]}),"\n",(0,i.jsx)(e.h2,{id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",children:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9"}),"\n",(0,i.jsxs)(e.p,{children:["VCS\uc911 \ud558\ub098\uc778 Git\uc740 \uc0c8\ub85c \ucd94\uac00\ub41c \ud30c\uc77c \ud639\uc740 \ubcc0\uacbd\ub41c \ud30c\uc77c\uc758 \ub0b4\uc6a9\ub4e4\uc744 \uc27d\uac8c \ucd94\uc801\ud558\uace0 \uad00\ub9ac\ud560 \uc218 \uc788\ub294",(0,i.jsx)(e.br,{}),"\n","\ub3c4\uad6c\uc774\uba70 \uad00\ub9ac \ud560 \ud3f4\ub354\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"git init"})," \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 \uc2dc\uc791."]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Working Directory - \uc2e4\uc81c \uc791\uc5c5\uacf5\uac04"}),"\n",(0,i.jsx)(e.li,{children:"Staging Area - \ubcc0\uacbd\ub41c \ud30c\uc77c\ub4e4\uc758 \ub300\uae30\uacf5\uac04"}),"\n",(0,i.jsx)(e.li,{children:"Repository - \ucd5c\uc885\uc801\uc73c\ub85c \uc800\uc7a5\ub41c \ud30c\uc77c\ub4e4\uc758 \uacf5\uac04"}),"\n"]}),"\n",(0,i.jsxs)(e.p,{children:["\uc6b0\uc120 Git\uc740 \ud06c\uac8c \uc138 \uac00\uc9c0 \uc601\uc5ed\uc73c\ub85c \ubd84\ub9ac\ub418\uba70 \ud30c\uc77c\ub4e4\uc758 \ubcc0\ud654\ub97c gistory\ub97c \ud1b5\ud574 \ubd84\uc11d\ud558\uc5ec \uc815\ub9ac",(0,i.jsx)(e.br,{}),"\n","\u3141\u3141\u3141\u3141\u3141\u3141\u3141\u3141\u3141"]}),"\n",(0,i.jsx)(e.h2,{id:"\ucc38\uace0",children:"\ucc38\uace0"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://programmingsummaries.tistory.com/385",children:"package.json \ubc88\uc5ed"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://toss.tech/article/node-modules-and-yarn-berry",children:"node_modules\ub85c\ubd80\ud130 \uc6b0\ub9ac\ub97c \uad6c\uc6d0\ud574 \uc904 Yarn Berry"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=mee1QbvaO10&t=325s",children:"FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=Ix9gxqKOatY&t=114s",children:"FECONF 2022 [B2] \uc77c\ubc31\uac1c \ud328\ud0a4\uc9c0 \ubaa8\ub178\ub808\ud3ec \uc6b0\uc544\ud558\uac8c \uc6b4\uc601\ud558\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=QfU5REp8sjQ&t=1253s",children:"FEConf 2023 [B4] React Native, Metro\ub97c \ub118\uc5b4\uc11c"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=2IE68SDTYvI&list=PL1DJtS1Hv1PiGXmgruP1_gM2TSvQiOsFL&index=32",children:"\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uac1c\ubc1c\uc790\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c: \ub9e4\uc77c \ud558\ub8e8\ub97c \uc544\ub07c\ub294 DevOps \uc774\uc57c\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=IKyA8BKxpXc",children:"\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uc720\uc800\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c : 100\ub144\uc744 \uc544\uaef4\uc900 SSR \uc774\uc57c\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://medium.com/naver-place-dev/javascript-%EB%B2%88%EB%93%A4%EB%9F%AC%EC%9D%98-%EC%9D%B4%ED%95%B4-1-javascript-%EB%AA%A8%EB%93%88-d68c7e438fcd",children:"JavaScript \ubc88\ub4e4\ub7ec\uc758 \uc774\ud574"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://tech.wonderwall.kr/articles/git/",children:"Git \ub0b4\ubd80 \ub3d9\uc791 \ud30c\ud5e4\uce58\uae30"})}),"\n"]})]})}function h(n={}){const{wrapper:e}={...(0,r.M)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(a,{...n})}):a(n)}},6112:(n,e,s)=>{s.d(e,{c:()=>i});const i=s.p+"assets/images/hoisting-tree-45c2932b3dc3597787977575c84561d2.png"},2172:(n,e,s)=>{s.d(e,{I:()=>c,M:()=>d});var i=s(1504);const r={},l=i.createContext(r);function d(n){const e=i.useContext(l);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function c(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(r):n.components||r:d(n.components),i.createElement(l.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/5854caf2.e29b278a.js b/assets/js/5854caf2.e29b278a.js new file mode 100644 index 0000000..0fe0a7e --- /dev/null +++ b/assets/js/5854caf2.e29b278a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[1456],{4867:(n,e,s)=>{s.r(e),s.d(e,{assets:()=>t,contentTitle:()=>l,default:()=>h,frontMatter:()=>d,metadata:()=>c,toc:()=>o});var i=s(7624),r=s(2172);const d={slug:"frontend-environment",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",authors:["WanderedToLa"],tags:["frontend","environment","dependencies","transplier","git"]},l=void 0,c={permalink:"/blog/frontend-environment",editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-07-19-frontend/index.md",source:"@site/blog/2024-07-19-frontend/index.md",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",description:"\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574",date:"2024-07-19T00:00:00.000Z",formattedDate:"July 19, 2024",tags:[{label:"frontend",permalink:"/blog/tags/frontend"},{label:"environment",permalink:"/blog/tags/environment"},{label:"dependencies",permalink:"/blog/tags/dependencies"},{label:"transplier",permalink:"/blog/tags/transplier"},{label:"git",permalink:"/blog/tags/git"}],readingTime:14.845,hasTruncateMarker:!1,authors:[{name:"WooSeok",url:"https://github.com/WanderedToLa",imageURL:"https://avatars.githubusercontent.com/u/87642287?v=4",key:"WanderedToLa"}],frontMatter:{slug:"frontend-environment",title:"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend",authors:["WanderedToLa"],tags:["frontend","environment","dependencies","transplier","git"]},unlisted:!1,nextItem:{title:"docusaurus custom plugin \ub9cc\ub4e4\uae30",permalink:"/blog/docusaurus-plugin"}},t={authorsImageUrls:[void 0]},o=[{value:"dependencies in Package.json",id:"dependencies-in-packagejson",level:2},{value:"dependencies\uc758 \ubb38\uc81c\uc810",id:"dependencies\uc758-\ubb38\uc81c\uc810",level:3},{value:"Zero Install",id:"zero-install",level:3},{value:"Bundler",id:"bundler",level:2},{value:"Resolution",id:"resolution",level:3},{value:"Load",id:"load",level:3},{value:"Optimization",id:"optimization",level:3},{value:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9",id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",level:2},{value:"Git basic",id:"git-basic",level:3},{value:"\ucc38\uace0",id:"\ucc38\uace0",level:2}];function a(n){const e={a:"a",admonition:"admonition",br:"br",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.M)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.p,{children:["\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574",(0,i.jsx)(e.br,{}),"\n","frontend \ub85c\uc9c1\ubfd0 \uc544\ub2c8\ub77c \ubcf4\uc774\uc9c0 \uc54a\ub294 \ud658\uacbd\uc124\uc815\uc5d0\ub3c4 \uc5c4\uccad\ub09c \ub178\ub825\uc744 \ud558\uace0\uc788\uc74c\uc744 \uc54c\uac8c\ub418\uc5c8\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc774\uc804\uc5d0 \uac1c\ubc1c\uc744 \ud558\uba70 \uc54c\uace0\ub294 \uc788\uc9c0\ub9cc \uc790\uc138\ud558\uac8c \ubab0\ub790\ub358 \ubd80\ubd84\uacfc \uadf8\ub4e4\uc758 \ub514\ud14c\uc77c\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ub180\ub77c\uc6cc\ud558\uba70 \uba74\uc811\uc900\ube44\ub97c \ud588\ub294\ub370 \uc774 \uae00\uc5d0\uc11c\ub294 \uc774 \uacfc\uc815\uc5d0\uc11c \uc54c\uac8c\ub41c \uc0ac\uc2e4\ub4e4\uc744 \uc815\ub9ac\ud55c\ub2e4."]}),"\n",(0,i.jsx)(e.admonition,{title:"\ucc38\uace0",type:"important",children:(0,i.jsx)(e.p,{children:"Youtube \ubc0f toss tech blog\ub97c \ucc38\uace0\ud558\uc5ec \uc791\uc131\ud55c \uae00 \uc785\ub2c8\ub2e4."})}),"\n",(0,i.jsx)(e.h2,{id:"dependencies-in-packagejson",children:"dependencies in Package.json"}),"\n",(0,i.jsxs)(e.p,{children:["\uc6b0\ub9ac\uac00 \uac1c\ubc1c\uc744\ud558\uba70 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub97c \ud1b5\ud574 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud560 \ub54c\ub294\n",(0,i.jsx)(e.code,{children:"package.json"})," \ub0b4\uc758 ",(0,i.jsx)(e.code,{children:"dependencies"})," \ud544\ub4dc\ub97c \ud1b5\ud574 \uc758\uc874\uc131\uc744 \uaddc\uc815\ud558\ub294\uac83\uc73c\ub85c \uc124\uce58\ud55c\ub2e4\n\uc774\ub54c \ud574\ub2f9 \ud328\ud0a4\uc9c0\uc758 \uc774\ub984\uacfc \ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud55c \uac1d\uccb4\ub97c \ud1b5\ud574 \uc124\uce58\ud558\ub294\ub370\n\ubc84\uc804\uc758 \ubc94\uc704\ub294 \ud558\ub098 \ud639\uc740 \uc5ec\ub7ec\uac1c\uc758 \uacf5\ubc31\uc73c\ub85c \ubd84\ub9ac\ub41c \ubb38\uc790\uc5f4\uc774\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud558\ub294 \uc790\uc138\ud55c \ubc29\ubc95\uc740 ",(0,i.jsx)(e.a,{href:"https://docs.npmjs.com/misc/semver",children:"semver"}),"\ub97c \ucc38\uace0"]}),"\n",(0,i.jsxs)(e.p,{children:["\ub9cc\uc57d \uac1c\ubc1c\uc911\uc5d0\ub9cc \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc77c \uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\ud544\ub4dc\ub97c \ud65c\uc6a9\ud558\uba70"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-bash",children:"npm install some-package --save-dev\n"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \uba85\ub839\uc5b4\ub85c \uc124\uce58 \uac00\ub2a5\ud558\uace0 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58 \ud6c4 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud55c\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc5ec\uae30\uc11c \ub9cc\uc57d \ub0b4\uac00 clone\ub41c repository\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"npm install"}),"\ud588\uc744 \uacbd\uc6b0 npm\uc740 \uc774\ub97c \ud504\ub85c\uc81d\ud2b8\ub97c",(0,i.jsx)(e.br,{}),"\n","\uac1c\ubc1c\uc911\uc774\ub77c\uace0 \uc778\uc2dd\ud558\uace0 ",(0,i.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud558\ub2c8 \uc720\uc758\ud560 \uac83."]}),"\n",(0,i.jsxs)(e.p,{children:["\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ubcf8\uc778\ub9cc\uc758 plugin\uc744 \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\uc778\ub370",(0,i.jsx)(e.br,{}),"\n","\uc815\uc758\uc5d0 \ub530\ub974\uba74 \uc0c1\uc18d\ub418\ub294 \uc758\uc874\uc131\uc73c\ub85c \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\ub294 \uacf3\uc5d0\uc11c \uc81c\uacf5\ud574\uc57c\ud558\ub294 \uc758\uc874\uc131\uc774\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\ub9cc\uc57d \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc5d0\uc11c \ud328\ud0a4\uc9c0\ub97c ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\ub85c \uba85\uc2dc\ud560 \uacbd\uc6b0 \ud328\ud0a4\uc9c0\ub97c \uc81c\uacf5\ud558\ub294 \ucc45\uc784\uc744",(0,i.jsx)(e.br,{}),"\n","\uac00\uc7a5 \uc0c1\uc704\ud504\ub85c\uc81d\ud2b8\ub85c \ubc14\uafb8\uae30 \ub54c\ubb38\uc5d0 \ubc88\ub4e4\ub9c1 \uacb0\uacfc\uc5d0\uc11c \uc911\ubcf5\uc744 \ub9c9\uc744 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.p,{children:"\ud558\uc9c0\ub9cc \uc774\ub7ec\ud55c \uc7a5\uc810\uc5d0\ub3c4 \uce58\uba85\uc801\uc778 \ub2e8\uc810\uc740 \uc758\uc874\uc131 \uc804\ud30c\ubb38\uc81c\uc774\ub2e4."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-json",children:'package A:\n peerDependencies:\n "package P"\npackage B:\n dependencies:\n "package A"\n peerDependencies:\n "package P"\npackage C\n dependencies:\n "package B"\n peerDependencies:\n "package P"\n'})}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc774 peerDependency\ub97c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(e.code,{children:"package A"}),"\uc5d0\uc11c A\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubaa8\ub4e0 \ud328\ud0a4\uc9c0\ub4e4\uc740\nA\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c\uc5d0\ub3c4 peerDependencies\uc5d0 \ucd94\uac00\ud574\uc8fc\uc5b4\uc57c \ud558\uba70 \uc774\ub294 \uc758\uc874\uc131\uc758 \uad00\ub9ac\ubcf5\uc7a1\ub3c4\ub97c \uc99d\uac00\uc2dc\ucf1c",(0,i.jsx)(e.br,{}),"\n","\uc5d0\ub7ec\uc758 \ud655\ub960\uc744 \ub192\uc778\ub2e4 npm\uacfc \uac19\uc740 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub4e4\uc5d0\uc11c \uc774\ub7ec\ud55c \uc624\ub958\ub4e4\uc744 \uc5c4\ubc00\ud788 \uac80\uc0ac\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0\n\uc720\uc758\ud574\uc57c \ud558\uba70 \ub530\ub77c\uc11c ",(0,i.jsx)(e.code,{children:"peerDependencies"}),"\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0",(0,i.jsx)(e.br,{}),"\n","\ub2e8 \ud558\ub098\uc758 \ud328\ud0a4\uc9c0\ub9cc \uc874\uc7ac\ud574\uc57c \ud558\ub294\uacbd\uc6b0(\uc2f1\uae00\ud1a4) \uc77c\ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"dependencies\uc758-\ubb38\uc81c\uc810",children:"dependencies\uc758 \ubb38\uc81c\uc810"}),"\n",(0,i.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \ubb38\uc81c\ub9d0\uace0\ub3c4 ",(0,i.jsx)(e.code,{children:"npm/node_modules"}),"\uc758 \ubb38\uc81c\ub294 ",(0,i.jsx)(e.strong,{children:"\uc720\ub839\uc758\uc874\uc131(Phantom Dependency)"})," \ud604\uc0c1\uc774\ub2e4",(0,i.jsx)(e.br,{}),"\n","node_modules\ub97c \uc0ac\uc6a9\ud558\ub294 yarn v1 \ubc0f npm\uc5d0\uc11c\ub294 \uc911\ubcf5\ud574\uc11c \uc124\uce58\ud558\ub294 \ubaa8\ub4c8\uc744 \ud53c\ud558\uae30 \uc704\ud574",(0,i.jsx)(e.br,{}),"\n","\ud638\uc774\uc2a4\ud305 \uae30\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{alt:"Hoisting Tree",src:s(6112).c+"",width:"1024",height:"458"})}),"\n",(0,i.jsxs)(e.p,{children:["\uc67c\ucabd\uacfc \uac19\uc740 \uc758\uc874\uc131\ud2b8\ub9ac\uc77c \uacbd\uc6b0 \ub514\uc2a4\ud06c\uacf5\uac04\uc758 \uc808\uc57d\uc744 \uc704\ud574 \uc911\ubcf5\ub418\ub294 \ud2b8\ub9ac\ub97c \uc9c0\uc6b0\ub294 \uacfc\uc815\uc5d0\uc11c",(0,i.jsx)(e.br,{}),"\n","\uc9c1\uc811 \uc758\uc874\ud558\uace0 \uc788\uc9c0 \uc54a\uc558\ub358 ",(0,i.jsx)(e.code,{children:"B(1.0)"})," \ud328\ud0a4\uc9c0\ub97c \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.",(0,i.jsx)(e.br,{}),"\n","package.json \uc5d0 \uba85\uc2dc\ud558\uc9c0 \uc54a\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ud604\uc0c1\uc744 Phantom Dependency\ub77c\uace0 \ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\uc774\ub7ec\ud55c \ud2b9\uc131\uc740 \uc2dc\uc2a4\ud15c\uc744 \ud63c\ub780\uc2a4\ub7fd\uac8c \ud558\uace0 \ucd5c\uc545\uc758 \uacbd\uc6b0 Runtime Error\uc758 \uac00\ub2a5\uc131\uc744 \ub192\ud78c\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ud1a0\uc2a4\ud300\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,i.jsx)(e.code,{children:"Yarn Berry + PnP"}),"\ub97c \ub3c4\uc785\ud558\uba70 \ud574\uacb0\ud588\ub2e4.",(0,i.jsx)(e.br,{}),"\n","Yarn Berry\ub294 ",(0,i.jsx)(e.code,{children:"Plug'n'Play"})," \uc804\ub7b5\uc744 \uc774\uc6a9\ud558\uc5ec \uae30\uc874\uc758 Package.json\uc744 \uae30\ubc18\uc73c\ub85c \uc758\uc874\uc131 \ud2b8\ub9ac\ub97c",(0,i.jsx)(e.br,{}),"\n","\ub9cc\ub4e4\uc5b4 node_modules \uad6c\uc870\ub97c \uc0dd\uc131\ud558\ub358 \ubc29\uc2dd\uc5d0\uc11c \uc758\uc874\uc131 \uc124\uce58\uc2dc node_modules\ub97c \uc0dd\uc131\ud558\uc9c0 \uc54a\uace0",(0,i.jsx)(e.br,{}),"\n",(0,i.jsx)(e.code,{children:".yarn/cache"}),"\ud3f4\ub354\uc5d0 \uc758\uc874\uc131 \uc815\ubcf4\ub97c \uc800\uc7a5\ud55c\ub2e4 \ub610\ud55c ",(0,i.jsx)(e.code,{children:".pnp.cjs"})," \ud30c\uc77c\uc5d0 \uc758\uc874\uc131\uc744 \ucc3e\uc744 \uc218 \uc788\ub294",(0,i.jsx)(e.br,{}),"\n","\uc815\ubcf4\ub97c \uae30\ub85d\ud558\uc5ec \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0 \uad00\ub9ac\ub97c \ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["yarn\uc740 \uae30\uc874 node.js\uc758 ",(0,i.jsx)(e.code,{children:"require"}),"\ud568\uc218\ub97c \ub36e\uc5b4\uc50c\uc6cc \ub3d9\uc791\ud558\uba70 \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0\uad00\ub9ac\ub97c",(0,i.jsx)(e.br,{}),"\n","\ud560 \uc218 \uc788\uace0 \uc774\ub54c\ubb38\uc5d0 \ud2b9\uc815 \ud328\ud0a4\uc9c0\uc640 \uc758\uc874\uc131\uc5d0 \ub300\ud55c \uc815\ubcf4\uac00 \ud544\uc694\ud560 \ub54c \ubc14\ub85c \uc54c \uc218 \uc788\ub2e4",(0,i.jsx)(e.br,{}),"\n","\ub610\ud55c Yarn PnP \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uac01 \uc758\uc874\uc131\uc740 Zip \uc544\uce74\uc774\ube0c\ub85c \uad00\ub9ac\ud558\uac8c \ub418\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \uc7a5\uc810\uc774 \uc0dd\uae34\ub2e4"]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"node_modules\uac00 \uc5c6\uc74c -> \ube60\ub978 \uc124\uce58 \uac00\ub2a5"}),"\n",(0,i.jsx)(e.li,{children:"\ud328\ud0a4\uc9c0\ub4e4\uc740 \ud558\ub098\uc758 Zip\uc544\uce74\uc774\ube0c\ub85c \uc800\uc7a5\ud558\uc5ec \uc911\ubcf5\ubc29\uc9c0"}),"\n",(0,i.jsx)(e.li,{children:"\ud30c\uc77c\uc758 \uc218\uac00 \uc801\uc5b4\uc9c0\uba70 \ubcc0\uacbd\uc0ac\ud56d\uc758 \uac10\uc9c0\uac00 \uc26c\uc6cc\uc9c0\uace0 \uc0ad\uc81c\uac00 \ube60\ub974\ub2e4."}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"zero-install",children:"Zero Install"}),"\n",(0,i.jsxs)(e.p,{children:["\uc5ec\uae30\uc11c \ud55c\ubc1c \ub354 \ub098\uc544\uac00 \uc758\uc874\uc131\uc744 Git\uc73c\ub85c \uad00\ub9ac\ud55c\ub2e4\uba74 \uc5b4\ub5a8\uae4c?",(0,i.jsx)(e.br,{}),"\n","\uc77c\ubc18\uc801\uc778 node_modules\uc758 \ud06c\uae30\ub294 1.2GB/13\ub9cc5\ucc9c\uac1c\uc758 \ud30c\uc77c\uc744 \uac00\uc9c0\uace0 \uc788\uc9c0\ub9cc yarn\uc744 \uc0ac\uc6a9\ud55c\ub2e4\uba74",(0,i.jsx)(e.br,{}),"\n","139MB/2\ucc9c\uac1c\uc758 \uc555\ucd95\ud30c\uc77c\ub85c \uc904\uc5b4\ub4e0\ub2e4 \uc774\ub807\uac8c \uc904\uc5b4\ub4e0 \ud30c\uc77c\ud06c\uae30\ub294 Git\uc73c\ub85c \uad00\ub9ac\ud558\uc5ec \ubc84\uc804\uad00\ub9ac\uc5d0",(0,i.jsx)(e.br,{}),"\n","\ud3ec\ud568\uc2dc\ud0a4\uace0 \uc124\uce58\ud560\uac8c \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc744 \uad6c\uc131\ud55c\ub2e4.(Zero-Install)"]}),"\n",(0,i.jsx)(e.p,{children:"\ud1a0\uc2a4\ud300\uc5d0\uc11c Zero-Install\uc744 \uc0ac\uc6a9\ud558\uba70 \uc5bb\uc740 \uc7a5\uc810 \ub450 \uac00\uc9c0"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"clone \ud639\uc740 branch\ubcc0\uacbd\uc2dc yarn install \uc2e4\ud589x"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"\ub9cc\uc57d \ub2e4\ub978 \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294 \ube0c\ub79c\uce58\ub85c \uc774\ub3d9\ud55c\ub2e4\uba74 \uc7ac\uc124\uce58\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"CI\ub3d9\uc791\uc2dc \uc758\uc874\uc131 \uc124\uce58\uc2dc\uac04 \uc808\uc57d"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["cache miss \uc77c\uacbd\uc6b0 60 ~ 90\ucd08 \uac00\ub7c9 \uc18c\uc694\ub418\ub358 \uc2dc\uac04\uc744 \uc758\uc874\uc131 \ubcf5\uc81c\ub9cc\uc73c\ub85c",(0,i.jsx)(e.br,{}),"\n","\ubc14\ub85c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\uc5ec \uc2dc\uac04\uc808\uc57d"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(e.h2,{id:"bundler",children:"Bundler"}),"\n",(0,i.jsxs)(e.p,{children:["javascript\uc5d0 \ubaa8\ub4c8\uc774\ub77c\ub294 \uac1c\ub150\uc774 \uc5c6\ub358\uc2dc\uc808 \uaddc\ubaa8\uac00 \ud070 \ud504\ub85c\uadf8\ub7a8\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ucabc\uac1c\uc11c \uc791\uc5c5\ud588\uc9c0\ub9cc",(0,i.jsx)(e.br,{}),"\n","\uc2a4\ud06c\ub9bd\ud2b8 \ud0dc\uadf8\ub97c \ud1b5\ud55c \uc804\uc5ed\ubcc0\uc218 \ucc38\uc870\ub97c \ud588\uae30\ub54c\ubb38\uc5d0 \ud568\uc218\ub098 \ubcc0\uc218\uc758 \uc774\ub984 \ucda9\ub3cc \ubb38\uc81c\ub97c \uc77c\uc73c\ud0a4\uace0",(0,i.jsx)(e.br,{}),"\n","\uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \uc2a4\ud06c\ub9bd\ud2b8 \ub85c\ub4dc\uc2dc\uac04\uc774 \uc99d\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc5d0 \uc548\uc88b\uc740 \uc601\ud5a5\uc744 \ub07c\ucce4\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ud558\ub098\ub85c \ud569\uce58\ub294 ",(0,i.jsx)(e.strong,{children:"\ubc88\ub4e4\ub9c1(Bundling)"})," \uc774\ub77c\ub294 \uac1c\ub150\uc774 \ud0c4\uc0dd\ud558\uace0",(0,i.jsx)(e.br,{}),"\n","CommonJS\uc758 ",(0,i.jsx)(e.code,{children:"require"}),"\ud568\uc218\uac00 \ub4f1\uc7a5\ud558\uba70 \uc774 \uc2dc\uc810\ubd80\ud130 \ud30c\uc77c\ub2e8\uc704\uc758 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud574\uc9c0\uace0 \uc218\ucc9c\uac1c\uc758",(0,i.jsx)(e.br,{}),"\n","JS\ud30c\uc77c\ub85c \ubd84\ub9ac\ud558\uba70 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc26c\uc6b4 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ud1b5\ud574 \ub354 \ub098\uc740 \uac1c\ubc1c\uacbd\ud5d8\uc744 \uc81c\uacf5\ud588\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ubaa8\ub4c8\uc758 \ud0c4\uc0dd\uacfc \ud568\uaed8 \uc0dd\uaca8\ub09c \ubc88\ub4e4\ub7ec\ub294 ",(0,i.jsx)(e.code,{children:"CommonJS"}),"\uc774\ud6c4\uc5d0\ub3c4 \uc0dd\uaca8\ub09c \ubaa8\ub4c8\uc5d0 \uc758\ud574 \uc124\uacc4\uc758 \uc601\ud5a5\uc744 \ubbf8\ucce4\uace0",(0,i.jsx)(e.br,{}),"\n","\uc9c0\uae08 \uc774\uc2dc\uc810\uc5d0\ub3c4 \uad49\uc7a5\ud788 \ub2e4\uc591\ud55c \ubc88\ub4e4\ub7ec\ub4e4\uc774 \uc788\uc9c0\ub9cc \ubc88\ub4e4\ub7ec\uc758 \ub3d9\uc791\uc740 \ud06c\uac8c \uc138 \uac00\uc9c0\ub85c \uad6c\ubd84\ud55c\ub2e4."]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Resolution"}),"\n",(0,i.jsx)(e.li,{children:"Load"}),"\n",(0,i.jsx)(e.li,{children:"Optimization"}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"resolution",children:"Resolution"}),"\n",(0,i.jsx)(e.p,{children:"resolution\ub2e8\uacc4\uc5d0\uc11c\ub294 import/require\ub418\ub294 \ud30c\uc77c\uc758 \uc704\uce58\ub97c \uc815\ud655\ud558\uac8c \ucc3e\ub294\uc5ed\ud560"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-tsx",children:"import { App } from './App';\n"})}),"\n",(0,i.jsxs)(e.p,{children:["App\uc744 import \ud558\ub294\uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"./App"}),"\uc758 \uc815\ud655\ud55c \uacbd\ub85c\ub97c \ud0d0\uc0c9\ud55c\ub2e4 (App.js, App.ts, App.tsx)",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub7ec\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \uc124\uc815\uc744 \uae30\ubcf8\uc81c\uacf5\ud558\uace0 \ud544\uc694\uc5d0\ub530\ub77c \ucee4\uc2a4\ud140\uac00\ub2a5.",(0,i.jsx)(e.br,{}),"\n","\uc774\ub807\uac8c \uc815\ud655\ud55c\uacbd\ub85c\ub97c \ud0d0\uc0c9\ud558\uc5ec \uc5b4\ub5a4\ud30c\uc77c\ub4e4\uc744 \ud569\uccd0\uc57c \ucd5c\uc885\uacb0\uacfc\ubb3c\uc774 \ub418\ub294\uc9c0 \uc54c \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"load",children:"Load"}),"\n",(0,i.jsxs)(e.p,{children:["Load\ub2e8\uacc4\uc5d0\uc11c\ub294 \ud45c\uc900 Javascript\ub85c \ubcc0\ud658\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \ud604\ub300\uc758 \uc6f9 \uac1c\ubc1c\uc740",(0,i.jsx)(e.br,{}),"\n","HTML,CSS,Javascript\ub85c\ub9cc \uac1c\ubc1c\ud558\uae30\uc5d4 \uc5b4\ub824\uc6c0\uc774 \uc788\uace0 \uc774\ub97c \ubcf4\uc644\ud558\uace0\uc790 \uc288\ud37c\uc14b \uc5b8\uc5b4\ub4e4\uc774 \ub4f1\uc7a5\ud558\uc600\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc774\uc5d0 \ub530\ub77c \ub300\ud45c\uc801\uc73c\ub85c Typescript\uc640 \uac19\uc740\uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uae30\uc704\ud574 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\uac00 \ub4f1\uc7a5\ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub9c1\uacfc\uc815\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"Babel/SWC"}),"\uac19\uc740 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub97c \uc218\uc6a9\ud558\uc5ec \ud45c\uc900Javascript \uc774\uc678\uc5d0\ub3c4 \uc0ac\uc6a9\uac00\ub2a5\ud55c",(0,i.jsx)(e.br,{}),"\n","\ud615\ud0dc\ub85c \ubc1c\uc804\ud574 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub9c1 \uacfc\uc815\uc744 \uac70\uce58\ub294\uac83\uc774 Load\ub2e8\uacc4\uc5d0 \ud574\ub2f9\ud568."]}),"\n",(0,i.jsxs)(e.p,{children:["\uc5ec\uae30\uc11c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub294 \ud55c \uc5b8\uc5b4\ub97c \ucd94\uc0c1\ud654\ub2e8\uacc4\uac00 \ube44\uc2b7\ud55c \uc5b8\uc5b4\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uc5ed\ud560\uc744\ud558\uc9c0\ub9cc",(0,i.jsx)(e.br,{}),"\n","\uc5b8\uc5b4 \uc804\uccb4\uc801\uc73c\ub85c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4. \ubb38\ubc95\uc758 \ubb38\uc81c\uac00 \uc544\ub2cc \uc5b8\uc5b4\uc758 \ud45c\uc900\uc774 \ubcc0\uacbd\ub418\uac70\ub098",(0,i.jsx)(e.br,{}),"\n","\uc0c8\ub85c\ucd94\uac00\ub418\ub294 \ud568\uc218\uc758 \uacbd\uc6b0 ",(0,i.jsx)(e.code,{children:"\ud3f4\ub9ac\ud544(polyfill)"}),"\uacfc\uc815\uc744 \uac70\uccd0\uc57c\ud55c\ub2e4 \uad6c\ud604\uc774 \ub204\ub77d\ub41c",(0,i.jsx)(e.br,{}),"\n","\uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \uba54\uafd4\uc8fc\ub294(fill in) \uc5ed\ud560\uc744 \ud558\uba70 \uae30\ub2a5\uc774\ub098 \uc0ac\uc6a9\uc790\uc758 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub530\ub77c",(0,i.jsx)(e.br,{}),"\n","\ub2e4\uc591\ud558\uac8c \uc124\uc815\ud560 \uc218 \uc788\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"optimization",children:"Optimization"}),"\n",(0,i.jsxs)(e.p,{children:["Resolution/Load \ub2e8\uacc4\ub97c \uac70\uccd0 \uc644\uc804\ud55c JS\ud30c\uc77c \ud558\ub098\ub97c \uc0dd\uc131\ud588\ub2e4\uba74 \ub2e4\uc591\ud55c \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294",(0,i.jsx)(e.br,{}),"\n","JS\ud30c\uc77c\uc758 \ud06c\uae30\ub294 \ub108\ubb34 \ud06c\uae30 \ub54c\ubb38\uc5d0 \uc131\ub2a5\uc800\ud558\ub97c \uc720\ubc1c\ud560 \uc218 \uc788\ub2e4 \ub530\ub77c\uc11c \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc774\uae30\uc704\ud574",(0,i.jsx)(e.br,{}),"\n","\ub450 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud568"]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Minification (Compression + Mangling)"}),"\n",(0,i.jsx)(e.li,{children:"Tree Shaking"}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"1-1. Minification - Compression \ucf54\ub4dc\uc758 text\ub97c \ucd5c\ub300\ud55c \uc555\ucd95"})}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"undefined -> void 0"}),"\n",(0,i.jsx)(e.li,{children:"2 + 3 -> 5"}),"\n",(0,i.jsx)(e.li,{children:"!a && !b -> !(a || b)"}),"\n",(0,i.jsx)(e.li,{children:"Infinity -> 1/0"}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"1-2. Minification - Mangling \ubcc0\uc218,Class,\ud30c\uc77c\uc774\ub984 \ucd5c\uc801\ud654"})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-javascript",children:"// function add(num1, num2) { return num1 + num2 }\nfunction add(l, r) {\n return l + r;\n}\n"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"2. Tree Shaking \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc \uc81c\uac70"})}),"\n",(0,i.jsxs)(e.p,{children:["Tree Shaking \ub2e8\uacc4\uc5d0\uc11c\ub294 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\ub97c \ubd84\uc11d\ud558\uace0 \uc81c\uac70\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370",(0,i.jsx)(e.br,{}),"\n","\uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\uac00 \ubb34\uc5c7\uc778\uc9c0 \ud310\ubcc4\ud558\ub294 \uc77c\uc740 \uae4c\ub2e4\ub85c\uc6b4 \ud3b8\uc5d0 \uc18d\ud55c\ub2e4(\uc815\uc801\ubd84\uc11d\uc758 \uc5b4\ub824\uc6c0)",(0,i.jsx)(e.br,{}),"\n","\ub530\ub77c\uc11c \ubc88\ub4e4\ub7ec\ubcc4\ub85c \uc54c\uace0\ub9ac\uc998 \ubc0f \uc811\uadfc\ubc29\uc2dd\uc774 \ucc9c\ucc28\ub9cc\ubcc4\uc774\ub77c \ud070 \ucc28\uc774\uac00 \uc788\ub294 \uc0ac\ud56d\uc774\uae30\ub3c4 \ud558\ub2e4."]}),"\n",(0,i.jsxs)(e.p,{children:["\ud1a0\uc2a4\uc5d0\uc11c\ub294 \uc704\uc640 \uac19\uc740 \ubc88\ub4e4\ub7ec\uc758 \ud2b9\uc131\uc744 \ud65c\uc6a9\ud574 React Native\uc758 Metro \uc5d0\uc11c",(0,i.jsx)(e.br,{}),"\n","ESbuild\ub85c \uc62e\uae30\uba70 \ube4c\ub4dc\uc18d\ub3c4\ub97c \ucd5c\uc801\ud654 \ud588\ub358 \uc0ac\ub840\ub97c \uc18c\uac1c\ud588\ub2e4."]}),"\n",(0,i.jsx)(e.h2,{id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",children:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9"}),"\n",(0,i.jsxs)(e.p,{children:["VCS\uc911 \ud558\ub098\uc778 Git\uc740 ",(0,i.jsx)(e.strong,{children:"\ub378\ud0c0\uae30\ubc18 \ubc84\uc804\uad00\ub9ac \uc2dc\uc2a4\ud15c"}),"\uc73c\ub85c \ud30c\uc77c\uc758 \ubcc0\ud654\ub97c \uc2dc\uac04\uc21c\uc73c\ub85c \uad00\ub9ac\ud574",(0,i.jsx)(e.br,{}),"\n","\ud504\ub85c\uc81d\ud2b8\uc758 \uc2a4\ub0c5\uc0f7\uc744 \uc800\uc7a5\ud558\uace0 \ud30c\uc77c\uac04 \ubcc0\uacbd\uc0ac\ud56d\uc744 ",(0,i.jsx)(e.code,{children:"\ucc28\uc774(diff)"}),"/",(0,i.jsx)(e.code,{children:"\ub378\ud0c0(delta)"})," \ud615\ud0dc\ub85c",(0,i.jsx)(e.br,{}),"\n","\uc800\uc7a5\ud558\uace0 \ud30c\uc77c\uc744 \uc138 \uac00\uc9c0 \uc0c1\ud0dc\uc778 ",(0,i.jsx)(e.code,{children:"Committed"}),", ",(0,i.jsx)(e.code,{children:"Modified"}),", ",(0,i.jsx)(e.code,{children:"Staged"})," \uad00\ub9ac\ud558\uba70",(0,i.jsx)(e.br,{}),"\n","\uc774 \uc138 \uac00\uc9c0\uc758 \uc0c1\ud0dc\ub294 \ud504\ub85c\uc81d\ud2b8\uc758 \uc138 \uac00\uc9c0 \uc0c1\ud0dc\uc640 \uc5f0\uad00\ub418\uc5b4 \uc788\uace0 \ub2e4\uc74c\uacfc \uac19\ub2e4."]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"Working Directory - \uc2e4\uc81c \uc791\uc5c5\uacf5\uac04"}),"\n",(0,i.jsx)(e.li,{children:"Staging Area - \ubcc0\uacbd\ub41c \ud30c\uc77c\ub4e4\uc758 \ub300\uae30\uacf5\uac04"}),"\n",(0,i.jsx)(e.li,{children:"Repository(.git directory) - \ucd5c\uc885\uc801\uc73c\ub85c \uc800\uc7a5\ub41c \ud30c\uc77c\ub4e4\uc758 \uacf5\uac04"}),"\n"]}),"\n",(0,i.jsxs)(e.p,{children:["Git\uc740 \uc548\uc804\ud558\uace0 \uc77c\uad00\ub41c \ud30c\uc77c\uad00\ub9ac\ub97c \uc704\ud574 ",(0,i.jsx)(e.code,{children:"sha-1"})," \ud574\uc2dc\uc54c\uace0\ub9ac\uc998\uc73c\ub85c 40\uc790\uae38\uc774\uc758 16\uc9c4\uc218 \ubb38\uc790\uc5f4\uc744",(0,i.jsx)(e.br,{}),"\n","\ub9cc\ub4e4\uace0 \ubaa8\ub4e0\uac83\uc744 \ud574\uc2dc\ub85c \uc2dd\ubcc4\ud558\uc5ec \ub370\uc774\ud130\uc758 \ubb34\uacb0\uc131\uc744 \ud655\uc778\ud55c\ub2e4."]}),"\n",(0,i.jsx)(e.h3,{id:"git-basic",children:"Git basic"}),"\n",(0,i.jsxs)(e.p,{children:["git\uc73c\ub85c \ubc84\uc804\uad00\ub9ac\ub97c \uc2dc\uc791\ud558\uae30 \uc704\ud574 \ubcf8\uc778\uc758 \uc791\uc5c5\ud3f4\ub354\uc5d0\uc11c ",(0,i.jsx)(e.code,{children:"git init"})," \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uba74",(0,i.jsx)(e.br,{}),"\n",(0,i.jsx)(e.code,{children:".git"}),"\ud3f4\ub354\uac00 \uc0dd\uc131\ub418\uace0 \uc774\uacf3\uc5d0 \ud30c\uc77c\ub4e4\uc758 \uc815\ubcf4\uac00 \uc800\uc7a5\ub41c\ub2e4.",(0,i.jsx)(e.br,{}),"\n","\uc6b0\ub9ac\uac00 \uc2e4\uc81c\ub85c \uc791\uc5c5\ud558\ub294\uacf5\uac04(Working Directory)\uc758 \ud30c\uc77c\uc740 Tracked\uc640 Untracked\ub85c \ub098\ub204\uba70",(0,i.jsx)(e.br,{}),"\n","Tracked\ud30c\uc77c\uc758 \uacbd\uc6b0 \uc2a4\ub0c5\uc0f7\uc5d0 \ud3ec\ud568\ub3fc \uc788\ub358 \ud30c\uc77c\ub85c ",(0,i.jsx)(e.code,{children:"Unmodified"}),", ",(0,i.jsx)(e.code,{children:"Modified"}),", ",(0,i.jsx)(e.code,{children:"Staged"})," \uc0c1\ud0dc\uc911",(0,i.jsx)(e.br,{}),"\n","\ud558\ub098\uc774\ub2e4."]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{alt:"git-status",src:s(5904).c+"",width:"1065",height:"627"})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{alt:"git-add",src:s(4584).c+"",width:"742",height:"164"})}),"\n",(0,i.jsx)(e.h2,{id:"\ucc38\uace0",children:"\ucc38\uace0"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://programmingsummaries.tistory.com/385",children:"package.json \ubc88\uc5ed"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://toss.tech/article/node-modules-and-yarn-berry",children:"node_modules\ub85c\ubd80\ud130 \uc6b0\ub9ac\ub97c \uad6c\uc6d0\ud574 \uc904 Yarn Berry"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=mee1QbvaO10&t=325s",children:"FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=Ix9gxqKOatY&t=114s",children:"FECONF 2022 [B2] \uc77c\ubc31\uac1c \ud328\ud0a4\uc9c0 \ubaa8\ub178\ub808\ud3ec \uc6b0\uc544\ud558\uac8c \uc6b4\uc601\ud558\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=QfU5REp8sjQ&t=1253s",children:"FEConf 2023 [B4] React Native, Metro\ub97c \ub118\uc5b4\uc11c"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=2IE68SDTYvI&list=PL1DJtS1Hv1PiGXmgruP1_gM2TSvQiOsFL&index=32",children:"\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uac1c\ubc1c\uc790\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c: \ub9e4\uc77c \ud558\ub8e8\ub97c \uc544\ub07c\ub294 DevOps \uc774\uc57c\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://www.youtube.com/watch?v=IKyA8BKxpXc",children:"\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uc720\uc800\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c : 100\ub144\uc744 \uc544\uaef4\uc900 SSR \uc774\uc57c\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://medium.com/naver-place-dev/javascript-%EB%B2%88%EB%93%A4%EB%9F%AC%EC%9D%98-%EC%9D%B4%ED%95%B4-1-javascript-%EB%AA%A8%EB%93%88-d68c7e438fcd",children:"JavaScript \ubc88\ub4e4\ub7ec\uc758 \uc774\ud574"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://tech.wonderwall.kr/articles/git/",children:"Git \ub0b4\ubd80 \ub3d9\uc791 \ud30c\ud5e4\uce58\uae30"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EA%B8%B0%EC%B4%88",children:"\uc2dc\uc791\ud558\uae30 - Git \uae30\ucd08"})}),"\n"]})]})}function h(n={}){const{wrapper:e}={...(0,r.M)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(a,{...n})}):a(n)}},4584:(n,e,s)=>{s.d(e,{c:()=>i});const i=s.p+"assets/images/git-add-b3ba9ff3088ef52c696147b24dca6437.png"},5904:(n,e,s)=>{s.d(e,{c:()=>i});const i=s.p+"assets/images/git-status-0c69ca9fd992f3efb893ab5a89f6d2a6.png"},6112:(n,e,s)=>{s.d(e,{c:()=>i});const i=s.p+"assets/images/hoisting-tree-45c2932b3dc3597787977575c84561d2.png"},2172:(n,e,s)=>{s.d(e,{I:()=>c,M:()=>l});var i=s(1504);const r={},d=i.createContext(r);function l(n){const e=i.useContext(d);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function c(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(r):n.components||r:l(n.components),i.createElement(d.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/b2f554cd.a096084c.js b/assets/js/b2f554cd.a096084c.js deleted file mode 100644 index 4c24de1..0000000 --- a/assets/js/b2f554cd.a096084c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[6880],{8256:n=>{n.exports=JSON.parse('{"blogPosts":[{"id":"frontend-environment","metadata":{"permalink":"/blog/frontend-environment","editUrl":"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-07-19-frontend/index.md","source":"@site/blog/2024-07-19-frontend/index.md","title":"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend","description":"\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574","date":"2024-07-19T00:00:00.000Z","formattedDate":"July 19, 2024","tags":[{"label":"frontend","permalink":"/blog/tags/frontend"},{"label":"environment","permalink":"/blog/tags/environment"},{"label":"dependencies","permalink":"/blog/tags/dependencies"},{"label":"transplier","permalink":"/blog/tags/transplier"},{"label":"git","permalink":"/blog/tags/git"}],"readingTime":13.525,"hasTruncateMarker":false,"authors":[{"name":"WooSeok","url":"https://github.com/WanderedToLa","imageURL":"https://avatars.githubusercontent.com/u/87642287?v=4","key":"WanderedToLa"}],"frontMatter":{"slug":"frontend-environment","title":"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend","authors":["WanderedToLa"],"tags":["frontend","environment","dependencies","transplier","git"]},"unlisted":false,"nextItem":{"title":"docusaurus custom plugin \ub9cc\ub4e4\uae30","permalink":"/blog/docusaurus-plugin"}},"content":"\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574 \\nfrontend \ub85c\uc9c1\ubfd0 \uc544\ub2c8\ub77c \ubcf4\uc774\uc9c0 \uc54a\ub294 \ud658\uacbd\uc124\uc815\uc5d0\ub3c4 \uc5c4\uccad\ub09c \ub178\ub825\uc744 \ud558\uace0\uc788\uc74c\uc744 \uc54c\uac8c\ub418\uc5c8\ub2e4. \\n\uc774\uc804\uc5d0 \uac1c\ubc1c\uc744 \ud558\uba70 \uc54c\uace0\ub294 \uc788\uc9c0\ub9cc \uc790\uc138\ud558\uac8c \ubab0\ub790\ub358 \ubd80\ubd84\uacfc \uadf8\ub4e4\uc758 \ub514\ud14c\uc77c\uc5d0 \\n\ub180\ub77c\uc6cc\ud558\uba70 \uba74\uc811\uc900\ube44\ub97c \ud588\ub294\ub370 \uc774 \uae00\uc5d0\uc11c\ub294 \uc774 \uacfc\uc815\uc5d0\uc11c \uc54c\uac8c\ub41c \uc0ac\uc2e4\ub4e4\uc744 \uc815\ub9ac\ud55c\ub2e4.\\n\\n:::important \ucc38\uace0\\nYoutube \ubc0f toss tech blog\ub97c \ucc38\uace0\ud558\uc5ec \uc791\uc131\ud55c \uae00 \uc785\ub2c8\ub2e4.\\n:::\\n\\n## dependencies in Package.json\\n\\n\uc6b0\ub9ac\uac00 \uac1c\ubc1c\uc744\ud558\uba70 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub97c \ud1b5\ud574 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud560 \ub54c\ub294\\n`package.json` \ub0b4\uc758 `dependencies` \ud544\ub4dc\ub97c \ud1b5\ud574 \uc758\uc874\uc131\uc744 \uaddc\uc815\ud558\ub294\uac83\uc73c\ub85c \uc124\uce58\ud55c\ub2e4\\n\uc774\ub54c \ud574\ub2f9 \ud328\ud0a4\uc9c0\uc758 \uc774\ub984\uacfc \ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud55c \uac1d\uccb4\ub97c \ud1b5\ud574 \uc124\uce58\ud558\ub294\ub370\\n\ubc84\uc804\uc758 \ubc94\uc704\ub294 \ud558\ub098 \ud639\uc740 \uc5ec\ub7ec\uac1c\uc758 \uacf5\ubc31\uc73c\ub85c \ubd84\ub9ac\ub41c \ubb38\uc790\uc5f4\uc774\ub2e4. \\n\ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud558\ub294 \uc790\uc138\ud55c \ubc29\ubc95\uc740 [semver](https://docs.npmjs.com/misc/semver)\ub97c \ucc38\uace0\\n\\n\ub9cc\uc57d \uac1c\ubc1c\uc911\uc5d0\ub9cc \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc77c \uacbd\uc6b0 `devDependencies`\ud544\ub4dc\ub97c \ud65c\uc6a9\ud558\uba70\\n\\n```bash\\nnpm install some-package --save-dev\\n```\\n\\n\uc704\uc640 \uac19\uc740 \uba85\ub839\uc5b4\ub85c \uc124\uce58 \uac00\ub2a5\ud558\uace0 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58 \ud6c4 `devDependencies`\uc5d0 \ucd94\uac00\ud55c\ub2e4. \\n\uc5ec\uae30\uc11c \ub9cc\uc57d \ub0b4\uac00 clone\ub41c repository\uc5d0\uc11c `npm install`\ud588\uc744 \uacbd\uc6b0 npm\uc740 \uc774\ub97c \ud504\ub85c\uc81d\ud2b8\ub97c \\n\uac1c\ubc1c\uc911\uc774\ub77c\uace0 \uc778\uc2dd\ud558\uace0 `devDependencies`\uc5d0 \ucd94\uac00\ud558\ub2c8 \uc720\uc758\ud560 \uac83.\\n\\n\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ubcf8\uc778\ub9cc\uc758 plugin\uc744 \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294 `peerDependencies`\uc778\ub370 \\n\uc815\uc758\uc5d0 \ub530\ub974\uba74 \uc0c1\uc18d\ub418\ub294 \uc758\uc874\uc131\uc73c\ub85c \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\ub294 \uacf3\uc5d0\uc11c \uc81c\uacf5\ud574\uc57c\ud558\ub294 \uc758\uc874\uc131\uc774\ub2e4. \\n\ub9cc\uc57d \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc5d0\uc11c \ud328\ud0a4\uc9c0\ub97c `peerDependencies`\ub85c \uba85\uc2dc\ud560 \uacbd\uc6b0 \ud328\ud0a4\uc9c0\ub97c \uc81c\uacf5\ud558\ub294 \ucc45\uc784\uc744 \\n\uac00\uc7a5 \uc0c1\uc704\ud504\ub85c\uc81d\ud2b8\ub85c \ubc14\uafb8\uae30 \ub54c\ubb38\uc5d0 \ubc88\ub4e4\ub9c1 \uacb0\uacfc\uc5d0\uc11c \uc911\ubcf5\uc744 \ub9c9\uc744 \uc218 \uc788\ub2e4.\\n\\n\ud558\uc9c0\ub9cc \uc774\ub7ec\ud55c \uc7a5\uc810\uc5d0\ub3c4 \uce58\uba85\uc801\uc778 \ub2e8\uc810\uc740 \uc758\uc874\uc131 \uc804\ud30c\ubb38\uc81c\uc774\ub2e4.\\n\\n```json\\npackage A:\\n peerDependencies:\\n \\"package P\\"\\npackage B:\\n dependencies:\\n \\"package A\\"\\n peerDependencies:\\n \\"package P\\"\\npackage C\\n dependencies:\\n \\"package B\\"\\n peerDependencies:\\n \\"package P\\"\\n```\\n\\n\uc704\uc640 \uac19\uc774 peerDependency\ub97c \uc0ac\uc6a9\ud558\ub294 `package A`\uc5d0\uc11c A\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubaa8\ub4e0 \ud328\ud0a4\uc9c0\ub4e4\uc740\\nA\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c\uc5d0\ub3c4 peerDependencies\uc5d0 \ucd94\uac00\ud574\uc8fc\uc5b4\uc57c \ud558\uba70 \uc774\ub294 \uc758\uc874\uc131\uc758 \uad00\ub9ac\ubcf5\uc7a1\ub3c4\ub97c \uc99d\uac00\uc2dc\ucf1c \\n\uc5d0\ub7ec\uc758 \ud655\ub960\uc744 \ub192\uc778\ub2e4 npm\uacfc \uac19\uc740 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub4e4\uc5d0\uc11c \uc774\ub7ec\ud55c \uc624\ub958\ub4e4\uc744 \uc5c4\ubc00\ud788 \uac80\uc0ac\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0\\n\uc720\uc758\ud574\uc57c \ud558\uba70 \ub530\ub77c\uc11c `peerDependencies`\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0 \\n\ub2e8 \ud558\ub098\uc758 \ud328\ud0a4\uc9c0\ub9cc \uc874\uc7ac\ud574\uc57c \ud558\ub294\uacbd\uc6b0(\uc2f1\uae00\ud1a4) \uc77c\ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.\\n\\n### dependencies\uc758 \ubb38\uc81c\uc810\\n\\n\uc704\uc640 \uac19\uc740 \ubb38\uc81c\ub9d0\uace0\ub3c4 `npm/node_modules`\uc758 \ubb38\uc81c\ub294 **\uc720\ub839\uc758\uc874\uc131(Phantom Dependency)** \ud604\uc0c1\uc774\ub2e4 \\nnode_modules\ub97c \uc0ac\uc6a9\ud558\ub294 yarn v1 \ubc0f npm\uc5d0\uc11c\ub294 \uc911\ubcf5\ud574\uc11c \uc124\uce58\ud558\ub294 \ubaa8\ub4c8\uc744 \ud53c\ud558\uae30 \uc704\ud574 \\n\ud638\uc774\uc2a4\ud305 \uae30\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4\\n\\n![Hoisting Tree](../../static/img/hoisting-tree.png)\\n\\n\uc67c\ucabd\uacfc \uac19\uc740 \uc758\uc874\uc131\ud2b8\ub9ac\uc77c \uacbd\uc6b0 \ub514\uc2a4\ud06c\uacf5\uac04\uc758 \uc808\uc57d\uc744 \uc704\ud574 \uc911\ubcf5\ub418\ub294 \ud2b8\ub9ac\ub97c \uc9c0\uc6b0\ub294 \uacfc\uc815\uc5d0\uc11c \\n\uc9c1\uc811 \uc758\uc874\ud558\uace0 \uc788\uc9c0 \uc54a\uc558\ub358 `B(1.0)` \ud328\ud0a4\uc9c0\ub97c \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \\npackage.json \uc5d0 \uba85\uc2dc\ud558\uc9c0 \uc54a\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ud604\uc0c1\uc744 Phantom Dependency\ub77c\uace0 \ud558\uba70 \\n\uc774\ub7ec\ud55c \ud2b9\uc131\uc740 \uc2dc\uc2a4\ud15c\uc744 \ud63c\ub780\uc2a4\ub7fd\uac8c \ud558\uace0 \ucd5c\uc545\uc758 \uacbd\uc6b0 Runtime Error\uc758 \uac00\ub2a5\uc131\uc744 \ub192\ud78c\ub2e4.\\n\\n\ud1a0\uc2a4\ud300\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 `Yarn Berry + PnP`\ub97c \ub3c4\uc785\ud558\uba70 \ud574\uacb0\ud588\ub2e4. \\nYarn Berry\ub294 `Plug\'n\'Play` \uc804\ub7b5\uc744 \uc774\uc6a9\ud558\uc5ec \uae30\uc874\uc758 Package.json\uc744 \uae30\ubc18\uc73c\ub85c \uc758\uc874\uc131 \ud2b8\ub9ac\ub97c \\n\ub9cc\ub4e4\uc5b4 node_modules \uad6c\uc870\ub97c \uc0dd\uc131\ud558\ub358 \ubc29\uc2dd\uc5d0\uc11c \uc758\uc874\uc131 \uc124\uce58\uc2dc node_modules\ub97c \uc0dd\uc131\ud558\uc9c0 \uc54a\uace0 \\n`.yarn/cache`\ud3f4\ub354\uc5d0 \uc758\uc874\uc131 \uc815\ubcf4\ub97c \uc800\uc7a5\ud55c\ub2e4 \ub610\ud55c `.pnp.cjs` \ud30c\uc77c\uc5d0 \uc758\uc874\uc131\uc744 \ucc3e\uc744 \uc218 \uc788\ub294 \\n\uc815\ubcf4\ub97c \uae30\ub85d\ud558\uc5ec \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0 \uad00\ub9ac\ub97c \ud560 \uc218 \uc788\ub2e4.\\n\\nyarn\uc740 \uae30\uc874 node.js\uc758 `require`\ud568\uc218\ub97c \ub36e\uc5b4\uc50c\uc6cc \ub3d9\uc791\ud558\uba70 \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0\uad00\ub9ac\ub97c \\n\ud560 \uc218 \uc788\uace0 \uc774\ub54c\ubb38\uc5d0 \ud2b9\uc815 \ud328\ud0a4\uc9c0\uc640 \uc758\uc874\uc131\uc5d0 \ub300\ud55c \uc815\ubcf4\uac00 \ud544\uc694\ud560 \ub54c \ubc14\ub85c \uc54c \uc218 \uc788\ub2e4 \\n\ub610\ud55c Yarn PnP \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uac01 \uc758\uc874\uc131\uc740 Zip \uc544\uce74\uc774\ube0c\ub85c \uad00\ub9ac\ud558\uac8c \ub418\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \uc7a5\uc810\uc774 \uc0dd\uae34\ub2e4\\n\\n1. node_modules\uac00 \uc5c6\uc74c -> \ube60\ub978 \uc124\uce58 \uac00\ub2a5\\n2. \ud328\ud0a4\uc9c0\ub4e4\uc740 \ud558\ub098\uc758 Zip\uc544\uce74\uc774\ube0c\ub85c \uc800\uc7a5\ud558\uc5ec \uc911\ubcf5\ubc29\uc9c0\\n3. \ud30c\uc77c\uc758 \uc218\uac00 \uc801\uc5b4\uc9c0\uba70 \ubcc0\uacbd\uc0ac\ud56d\uc758 \uac10\uc9c0\uac00 \uc26c\uc6cc\uc9c0\uace0 \uc0ad\uc81c\uac00 \ube60\ub974\ub2e4.\\n\\n### Zero Install\\n\\n\uc5ec\uae30\uc11c \ud55c\ubc1c \ub354 \ub098\uc544\uac00 \uc758\uc874\uc131\uc744 Git\uc73c\ub85c \uad00\ub9ac\ud55c\ub2e4\uba74 \uc5b4\ub5a8\uae4c? \\n\uc77c\ubc18\uc801\uc778 node_modules\uc758 \ud06c\uae30\ub294 1.2GB/13\ub9cc5\ucc9c\uac1c\uc758 \ud30c\uc77c\uc744 \uac00\uc9c0\uace0 \uc788\uc9c0\ub9cc yarn\uc744 \uc0ac\uc6a9\ud55c\ub2e4\uba74 \\n139MB/2\ucc9c\uac1c\uc758 \uc555\ucd95\ud30c\uc77c\ub85c \uc904\uc5b4\ub4e0\ub2e4 \uc774\ub807\uac8c \uc904\uc5b4\ub4e0 \ud30c\uc77c\ud06c\uae30\ub294 Git\uc73c\ub85c \uad00\ub9ac\ud558\uc5ec \ubc84\uc804\uad00\ub9ac\uc5d0 \\n\ud3ec\ud568\uc2dc\ud0a4\uace0 \uc124\uce58\ud560\uac8c \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc744 \uad6c\uc131\ud55c\ub2e4.(Zero-Install)\\n\\n\ud1a0\uc2a4\ud300\uc5d0\uc11c Zero-Install\uc744 \uc0ac\uc6a9\ud558\uba70 \uc5bb\uc740 \uc7a5\uc810 \ub450 \uac00\uc9c0\\n\\n1. clone \ud639\uc740 branch\ubcc0\uacbd\uc2dc yarn install \uc2e4\ud589x\\n\\n - \ub9cc\uc57d \ub2e4\ub978 \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294 \ube0c\ub79c\uce58\ub85c \uc774\ub3d9\ud55c\ub2e4\uba74 \uc7ac\uc124\uce58\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4.\\n\\n2. CI\ub3d9\uc791\uc2dc \uc758\uc874\uc131 \uc124\uce58\uc2dc\uac04 \uc808\uc57d\\n\\n - cache miss \uc77c\uacbd\uc6b0 60 ~ 90\ucd08 \uac00\ub7c9 \uc18c\uc694\ub418\ub358 \uc2dc\uac04\uc744 \uc758\uc874\uc131 \ubcf5\uc81c\ub9cc\uc73c\ub85c \\n \ubc14\ub85c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\uc5ec \uc2dc\uac04\uc808\uc57d\\n\\n## Bundler\\n\\njavascript\uc5d0 \ubaa8\ub4c8\uc774\ub77c\ub294 \uac1c\ub150\uc774 \uc5c6\ub358\uc2dc\uc808 \uaddc\ubaa8\uac00 \ud070 \ud504\ub85c\uadf8\ub7a8\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ucabc\uac1c\uc11c \uc791\uc5c5\ud588\uc9c0\ub9cc \\n\uc2a4\ud06c\ub9bd\ud2b8 \ud0dc\uadf8\ub97c \ud1b5\ud55c \uc804\uc5ed\ubcc0\uc218 \ucc38\uc870\ub97c \ud588\uae30\ub54c\ubb38\uc5d0 \ud568\uc218\ub098 \ubcc0\uc218\uc758 \uc774\ub984 \ucda9\ub3cc \ubb38\uc81c\ub97c \uc77c\uc73c\ud0a4\uace0 \\n\uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \uc2a4\ud06c\ub9bd\ud2b8 \ub85c\ub4dc\uc2dc\uac04\uc774 \uc99d\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc5d0 \uc548\uc88b\uc740 \uc601\ud5a5\uc744 \ub07c\ucce4\ub2e4.\\n\\n\uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ud558\ub098\ub85c \ud569\uce58\ub294 **\ubc88\ub4e4\ub9c1(Bundling)** \uc774\ub77c\ub294 \uac1c\ub150\uc774 \ud0c4\uc0dd\ud558\uace0 \\nCommonJS\uc758 `require`\ud568\uc218\uac00 \ub4f1\uc7a5\ud558\uba70 \uc774 \uc2dc\uc810\ubd80\ud130 \ud30c\uc77c\ub2e8\uc704\uc758 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud574\uc9c0\uace0 \uc218\ucc9c\uac1c\uc758 \\nJS\ud30c\uc77c\ub85c \ubd84\ub9ac\ud558\uba70 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc26c\uc6b4 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ud1b5\ud574 \ub354 \ub098\uc740 \uac1c\ubc1c\uacbd\ud5d8\uc744 \uc81c\uacf5\ud588\ub2e4.\\n\\n\ubaa8\ub4c8\uc758 \ud0c4\uc0dd\uacfc \ud568\uaed8 \uc0dd\uaca8\ub09c \ubc88\ub4e4\ub7ec\ub294 `CommonJS`\uc774\ud6c4\uc5d0\ub3c4 \uc0dd\uaca8\ub09c \ubaa8\ub4c8\uc5d0 \uc758\ud574 \uc124\uacc4\uc758 \uc601\ud5a5\uc744 \ubbf8\ucce4\uace0 \\n\uc9c0\uae08 \uc774\uc2dc\uc810\uc5d0\ub3c4 \uad49\uc7a5\ud788 \ub2e4\uc591\ud55c \ubc88\ub4e4\ub7ec\ub4e4\uc774 \uc788\uc9c0\ub9cc \ubc88\ub4e4\ub7ec\uc758 \ub3d9\uc791\uc740 \ud06c\uac8c \uc138 \uac00\uc9c0\ub85c \uad6c\ubd84\ud55c\ub2e4.\\n\\n1. Resolution\\n2. Load\\n3. Optimization\\n\\n### Resolution\\n\\nresolution\ub2e8\uacc4\uc5d0\uc11c\ub294 import/require\ub418\ub294 \ud30c\uc77c\uc758 \uc704\uce58\ub97c \uc815\ud655\ud558\uac8c \ucc3e\ub294\uc5ed\ud560\\n\\n```tsx\\nimport { App } from \'./App\';\\n```\\n\\nApp\uc744 import \ud558\ub294\uacbd\uc6b0 `./App`\uc758 \uc815\ud655\ud55c \uacbd\ub85c\ub97c \ud0d0\uc0c9\ud55c\ub2e4 (App.js, App.ts, App.tsx) \\n\ubc88\ub4e4\ub7ec\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \uc124\uc815\uc744 \uae30\ubcf8\uc81c\uacf5\ud558\uace0 \ud544\uc694\uc5d0\ub530\ub77c \ucee4\uc2a4\ud140\uac00\ub2a5. \\n\uc774\ub807\uac8c \uc815\ud655\ud55c\uacbd\ub85c\ub97c \ud0d0\uc0c9\ud558\uc5ec \uc5b4\ub5a4\ud30c\uc77c\ub4e4\uc744 \ud569\uccd0\uc57c \ucd5c\uc885\uacb0\uacfc\ubb3c\uc774 \ub418\ub294\uc9c0 \uc54c \uc218 \uc788\ub2e4.\\n\\n### Load\\n\\nLoad\ub2e8\uacc4\uc5d0\uc11c\ub294 \ud45c\uc900 Javascript\ub85c \ubcc0\ud658\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \ud604\ub300\uc758 \uc6f9 \uac1c\ubc1c\uc740 \\nHTML,CSS,Javascript\ub85c\ub9cc \uac1c\ubc1c\ud558\uae30\uc5d4 \uc5b4\ub824\uc6c0\uc774 \uc788\uace0 \uc774\ub97c \ubcf4\uc644\ud558\uace0\uc790 \uc288\ud37c\uc14b \uc5b8\uc5b4\ub4e4\uc774 \ub4f1\uc7a5\ud558\uc600\ub2e4. \\n\uc774\uc5d0 \ub530\ub77c \ub300\ud45c\uc801\uc73c\ub85c Typescript\uc640 \uac19\uc740\uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uae30\uc704\ud574 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\uac00 \ub4f1\uc7a5\ud558\uba70 \\n\ubc88\ub4e4\ub9c1\uacfc\uc815\uc5d0\uc11c `Babel/SWC`\uac19\uc740 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub97c \uc218\uc6a9\ud558\uc5ec \ud45c\uc900Javascript \uc774\uc678\uc5d0\ub3c4 \uc0ac\uc6a9\uac00\ub2a5\ud55c \\n\ud615\ud0dc\ub85c \ubc1c\uc804\ud588\ub2e4.\\n\\n\uc5ec\uae30\uc11c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub294 \ud55c \uc5b8\uc5b4\ub97c \ucd94\uc0c1\ud654\ub2e8\uacc4\uac00 \ube44\uc2b7\ud55c \uc5b8\uc5b4\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uc5ed\ud560\uc744\ud558\uc9c0\ub9cc \\n\uc5b8\uc5b4 \uc804\uccb4\uc801\uc73c\ub85c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4. \ubb38\ubc95\uc758 \ubb38\uc81c\uac00 \uc544\ub2cc \uc5b8\uc5b4\uc758 \ud45c\uc900\uc774 \ubcc0\uacbd\ub418\uac70\ub098 \uc0c8\ub85c\ucd94\uac00\ub418\ub294 \\n\ud568\uc218\uc758 \uacbd\uc6b0 `\ud3f4\ub9ac\ud544(polyfill)`\uacfc\uc815\uc744 \uac70\uccd0\uc57c\ud55c\ub2e4 \uad6c\ud604\uc774 \ub204\ub77d\ub41c \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \uba54\uafd4\uc8fc\ub294(fill in) \\n\uc5ed\ud560\uc744 \ud558\uba70 \uae30\ub2a5\uc774\ub098 \uc0ac\uc6a9\uc790\uc758 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub530\ub77c \ub2e4\uc591\ud558\uac8c \uc124\uc815\ud560 \uc218 \uc788\ub2e4.\\n\\n### Optimization\\n\\nResolution/Load \ub2e8\uacc4\ub97c \uac70\uccd0 \uc644\uc804\ud55c JS\ud30c\uc77c \ud558\ub098\ub97c \uc0dd\uc131\ud588\ub2e4\uba74 \ub2e4\uc591\ud55c \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294 \\nJS\ud30c\uc77c\uc758 \ud06c\uae30\ub294 \ub108\ubb34 \ud06c\uae30 \ub54c\ubb38\uc5d0 \uc131\ub2a5\uc800\ud558\ub97c \uc720\ubc1c\ud560 \uc218 \uc788\ub2e4 \ub530\ub77c\uc11c \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc774\uae30\uc704\ud574 \\n\ub450 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud568\\n\\n1. Minification (Compression + Mangling)\\n2. Tree Shaking\\n\\n**1-1. Minification - Compression \ucf54\ub4dc\uc758 text\ub97c \ucd5c\ub300\ud55c \uc555\ucd95**\\n\\n- undefined -> void 0\\n- 2 + 3 -> 5\\n- !a && !b -> !(a || b)\\n- Infinity -> 1/0\\n\\n**1-2. Minification - Mangling \ubcc0\uc218,Class,\ud30c\uc77c\uc774\ub984 \ucd5c\uc801\ud654**\\n\\n```javascript\\n// function add(num1, num2) { return num1 + num2 }\\nfunction add(l, r) {\\n return l + r;\\n}\\n```\\n\\n**2. Tree Shaking \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc \uc81c\uac70**\\n\\n\uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\ub97c \ubd84\uc11d\ud558\uace0 \uc81c\uac70\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \uc815\uc801\ubd84\uc11d\uc774 \uae4c\ub2e4\ub86d\uae30 \ub54c\ubb38\uc5d0 \\n\ubc88\ub4e4\ub7ec\uc5d0 \ub530\ub77c \uc54c\uace0\ub9ac\uc998 \ubc0f \uc811\uadfc\ubc29\uc2dd\uc774 \ub2e4\ub974\uae30 \ub54c\ubb38\uc5d0 \ud070 \ucc28\uc774\uac00 \ub0a0 \uc218\uc788\ub2e4.\\n\\n\ud1a0\uc2a4\uc5d0\uc11c\ub294 \uc704\uc640 \uac19\uc740 \ubc88\ub4e4\ub7ec\uc758 \ud2b9\uc131\uc744 \ud65c\uc6a9\ud574 React Native\uc758 Metro \uc5d0\uc11c \\nESbuild\ub85c \uc62e\uae30\uba70 \ube4c\ub4dc\uc18d\ub3c4\ub97c \ucd5c\uc801\ud654 \ud588\ub358 \uc0ac\ub840\ub97c \uc18c\uac1c\ud55c\ub2e4.\\n\\n## Git \ubd84\uc11d \ubc0f \ud65c\uc6a9\\n\\nVCS\uc911 \ud558\ub098\uc778 Git\uc740 \uc0c8\ub85c \ucd94\uac00\ub41c \ud30c\uc77c \ud639\uc740 \ubcc0\uacbd\ub41c \ud30c\uc77c\uc758 \ub0b4\uc6a9\ub4e4\uc744 \uc27d\uac8c \ucd94\uc801\ud558\uace0 \uad00\ub9ac\ud560 \uc218 \uc788\ub294 \\n\ub3c4\uad6c\uc774\uba70 \uad00\ub9ac \ud560 \ud3f4\ub354\uc5d0\uc11c `git init` \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 \uc2dc\uc791.\\n\\n1. Working Directory - \uc2e4\uc81c \uc791\uc5c5\uacf5\uac04\\n2. Staging Area - \ubcc0\uacbd\ub41c \ud30c\uc77c\ub4e4\uc758 \ub300\uae30\uacf5\uac04\\n3. Repository - \ucd5c\uc885\uc801\uc73c\ub85c \uc800\uc7a5\ub41c \ud30c\uc77c\ub4e4\uc758 \uacf5\uac04\\n\\n\uc6b0\uc120 Git\uc740 \ud06c\uac8c \uc138 \uac00\uc9c0 \uc601\uc5ed\uc73c\ub85c \ubd84\ub9ac\ub418\uba70 \ud30c\uc77c\ub4e4\uc758 \ubcc0\ud654\ub97c gistory\ub97c \ud1b5\ud574 \ubd84\uc11d\ud558\uc5ec \uc815\ub9ac \\n\u3141\u3141\u3141\u3141\u3141\u3141\u3141\u3141\u3141\\n\\n## \ucc38\uace0\\n\\n- [package.json \ubc88\uc5ed](https://programmingsummaries.tistory.com/385)\\n- [node_modules\ub85c\ubd80\ud130 \uc6b0\ub9ac\ub97c \uad6c\uc6d0\ud574 \uc904 Yarn Berry](https://toss.tech/article/node-modules-and-yarn-berry)\\n- [FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?](https://www.youtube.com/watch?v=mee1QbvaO10&t=325s)\\n- [FECONF 2022 [B2] \uc77c\ubc31\uac1c \ud328\ud0a4\uc9c0 \ubaa8\ub178\ub808\ud3ec \uc6b0\uc544\ud558\uac8c \uc6b4\uc601\ud558\uae30](https://www.youtube.com/watch?v=Ix9gxqKOatY&t=114s)\\n- [FEConf 2023 [B4] React Native, Metro\ub97c \ub118\uc5b4\uc11c](https://www.youtube.com/watch?v=QfU5REp8sjQ&t=1253s)\\n- [\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uac1c\ubc1c\uc790\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c: \ub9e4\uc77c \ud558\ub8e8\ub97c \uc544\ub07c\ub294 DevOps \uc774\uc57c\uae30](https://www.youtube.com/watch?v=2IE68SDTYvI&list=PL1DJtS1Hv1PiGXmgruP1_gM2TSvQiOsFL&index=32)\\n- [\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uc720\uc800\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c : 100\ub144\uc744 \uc544\uaef4\uc900 SSR \uc774\uc57c\uae30](https://www.youtube.com/watch?v=IKyA8BKxpXc)\\n- [JavaScript \ubc88\ub4e4\ub7ec\uc758 \uc774\ud574](https://medium.com/naver-place-dev/javascript-%EB%B2%88%EB%93%A4%EB%9F%AC%EC%9D%98-%EC%9D%B4%ED%95%B4-1-javascript-%EB%AA%A8%EB%93%88-d68c7e438fcd)\\n- [Git \ub0b4\ubd80 \ub3d9\uc791 \ud30c\ud5e4\uce58\uae30](https://tech.wonderwall.kr/articles/git/)"},{"id":"docusaurus-plugin","metadata":{"permalink":"/blog/docusaurus-plugin","editUrl":"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-07-01-docusaurus-plugin/index.md","source":"@site/blog/2024-07-01-docusaurus-plugin/index.md","title":"docusaurus custom plugin \ub9cc\ub4e4\uae30","description":"Recent Posts","date":"2024-07-01T00:00:00.000Z","formattedDate":"July 1, 2024","tags":[{"label":"docusaurus","permalink":"/blog/tags/docusaurus"},{"label":"plugin","permalink":"/blog/tags/plugin"},{"label":"custom","permalink":"/blog/tags/custom"}],"readingTime":4.865,"hasTruncateMarker":false,"authors":[{"name":"WooSeok","url":"https://github.com/WanderedToLa","imageURL":"https://avatars.githubusercontent.com/u/87642287?v=4","key":"WanderedToLa"}],"frontMatter":{"slug":"docusaurus-plugin","title":"docusaurus custom plugin \ub9cc\ub4e4\uae30","authors":["WanderedToLa"],"tags":["docusaurus","plugin","custom"]},"unlisted":false,"prevItem":{"title":"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend","permalink":"/blog/frontend-environment"},"nextItem":{"title":"\uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\ub780?","permalink":"/blog/frontend-observability"}},"content":"## Recent Posts\\n\\n\uba54\uc778\ud398\uc774\uc9c0\uc5d0 recentpost \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub824\uace0 \ubbf8\ub8e8\ub2e4\uac00 \ub4dc\ub514\uc5b4 \uc2dc\uc791\ud558\uba70 \\ndocusaurus\uc5d0\uc11c \uc9c1\uc811 \ud30c\uc77c\uc2dc\uc2a4\ud15c\uc5d0 \uc811\uadfc\ud558\ub824\uace0 \uba87\ubc88\uc744 \uc0bd\uc9c8\ud558\ub2e4\uac00 \\nplugin\uc744 \ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\ud574\uc57c\ud55c\ub2e4\ub294 \uacb0\ub860\uc744 \uc5bb\uc5c8\ub2e4. \\n\uc774\ubbf8 \ub9cc\ub4e4\uc5b4\uc9c4 blog \uad00\ub828 plugin\uc774 \uc788\uae34\ud588\uc9c0\ub9cc [plugin-content-blog](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog) \\nconfig \ud544\ub4dc\uc5d0\uc11c option\uc744\ud1b5\ud574 \uc218\uc815\ud558\ub294 \ubc29\uc2dd\uc740 \uc6d0\ud558\ub358 \ubaa8\uc591\uc774 \uc544\ub2c8\ub77c \ud328\uc2a4\ud588\uc74c.\\n\\n## Architecture\\n\\nArchive\ud0ed\uc5d0 \uc788\ub294 \uae00 \uc911 \ucd5c\uc2e0\uc21c\uc73c\ub85c 5\uac1c\ub9cc \uba54\uc778\ud398\uc774\uc9c0\uc5d0 \ubcf4\uc5ec\uc8fc\uace0 \uc2f6\uc5c8\ub294\ub370 \\n\uba54\uc778\ud398\uc774\uc9c0\uc5d0\uc11c \ube44\ub3d9\uae30\ub85c \ud30c\uc77c\uc2dc\uc2a4\ud15c\uc744 \ud638\ucd9c\ud574 \uc77d\uc740\ub2e4\uc74c slug\ub97c \ub9ac\ud134\ud558\ub294 \uc2dd\uc73c\ub85c \\n\uad6c\uc0c1\ud588\uc9c0\ub9cc docusaurus\uc758 \uc81c\uc791\uc758\ub3c4\ub791\uc740 \uc804\ud600 \ub2e4\ub974\uae30\ub54c\ubb38\uc5d0 \uc5d0\ub7ec\uac00 \uc0dd\uae38 \uc218 \ubc16\uc5d0\uc5c6\ub2e4. \\n\uce5c\uc808\ud558\uac8c\ub3c4 \uc544\ud0a4\ud14d\ucc98 \uc18c\uac1c\uae00\uc744 \ubcf4\uba70 \uac10\uc744 \uc7a1\uc744\uc218 \uc788\uc5c8\uc74c\\n\\ndocusaurus\uc758 \uc124\uacc4 \ud639\uc740 \uba58\ud0c8\ubaa8\ub378\uc774 \ucf54\ub4dc\ub97c \uc9c1\uc811 import\ud574\uc11c \uc4f0\uac70\ub098 \ud558\uc9c0\uc54a\uace0 \\njson\uc73c\ub85c \uc784\uc2dc\ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\uac70\ub098 \uc0ac\uc6a9\uc790\uac00 plugin\uc5d0 \uc811\uadfc\ud55c\ub2e4\uba74 \\n\uc624\ub85c\uc9c0 config.js\ub97c \ud1b5\ud574 \uc0c1\ud638\uc791\uc6a9 \ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uacc4\ub418\uc5b4 \uc788\uae30\ub54c\ubb38\uc5d0 \\n\uc5ec\uae30\uc11c \uc81c\uacf5\ud558\ub294 Lifecycle API\ub97c \uc774\uc6a9\ud574 build\uc2dc \uc0dd\uc131\ub41c json \ud30c\uc77c\ub85c \\n\ub0b4 \ube14\ub85c\uadf8 \ub370\uc774\ud130\uc5d0 \uc811\uadfc\ud574\uc57c \ud55c\ub2e4. \ub530\ub77c\uc11c \ub300\ubd80\ubd84\uc758 \ucee4\uc2a4\ud140\uc740 config\uc5d0\uc11c \uac00\ub2a5\ud568\\n\\n![Architecture](../../static/img/docusaurus-architecture.png)\\n\\n\uadf8\ub798\uc11c \ubb38\uc11c\ub97c \ucc3e\uc544\ubcf4\ub358\uc911 globalData\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 `useGlobalData` API\uac00 \\n\uc788\uae34\ud588\uc73c\ub098 docs\uc758 \uc815\ubcf4\ub9cc \ub2f4\uc544\uc904 \ubfd0 blog\uc758 \ub370\uc774\ud130\ub294 \ub2f4\uae30\uc9c0 \uc54a\uae38\ub798 Lifecycle API\ub97c \uc774\uc6a9\ud574 \\nbuild\uc2dc json\uc5d0 \ube14\ub85c\uadf8 \uc815\ubcf4\ub4e4\uc744 \ub2f4\uc544 \uc0ac\uc6a9\ud558\ub294 \ucabd\uc73c\ub85c \ubcc0\uacbd\ud588\ub2e4. \\nglobalData\uc758 \uc815\ubcf4\ub4e4\uc740 `npm start`\uc2dc `.docusaurus/globalData.json`\uc5d0\uc11c \ud655\uc778\uac00\ub2a5\\n\\n- [useGlobalData](https://docusaurus.io/docs/docusaurus-core#useGlobalData)\\n\\n## Using Plugins\\n\\nplugin\uc740 \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 \uc124\uce58\ud560 \uc218\ub3c4 \uc788\uc9c0\ub9cc \ub85c\uceec\ud30c\uc77c\uc744 \ubd88\ub7ec\uc640 \uc0ac\uc6a9\uac00\ub2a5\ud568\\n\\n```ts title=\\"docusaurus.config.js\\"\\nexport default {\\n // ...\\n plugins: [\'./src/plugins/docusaurus-local-plugin\'],\\n};\\n```\\n\\n\ub85c\uceec\ud30c\uc77c\uc744 \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0 \uc808\ub300\uacbd\ub85c\ub85c \uba85\uc2dc\ud55c\ub2e4.\\n\\n```ts title=\\"docusaurus.config.js\\"\\nexport default {\\n // ...\\n plugins: [\\n async function myPlugin(context, options) {\\n // ...\\n return {\\n name: \'my-plugin\',\\n async loadContent() {\\n // ...\\n },\\n async contentLoaded({ content, actions }) {\\n // ...\\n },\\n /* other lifecycle API */\\n };\\n },\\n ],\\n};\\n```\\n\\n\uc9c1\uc811 \ud568\uc218\ub97c \uc791\uc131\ud558\ub294 \ubc29\ubc95\ub3c4 \uac00\ub2a5\\n\\n\uc704\uc640\uac19\uc774 \uacbd\ub85c\ub97c \uc9c0\uc815\ud588\ub2e4\uba74 Docusaurus\uce21\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Lifecycle APIs\ub97c \\n\uc774\uc6a9\ud574 \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uba74 \ub41c\ub2e4.\\n\\n- [Lifecycle APIs](https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis)\\n\\nAPI\ub4e4\uc911 \uac00\uc7a5 \uc911\uc694\ud558\ub2e4\uace0 \ubcfc \uc218 \uc788\ub294 `async loadContent()`\uc640 \\n`async contentLoaded({content, actions})` \ub450 \uac00\uc9c0\uac00 \uc788\ub2e4 `loadContent`\uc5d0\uc11c \ud30c\uc77c\uc2dc\uc2a4\ud15c\uc5d0 \\n\uc811\uadfc\ud558\uac70\ub098 \ub2e4\uc591\ud55c \ub3d9\uc791\ub4e4\uc774 \uac00\ub2a5\ud558\uace0 `loadContent`\uc5d0\uc11c \ub0b4\uac00 \ud544\uc694\ud55c \uac12\uc744 return\ud55c\ub2e4\uba74 \\n\uadf8 \uac12\uc740`contentLoaded`\ud568\uc218\uc5d0\uc11c `content` \ud30c\ub77c\ubbf8\ud130\ub85c \ubc1b\ub294\ub2e4. `actions`\uc758 \uacbd\uc6b0 \\n\uae30\ubcf8\uc73c\ub85c \uc81c\uacf5\ud558\ub294 3\uac00\uc9c0 \ud568\uc218\ub4e4\uc774 \uc788\uace0 \uacbd\ub85c\ub97c \uc124\uc815\ud558\ub294 \uacbd\uc6b0 `appRoute` \\njson\ud30c\uc77c\uc744 \ub9cc\ub4e0\ub2e4\uba74 `createData` \ub098\uc758 \uacbd\uc6b0 \uae30\uc874 globalData.json\uc5d0 \ub370\uc774\ud130\ub97c\\n\ucd94\uac00\ud558\ub824\uace0 \ud588\uae30\uc5d0 \ub9c8\uc9c0\ub9c9\uc778 `setGlobalData`\ub97c \uc0ac\uc6a9\ud588\ub2e4.\\n\\n- loadContent - \ub2e4\uc591\ud55c \ub3d9\uc791\uc744 \uc815\uc758\ud558\ub294 \ud568\uc218 (\ud30c\uc77c\uc2dc\uc2a4\ud15c, API\ud638\ucd9c...)\\n- contentLoaded - content,actions\ub97c \ud30c\ub77c\ubbf8\ud130\ub85c \ubc1b\ub294 \ud568\uc218\\n - content: loadCotent\uc758 \ub9ac\ud134\uac12\\n - actions: appRoute, createData, setGlobalData\ub85c \uad6c\uc131\\n\\n```ts title=\\"./src/plugins/my-plugin.js\\"\\nexport default {\\n plugins: [\\n async function myPlugin(context, options) {\\n return {\\n name: \'my-plugin\',\\n async loadContent() {\\n return 1;\\n },\\n\\n // loadContent\uc758 return\uac12 content\uc5d0 \uc804\ub2ec\\n async contentLoaded({ content, actions }) {\\n const { setGlobalData } = actions;\\n setGlobalData({ myBlogData: content });\\n },\\n };\\n },\\n ],\\n};\\n```\\n\\n\uc704\ucc98\ub7fc \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uba74 `npm start`\uc2dc globalData\uc5d0 \ub370\uc774\ud130\uac00 \uc800\uc7a5\ub418\uace0 \\n\ub0b4\uac00 \uc6d0\ud558\ub294 \ubd80\ubd84\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub824\uba74 `useGlobalData` \ubc0f `usePluginData`\ub97c \uc0ac\uc6a9\ud574 \\n\ub370\uc774\ud130\ub97c \uac00\uc838\uc640 \uc0ac\uc6a9\ud558\uba74 \ub05d\\n\\n```tsx title=\\"./src/pages/index.tsx\\"\\nimport { usePluginData } from \'@docusaurus/useGlobalData\';\\n\\nexport default function Home() {\\n const { myBlogData } = usePluginData(\'my-plugin\');\\n\\n return (\\n \\n );\\n}\\n```"},{"id":"frontend-observability","metadata":{"permalink":"/blog/frontend-observability","editUrl":"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-06-22-Observability/index.md","source":"@site/blog/2024-06-22-Observability/index.md","title":"\uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\ub780?","description":"SSR(Server-Side Rendering) \ub3c4\uc785\uc758 \ubcc0\ud654","date":"2024-06-22T00:00:00.000Z","formattedDate":"June 22, 2024","tags":[{"label":"Observability","permalink":"/blog/tags/observability"},{"label":"Frontend","permalink":"/blog/tags/frontend"}],"readingTime":5.355,"hasTruncateMarker":false,"authors":[{"name":"WooSeok","url":"https://github.com/WanderedToLa","imageURL":"https://avatars.githubusercontent.com/u/87642287?v=4","key":"WanderedToLa"}],"frontMatter":{"slug":"frontend-observability","title":"\uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\ub780?","authors":["WanderedToLa"],"tags":["Observability","Frontend"]},"unlisted":false,"prevItem":{"title":"docusaurus custom plugin \ub9cc\ub4e4\uae30","permalink":"/blog/docusaurus-plugin"}},"content":"## SSR(Server-Side Rendering) \ub3c4\uc785\uc758 \ubcc0\ud654\\n\\n\uc5ec\ub7ec\uae30\uc5c5\ub4e4\uc5d0\uc11c \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub354 \ub098\uc740 \uc0ac\uc6a9\uc131\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud574 \ub178\ub825\ud558\uace0 \uc788\ub2e4. \\nFrontend \uce21\uba74\uc5d0\uc11c \uc5b4\ub5a4 \ub178\ub825\ub4e4\uc744 \ud558\uace0\uc788\uc744\uae4c \ucc3e\uc544\ubcf4\uc558\ub294\ub370 \\n\uccab\ubc88\uc9f8\ub294 Node.js \uc758 \ubc1c\uc804\uc73c\ub85c server\uc640 client\uac00 \uac19\uc740 \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uac8c \ub418\uba74\uc11c \\n\ub80c\ub354\ub9c1\uc758 \ucc45\uc784\uc744 Server\ub85c \uc774\uc804\ud558\ub824\ub294 \uc6c0\uc9c1\uc784\uc774 \ub098\ud0c0\ub0ac\uace0 \\n\ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \ub80c\ub354\ub9c1\uc744 \ub2f4\ub2f9\ud558\ub358 React\uc640 \uac19\uc740 \ud658\uacbd\uc5d0\uc11c \\n\uc0ac\uc6a9\uc790\ub4e4\uc774 \ud398\uc774\uc9c0\uc5d0 \ucc98\uc74c\uc73c\ub85c \uc9c4\uc785\ud558\ub294 \uc2dc\uac04`(LCP/FCP)`\uc744 \uc904\uc5ec \ub354 \ub098\uc740 \uc0ac\uc6a9\uc131\uc744 \uc81c\uacf5\ud55c \uac83\uc774\ub2e4.\\n\\n\uc774\ub7f0 \ub300\ud45c\uc801\uc778 \ud504\ub808\uc784\uc6cc\ud06c\ub85c Next.js\uac00 \uc788\uace0 \ub2e8\uc810\uc740 \\nServer\uce21\uc5d0\uc11c \ub80c\ub354\ub9c1 \ud55c\ub2e4\ub294 \uac83\uc740 \uacb0\uad6d \uad00\ub9ac\ud574\uc57c\ud558\ub294 \uc11c\ubc84\uac00 \uc788\ub2e4\ub294 \uac83\uc774\uace0 \uace7 \\n\ubaa8\ub2c8\ud130\ub9c1 \ud558\ub294\ub370 \ube44\uc6a9\uc774 \ub4e4\uace0 \ud2b8\ub798\ud53d\uc774 \ubab0\ub9b4 \uacbd\uc6b0\ub97c \ub300\ube44\ud574\uc57c\ud55c\ub2e4. \\n\ub610\ud55c Build \ubc0f \ubc30\ud3ec\uc2dc\uac04\uc774 \uc624\ub798\uac78\ub9b0\ub2e4\ub294 \ub2e8\uc810\ub3c4 \uc874\uc7ac.\\n\\n## Observability?\\n\\n\ucee8\ud37c\ub7f0\uc2a4\ub098 \uc790\ub8cc\ub4e4\uc744 \ucc3e\ub2e4\ubcf4\uba74 `Observability`\ub77c\ub294 \ub2e8\uc5b4\ub97c \uc2ec\uc2ec\uce58 \uc54a\uac8c \ubcfc \uc218 \uc788\ub2e4. \\n\ub3c4\ub300\uccb4 \ubb34\uc2a8 \ub73b\uc77c\uae4c \ubcf4\ub2e4\ubcf4\ub2c8 \ub098\uc5d0\uac8c\ub294 \uc774\uc0c1\uc801\uc73c\ub85c \ub2e4\uac00\uc654\ub294\ub370 \\n\uc774 \ub2e8\uc5b4\ub97c \ub9cc\ub4e0 \uc0ac\ub78c `Rudolf E Kalman`\uc740 \\"\uc2dc\uc2a4\ud15c\uc758 \ucd9c\ub825\uc73c\ub85c\ubd80\ud130 \uc2dc\uc2a4\ud15c\uc758 \uc0c1\ud0dc\ub97c \uc774\ud574\ud560 \uc218 \uc788\ub294 \ub2a5\ub825\\"\\n\uc774\ub77c\uace0 \ud55c\ub2e4 \uacb0\uad6d \uc774 \ub9d0\uc774 \ub85c\uae45\uc774\ub098 \ubaa8\ub2c8\ud130\ub9c1 \uc9c0\ud45c\ub97c \ud1b5\ud574 \uc6b0\ub9ac\uc758 App\uc758 \uc0c1\ud0dc\ub97c \uce21\uc815\ud558\uace0 \\n\ubc1c \ube60\ub978 \ub300\uc751\uc774 \uac00\ub2a5\ud55c \ub2a5\ub825\uc774\ub77c\uace0 \uc0dd\uac01\ud55c\ub2e4.\\n\\n\ud2b9\ud788\ub098 \uaddc\ubaa8\uac00 \ud070 \uae30\uc5c5\ub4e4\uc740 MSA\uac19\uc740 \uc544\ud0a4\ud14d\ucc98\ub97c \uc0ac\uc6a9\ud558\uace0 \uc694\uccad\uc774 \ubd84\uc0b0\ucc98\ub9ac\ub418\uc5b4 \\n\uc81c\ub300\ub85c \ub85c\uadf8\ub97c \ud655\uc778\ud558\uac70\ub098 \ubaa8\ub2c8\ud130\ub9c1\uc774 \ud798\ub4e4 \uc218 \uc788\ub2e4. \\n\uc774\uc0c1\uc801\uc73c\ub85c\ub294 \uc5d0\ub7ec\uac00 \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc744 \uafc8\uafb8\uae34 \ud558\uaca0\uc9c0\ub9cc \uc5d0\ub7ec\ub294 \uc788\uc744 \uc218 \ubc16\uc5d0 \uc5c6\uace0 \\n\uadf8\ub807\uae30\uc5d0 \ubc1c\ube60\ub978 \ub300\uc751\uc744 \uc704\ud574 \ucd5c\ub300\ud55c `Observability`\ub97c \ud5a5\uc0c1\uc2dc\ud0a4\uae30 \uc704\ud574 \ud798\uc4f0\ub294\uac83 \uac19\ub2e4.\\n\\n## Web Vitals\\n\\n\ub300\ud45c\uc801\uc73c\ub85c \ud504\ub860\ud2b8\uc5d4\ub4dc\uc758 \uc131\ub2a5\uc744 \uce21\uc815\ud560 \ub54c \uc2e0\uacbd \uc4f0\ub294 4\uac00\uc9c0\ub294\\n\\n- TTFB: \ube0c\ub77c\uc6b0\uc800\uac00 \uc11c\ubc84\ub85c\ubd80\ud130 \uccab\ubc88\uc9f8 \ubc14\uc774\ud2b8\ub97c \uc218\uc2e0\ud558\ub294 \uc18d\ub3c4(>500ms)\\n- LCP: \uac00\uc7a5 \ud070 \ucf58\ud150\uce20\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 \uadf8\ub824\uc9c0\uae30\uae4c\uc9c0\uc758 \uc18d\ub3c4(>2.5s)\\n- FCP: \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcfc \uc218 \uc788\ub294 \ucf58\ud150\uce20\uac00 \ucd5c\ucd08\ub85c \uadf8\ub824\uc9c0\uae30\uae4c\uc9c0\uc758 \uc18d\ub3c4(>1.8s)\\n- TTI: \ud398\uc774\uc9c0 \ub85c\ub529\uc774 \uc644\ub8cc\ub418\uace0 \uc0ac\uc6a9\uc790 \uc785\ub825\uc5d0 \uc751\ub2f5\ud558\uae30\uae4c\uc9c0\uc758 \uc18d\ub3c4(>100ms)\\n\\n\uc774 \uc678\uc5d0\ub3c4 \ub808\uc774\uc544\uc6c3 \uc2dc\ud504\ud2b8(CLS)\ub098 TTI\uc640 \uc720\uc0ac\ud55c FID\ub4f1\uc774 \uc788\ub2e4.\\n\\n\uc774\ub7f0 \uc9c0\ud45c\ub4e4\uc758 \uc790\uc138\ud55c \uc124\uba85\uc774\uc544\ub2cc \uc774\uc720\uc5d0 \ub300\ud574 \uc0dd\uac01\ud574\ubcf4\ub824 \ud558\ub294\ub370 \\n\uc704\uc640\uac19\uc740 \uc9c0\ud45c\ub4e4\uc744 \ud1b5\ud574 \uc131\ub2a5\uc744 \uce21\uc815/\ucd5c\uc801\ud654 \ud558\ub294 \uac83\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8 \uac1c\uc120\uc73c\ub85c \uc774\uc5b4\uc9c0\uace0 \\n\uafb8\uc900\ud55c \ubaa8\ub2c8\ud130\ub9c1\uc744 \ud1b5\ud574 \uc131\ub2a5\uc758 \uc800\ud558\ub97c \ub9c9\ub294\ub2e4\uace0 \uc0dd\uac01\ud55c\ub2e4 \ud639\uc740 \ud14c\uc2a4\ud2b8\ucf54\ub4dc \uc791\uc131\uc744 \ud1b5\ud574 \ub9c9\uac70\ub098?\\n\\n## \uc815\ub9ac\\n\\n\ub204\uad70\uac00 \ub098\uc5d0\uac8c \uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\ub780 \ubb50\uc5d0\uc694? \ub77c\uace0 \ubb3b\ub294\ub2e4\uba74 \\nFrontend\uc758 Observability\ub97c \uac00\ub2a5\ud55c \ucd5c\ub300\ub85c \ub04c\uc5b4\uc62c\ub9ac\ub294 \uac83\uacfc Metric\uac19\uc740 \ubcf4\uc870\uc9c0\ud45c\ub97c \ud65c\uc6a9\ud558\uc5ec \\nApp\uc758 \uc131\ub2a5\uc744 \uce21\uc815\ud558\uace0 \ucd5c\uc801\ud654,\uc815\ud655\uc131\uc744 \ud14c\uc2a4\ud2b8\ud558\uc5ec \uc6f9\uc0ac\uc774\ud2b8\uc758 \ub2e4\uc591\ud55c \uce21\uba74\ub4e4\uc744 \uc6d0\ud65c\ud558\uac8c \\n\ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uac1c\uc120\ud558\uace0 \uc5d0\ub7ec\ub97c \uac10\uc9c0\ud558\uc5ec \uc2e0\uc18d\ud558\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\ub294 \ubaa8\ub2c8\ud130\ub9c1 \ud658\uacbd\uc744 \uad6c\uc131\ud558\ub294 \uac83\\n\uc774\uc0c1\uc801\uc73c\ub85c\ub294 \uc5d0\ub7ec\uac00 \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc774 \uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\uc5d0 \uadfc\uc811\ud558\uc9c0 \uc54a\uc744\uae4c \ub77c\uace0 \ub300\ub2f5\ud560\uac83\uac19\ub2e4.\\n\\n### \ucc38\uace0\\n\\n- [SSR\uc758 \uae30\uc068\uacfc \uc2ac\ud514: \ub80c\ub354\ub9c1\uc758 \ubcc0\ud654\uc758 \ud750\ub984\uc744 \ud1b5\ud574 \uc54c\uc544\ubcf4\ub294 SSR\uacfc Streaming SSR | \uc778\ud504\ucf582023](https://www.youtube.com/watch?v=hPyyFu3lrEg&list=PLpkj8RKr48waFtrqvJjbNrpGCvdxyX8Nx&index=30)\\n- [[Dev Dive\\\\_ Frontend Day] \uc2a4\ud2b8\ub9ac\ubc0d SSR \ub525 \ub2e4\uc774\ube0c](https://www.youtube.com/watch?v=9xl9X2pfHeI&t=1934s)\\n- [\ud1a0\uc2a4\u3163SLASH 23 - \ubd84\uc0b0 \ucd94\uc801 \uccb4\uacc4 & \ub85c\uadf8 \uc911\uc2ec\uc73c\ub85c Observability \ud655\ubcf4\ud558\uae30](https://www.youtube.com/watch?v=Ifz0LsfAG94&list=PL1DJtS1Hv1PiGXmgruP1_gM2TSvQiOsFL&index=23)\\n- [\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uac1c\ubc1c\uc790\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c: \ub9e4\uc77c \ud558\ub8e8\ub97c \uc544\ub07c\ub294 DevOps \uc774\uc57c\uae30](https://www.youtube.com/watch?v=2IE68SDTYvI)"}]}')}}]); \ No newline at end of file diff --git a/assets/js/b2f554cd.f5fdfaf2.js b/assets/js/b2f554cd.f5fdfaf2.js new file mode 100644 index 0000000..b2c6dc4 --- /dev/null +++ b/assets/js/b2f554cd.f5fdfaf2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[6880],{8256:n=>{n.exports=JSON.parse('{"blogPosts":[{"id":"frontend-environment","metadata":{"permalink":"/blog/frontend-environment","editUrl":"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-07-19-frontend/index.md","source":"@site/blog/2024-07-19-frontend/index.md","title":"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend","description":"\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574","date":"2024-07-19T00:00:00.000Z","formattedDate":"July 19, 2024","tags":[{"label":"frontend","permalink":"/blog/tags/frontend"},{"label":"environment","permalink":"/blog/tags/environment"},{"label":"dependencies","permalink":"/blog/tags/dependencies"},{"label":"transplier","permalink":"/blog/tags/transplier"},{"label":"git","permalink":"/blog/tags/git"}],"readingTime":14.845,"hasTruncateMarker":false,"authors":[{"name":"WooSeok","url":"https://github.com/WanderedToLa","imageURL":"https://avatars.githubusercontent.com/u/87642287?v=4","key":"WanderedToLa"}],"frontMatter":{"slug":"frontend-environment","title":"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend","authors":["WanderedToLa"],"tags":["frontend","environment","dependencies","transplier","git"]},"unlisted":false,"nextItem":{"title":"docusaurus custom plugin \ub9cc\ub4e4\uae30","permalink":"/blog/docusaurus-plugin"}},"content":"\uc5bc\ub9c8\uc804 \ud1a0\uc2a4\uacfc\uc81c\ub97c \uc9c4\ud589\ud558\uba70 \uc54c\uac8c\ub41c \uc810\ub4e4\uc740 \ub9e4\ub044\ub7ec\uc6b4 \uc0ac\uc6a9\uc790\uacbd\ud5d8 \ubc0f \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \uc704\ud574 \\nfrontend \ub85c\uc9c1\ubfd0 \uc544\ub2c8\ub77c \ubcf4\uc774\uc9c0 \uc54a\ub294 \ud658\uacbd\uc124\uc815\uc5d0\ub3c4 \uc5c4\uccad\ub09c \ub178\ub825\uc744 \ud558\uace0\uc788\uc74c\uc744 \uc54c\uac8c\ub418\uc5c8\ub2e4. \\n\uc774\uc804\uc5d0 \uac1c\ubc1c\uc744 \ud558\uba70 \uc54c\uace0\ub294 \uc788\uc9c0\ub9cc \uc790\uc138\ud558\uac8c \ubab0\ub790\ub358 \ubd80\ubd84\uacfc \uadf8\ub4e4\uc758 \ub514\ud14c\uc77c\uc5d0 \\n\ub180\ub77c\uc6cc\ud558\uba70 \uba74\uc811\uc900\ube44\ub97c \ud588\ub294\ub370 \uc774 \uae00\uc5d0\uc11c\ub294 \uc774 \uacfc\uc815\uc5d0\uc11c \uc54c\uac8c\ub41c \uc0ac\uc2e4\ub4e4\uc744 \uc815\ub9ac\ud55c\ub2e4.\\n\\n:::important \ucc38\uace0\\nYoutube \ubc0f toss tech blog\ub97c \ucc38\uace0\ud558\uc5ec \uc791\uc131\ud55c \uae00 \uc785\ub2c8\ub2e4.\\n:::\\n\\n## dependencies in Package.json\\n\\n\uc6b0\ub9ac\uac00 \uac1c\ubc1c\uc744\ud558\uba70 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub97c \ud1b5\ud574 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud560 \ub54c\ub294\\n`package.json` \ub0b4\uc758 `dependencies` \ud544\ub4dc\ub97c \ud1b5\ud574 \uc758\uc874\uc131\uc744 \uaddc\uc815\ud558\ub294\uac83\uc73c\ub85c \uc124\uce58\ud55c\ub2e4\\n\uc774\ub54c \ud574\ub2f9 \ud328\ud0a4\uc9c0\uc758 \uc774\ub984\uacfc \ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud55c \uac1d\uccb4\ub97c \ud1b5\ud574 \uc124\uce58\ud558\ub294\ub370\\n\ubc84\uc804\uc758 \ubc94\uc704\ub294 \ud558\ub098 \ud639\uc740 \uc5ec\ub7ec\uac1c\uc758 \uacf5\ubc31\uc73c\ub85c \ubd84\ub9ac\ub41c \ubb38\uc790\uc5f4\uc774\ub2e4. \\n\ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud558\ub294 \uc790\uc138\ud55c \ubc29\ubc95\uc740 [semver](https://docs.npmjs.com/misc/semver)\ub97c \ucc38\uace0\\n\\n\ub9cc\uc57d \uac1c\ubc1c\uc911\uc5d0\ub9cc \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc77c \uacbd\uc6b0 `devDependencies`\ud544\ub4dc\ub97c \ud65c\uc6a9\ud558\uba70\\n\\n```bash\\nnpm install some-package --save-dev\\n```\\n\\n\uc704\uc640 \uac19\uc740 \uba85\ub839\uc5b4\ub85c \uc124\uce58 \uac00\ub2a5\ud558\uace0 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58 \ud6c4 `devDependencies`\uc5d0 \ucd94\uac00\ud55c\ub2e4. \\n\uc5ec\uae30\uc11c \ub9cc\uc57d \ub0b4\uac00 clone\ub41c repository\uc5d0\uc11c `npm install`\ud588\uc744 \uacbd\uc6b0 npm\uc740 \uc774\ub97c \ud504\ub85c\uc81d\ud2b8\ub97c \\n\uac1c\ubc1c\uc911\uc774\ub77c\uace0 \uc778\uc2dd\ud558\uace0 `devDependencies`\uc5d0 \ucd94\uac00\ud558\ub2c8 \uc720\uc758\ud560 \uac83.\\n\\n\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ubcf8\uc778\ub9cc\uc758 plugin\uc744 \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294 `peerDependencies`\uc778\ub370 \\n\uc815\uc758\uc5d0 \ub530\ub974\uba74 \uc0c1\uc18d\ub418\ub294 \uc758\uc874\uc131\uc73c\ub85c \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\ub294 \uacf3\uc5d0\uc11c \uc81c\uacf5\ud574\uc57c\ud558\ub294 \uc758\uc874\uc131\uc774\ub2e4. \\n\ub9cc\uc57d \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc5d0\uc11c \ud328\ud0a4\uc9c0\ub97c `peerDependencies`\ub85c \uba85\uc2dc\ud560 \uacbd\uc6b0 \ud328\ud0a4\uc9c0\ub97c \uc81c\uacf5\ud558\ub294 \ucc45\uc784\uc744 \\n\uac00\uc7a5 \uc0c1\uc704\ud504\ub85c\uc81d\ud2b8\ub85c \ubc14\uafb8\uae30 \ub54c\ubb38\uc5d0 \ubc88\ub4e4\ub9c1 \uacb0\uacfc\uc5d0\uc11c \uc911\ubcf5\uc744 \ub9c9\uc744 \uc218 \uc788\ub2e4.\\n\\n\ud558\uc9c0\ub9cc \uc774\ub7ec\ud55c \uc7a5\uc810\uc5d0\ub3c4 \uce58\uba85\uc801\uc778 \ub2e8\uc810\uc740 \uc758\uc874\uc131 \uc804\ud30c\ubb38\uc81c\uc774\ub2e4.\\n\\n```json\\npackage A:\\n peerDependencies:\\n \\"package P\\"\\npackage B:\\n dependencies:\\n \\"package A\\"\\n peerDependencies:\\n \\"package P\\"\\npackage C\\n dependencies:\\n \\"package B\\"\\n peerDependencies:\\n \\"package P\\"\\n```\\n\\n\uc704\uc640 \uac19\uc774 peerDependency\ub97c \uc0ac\uc6a9\ud558\ub294 `package A`\uc5d0\uc11c A\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubaa8\ub4e0 \ud328\ud0a4\uc9c0\ub4e4\uc740\\nA\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c\uc5d0\ub3c4 peerDependencies\uc5d0 \ucd94\uac00\ud574\uc8fc\uc5b4\uc57c \ud558\uba70 \uc774\ub294 \uc758\uc874\uc131\uc758 \uad00\ub9ac\ubcf5\uc7a1\ub3c4\ub97c \uc99d\uac00\uc2dc\ucf1c \\n\uc5d0\ub7ec\uc758 \ud655\ub960\uc744 \ub192\uc778\ub2e4 npm\uacfc \uac19\uc740 \ud328\ud0a4\uc9c0\ub9e4\ub2c8\uc800\ub4e4\uc5d0\uc11c \uc774\ub7ec\ud55c \uc624\ub958\ub4e4\uc744 \uc5c4\ubc00\ud788 \uac80\uc0ac\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0\\n\uc720\uc758\ud574\uc57c \ud558\uba70 \ub530\ub77c\uc11c `peerDependencies`\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0 \\n\ub2e8 \ud558\ub098\uc758 \ud328\ud0a4\uc9c0\ub9cc \uc874\uc7ac\ud574\uc57c \ud558\ub294\uacbd\uc6b0(\uc2f1\uae00\ud1a4) \uc77c\ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.\\n\\n### dependencies\uc758 \ubb38\uc81c\uc810\\n\\n\uc704\uc640 \uac19\uc740 \ubb38\uc81c\ub9d0\uace0\ub3c4 `npm/node_modules`\uc758 \ubb38\uc81c\ub294 **\uc720\ub839\uc758\uc874\uc131(Phantom Dependency)** \ud604\uc0c1\uc774\ub2e4 \\nnode_modules\ub97c \uc0ac\uc6a9\ud558\ub294 yarn v1 \ubc0f npm\uc5d0\uc11c\ub294 \uc911\ubcf5\ud574\uc11c \uc124\uce58\ud558\ub294 \ubaa8\ub4c8\uc744 \ud53c\ud558\uae30 \uc704\ud574 \\n\ud638\uc774\uc2a4\ud305 \uae30\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4\\n\\n![Hoisting Tree](../../static/img/hoisting-tree.png)\\n\\n\uc67c\ucabd\uacfc \uac19\uc740 \uc758\uc874\uc131\ud2b8\ub9ac\uc77c \uacbd\uc6b0 \ub514\uc2a4\ud06c\uacf5\uac04\uc758 \uc808\uc57d\uc744 \uc704\ud574 \uc911\ubcf5\ub418\ub294 \ud2b8\ub9ac\ub97c \uc9c0\uc6b0\ub294 \uacfc\uc815\uc5d0\uc11c \\n\uc9c1\uc811 \uc758\uc874\ud558\uace0 \uc788\uc9c0 \uc54a\uc558\ub358 `B(1.0)` \ud328\ud0a4\uc9c0\ub97c \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \\npackage.json \uc5d0 \uba85\uc2dc\ud558\uc9c0 \uc54a\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ud604\uc0c1\uc744 Phantom Dependency\ub77c\uace0 \ud558\uba70 \\n\uc774\ub7ec\ud55c \ud2b9\uc131\uc740 \uc2dc\uc2a4\ud15c\uc744 \ud63c\ub780\uc2a4\ub7fd\uac8c \ud558\uace0 \ucd5c\uc545\uc758 \uacbd\uc6b0 Runtime Error\uc758 \uac00\ub2a5\uc131\uc744 \ub192\ud78c\ub2e4.\\n\\n\ud1a0\uc2a4\ud300\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 `Yarn Berry + PnP`\ub97c \ub3c4\uc785\ud558\uba70 \ud574\uacb0\ud588\ub2e4. \\nYarn Berry\ub294 `Plug\'n\'Play` \uc804\ub7b5\uc744 \uc774\uc6a9\ud558\uc5ec \uae30\uc874\uc758 Package.json\uc744 \uae30\ubc18\uc73c\ub85c \uc758\uc874\uc131 \ud2b8\ub9ac\ub97c \\n\ub9cc\ub4e4\uc5b4 node_modules \uad6c\uc870\ub97c \uc0dd\uc131\ud558\ub358 \ubc29\uc2dd\uc5d0\uc11c \uc758\uc874\uc131 \uc124\uce58\uc2dc node_modules\ub97c \uc0dd\uc131\ud558\uc9c0 \uc54a\uace0 \\n`.yarn/cache`\ud3f4\ub354\uc5d0 \uc758\uc874\uc131 \uc815\ubcf4\ub97c \uc800\uc7a5\ud55c\ub2e4 \ub610\ud55c `.pnp.cjs` \ud30c\uc77c\uc5d0 \uc758\uc874\uc131\uc744 \ucc3e\uc744 \uc218 \uc788\ub294 \\n\uc815\ubcf4\ub97c \uae30\ub85d\ud558\uc5ec \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0 \uad00\ub9ac\ub97c \ud560 \uc218 \uc788\ub2e4.\\n\\nyarn\uc740 \uae30\uc874 node.js\uc758 `require`\ud568\uc218\ub97c \ub36e\uc5b4\uc50c\uc6cc \ub3d9\uc791\ud558\uba70 \ud6a8\uc728\uc801\uc778 \ud328\ud0a4\uc9c0\uad00\ub9ac\ub97c \\n\ud560 \uc218 \uc788\uace0 \uc774\ub54c\ubb38\uc5d0 \ud2b9\uc815 \ud328\ud0a4\uc9c0\uc640 \uc758\uc874\uc131\uc5d0 \ub300\ud55c \uc815\ubcf4\uac00 \ud544\uc694\ud560 \ub54c \ubc14\ub85c \uc54c \uc218 \uc788\ub2e4 \\n\ub610\ud55c Yarn PnP \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uac01 \uc758\uc874\uc131\uc740 Zip \uc544\uce74\uc774\ube0c\ub85c \uad00\ub9ac\ud558\uac8c \ub418\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \uc7a5\uc810\uc774 \uc0dd\uae34\ub2e4\\n\\n1. node_modules\uac00 \uc5c6\uc74c -> \ube60\ub978 \uc124\uce58 \uac00\ub2a5\\n2. \ud328\ud0a4\uc9c0\ub4e4\uc740 \ud558\ub098\uc758 Zip\uc544\uce74\uc774\ube0c\ub85c \uc800\uc7a5\ud558\uc5ec \uc911\ubcf5\ubc29\uc9c0\\n3. \ud30c\uc77c\uc758 \uc218\uac00 \uc801\uc5b4\uc9c0\uba70 \ubcc0\uacbd\uc0ac\ud56d\uc758 \uac10\uc9c0\uac00 \uc26c\uc6cc\uc9c0\uace0 \uc0ad\uc81c\uac00 \ube60\ub974\ub2e4.\\n\\n### Zero Install\\n\\n\uc5ec\uae30\uc11c \ud55c\ubc1c \ub354 \ub098\uc544\uac00 \uc758\uc874\uc131\uc744 Git\uc73c\ub85c \uad00\ub9ac\ud55c\ub2e4\uba74 \uc5b4\ub5a8\uae4c? \\n\uc77c\ubc18\uc801\uc778 node_modules\uc758 \ud06c\uae30\ub294 1.2GB/13\ub9cc5\ucc9c\uac1c\uc758 \ud30c\uc77c\uc744 \uac00\uc9c0\uace0 \uc788\uc9c0\ub9cc yarn\uc744 \uc0ac\uc6a9\ud55c\ub2e4\uba74 \\n139MB/2\ucc9c\uac1c\uc758 \uc555\ucd95\ud30c\uc77c\ub85c \uc904\uc5b4\ub4e0\ub2e4 \uc774\ub807\uac8c \uc904\uc5b4\ub4e0 \ud30c\uc77c\ud06c\uae30\ub294 Git\uc73c\ub85c \uad00\ub9ac\ud558\uc5ec \ubc84\uc804\uad00\ub9ac\uc5d0 \\n\ud3ec\ud568\uc2dc\ud0a4\uace0 \uc124\uce58\ud560\uac8c \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc744 \uad6c\uc131\ud55c\ub2e4.(Zero-Install)\\n\\n\ud1a0\uc2a4\ud300\uc5d0\uc11c Zero-Install\uc744 \uc0ac\uc6a9\ud558\uba70 \uc5bb\uc740 \uc7a5\uc810 \ub450 \uac00\uc9c0\\n\\n1. clone \ud639\uc740 branch\ubcc0\uacbd\uc2dc yarn install \uc2e4\ud589x\\n\\n - \ub9cc\uc57d \ub2e4\ub978 \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294 \ube0c\ub79c\uce58\ub85c \uc774\ub3d9\ud55c\ub2e4\uba74 \uc7ac\uc124\uce58\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4.\\n\\n2. CI\ub3d9\uc791\uc2dc \uc758\uc874\uc131 \uc124\uce58\uc2dc\uac04 \uc808\uc57d\\n\\n - cache miss \uc77c\uacbd\uc6b0 60 ~ 90\ucd08 \uac00\ub7c9 \uc18c\uc694\ub418\ub358 \uc2dc\uac04\uc744 \uc758\uc874\uc131 \ubcf5\uc81c\ub9cc\uc73c\ub85c \\n \ubc14\ub85c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\uc5ec \uc2dc\uac04\uc808\uc57d\\n\\n## Bundler\\n\\njavascript\uc5d0 \ubaa8\ub4c8\uc774\ub77c\ub294 \uac1c\ub150\uc774 \uc5c6\ub358\uc2dc\uc808 \uaddc\ubaa8\uac00 \ud070 \ud504\ub85c\uadf8\ub7a8\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ucabc\uac1c\uc11c \uc791\uc5c5\ud588\uc9c0\ub9cc \\n\uc2a4\ud06c\ub9bd\ud2b8 \ud0dc\uadf8\ub97c \ud1b5\ud55c \uc804\uc5ed\ubcc0\uc218 \ucc38\uc870\ub97c \ud588\uae30\ub54c\ubb38\uc5d0 \ud568\uc218\ub098 \ubcc0\uc218\uc758 \uc774\ub984 \ucda9\ub3cc \ubb38\uc81c\ub97c \uc77c\uc73c\ud0a4\uace0 \\n\uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \uc2a4\ud06c\ub9bd\ud2b8 \ub85c\ub4dc\uc2dc\uac04\uc774 \uc99d\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc5d0 \uc548\uc88b\uc740 \uc601\ud5a5\uc744 \ub07c\ucce4\ub2e4.\\n\\n\uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \ud30c\uc77c\uc744 \ud558\ub098\ub85c \ud569\uce58\ub294 **\ubc88\ub4e4\ub9c1(Bundling)** \uc774\ub77c\ub294 \uac1c\ub150\uc774 \ud0c4\uc0dd\ud558\uace0 \\nCommonJS\uc758 `require`\ud568\uc218\uac00 \ub4f1\uc7a5\ud558\uba70 \uc774 \uc2dc\uc810\ubd80\ud130 \ud30c\uc77c\ub2e8\uc704\uc758 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud574\uc9c0\uace0 \uc218\ucc9c\uac1c\uc758 \\nJS\ud30c\uc77c\ub85c \ubd84\ub9ac\ud558\uba70 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc26c\uc6b4 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ud1b5\ud574 \ub354 \ub098\uc740 \uac1c\ubc1c\uacbd\ud5d8\uc744 \uc81c\uacf5\ud588\ub2e4.\\n\\n\ubaa8\ub4c8\uc758 \ud0c4\uc0dd\uacfc \ud568\uaed8 \uc0dd\uaca8\ub09c \ubc88\ub4e4\ub7ec\ub294 `CommonJS`\uc774\ud6c4\uc5d0\ub3c4 \uc0dd\uaca8\ub09c \ubaa8\ub4c8\uc5d0 \uc758\ud574 \uc124\uacc4\uc758 \uc601\ud5a5\uc744 \ubbf8\ucce4\uace0 \\n\uc9c0\uae08 \uc774\uc2dc\uc810\uc5d0\ub3c4 \uad49\uc7a5\ud788 \ub2e4\uc591\ud55c \ubc88\ub4e4\ub7ec\ub4e4\uc774 \uc788\uc9c0\ub9cc \ubc88\ub4e4\ub7ec\uc758 \ub3d9\uc791\uc740 \ud06c\uac8c \uc138 \uac00\uc9c0\ub85c \uad6c\ubd84\ud55c\ub2e4.\\n\\n1. Resolution\\n2. Load\\n3. Optimization\\n\\n### Resolution\\n\\nresolution\ub2e8\uacc4\uc5d0\uc11c\ub294 import/require\ub418\ub294 \ud30c\uc77c\uc758 \uc704\uce58\ub97c \uc815\ud655\ud558\uac8c \ucc3e\ub294\uc5ed\ud560\\n\\n```tsx\\nimport { App } from \'./App\';\\n```\\n\\nApp\uc744 import \ud558\ub294\uacbd\uc6b0 `./App`\uc758 \uc815\ud655\ud55c \uacbd\ub85c\ub97c \ud0d0\uc0c9\ud55c\ub2e4 (App.js, App.ts, App.tsx) \\n\ubc88\ub4e4\ub7ec\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \uc124\uc815\uc744 \uae30\ubcf8\uc81c\uacf5\ud558\uace0 \ud544\uc694\uc5d0\ub530\ub77c \ucee4\uc2a4\ud140\uac00\ub2a5. \\n\uc774\ub807\uac8c \uc815\ud655\ud55c\uacbd\ub85c\ub97c \ud0d0\uc0c9\ud558\uc5ec \uc5b4\ub5a4\ud30c\uc77c\ub4e4\uc744 \ud569\uccd0\uc57c \ucd5c\uc885\uacb0\uacfc\ubb3c\uc774 \ub418\ub294\uc9c0 \uc54c \uc218 \uc788\ub2e4.\\n\\n### Load\\n\\nLoad\ub2e8\uacc4\uc5d0\uc11c\ub294 \ud45c\uc900 Javascript\ub85c \ubcc0\ud658\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \ud604\ub300\uc758 \uc6f9 \uac1c\ubc1c\uc740 \\nHTML,CSS,Javascript\ub85c\ub9cc \uac1c\ubc1c\ud558\uae30\uc5d4 \uc5b4\ub824\uc6c0\uc774 \uc788\uace0 \uc774\ub97c \ubcf4\uc644\ud558\uace0\uc790 \uc288\ud37c\uc14b \uc5b8\uc5b4\ub4e4\uc774 \ub4f1\uc7a5\ud558\uc600\ub2e4. \\n\uc774\uc5d0 \ub530\ub77c \ub300\ud45c\uc801\uc73c\ub85c Typescript\uc640 \uac19\uc740\uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uae30\uc704\ud574 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\uac00 \ub4f1\uc7a5\ud558\uba70 \\n\ubc88\ub4e4\ub9c1\uacfc\uc815\uc5d0\uc11c `Babel/SWC`\uac19\uc740 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub97c \uc218\uc6a9\ud558\uc5ec \ud45c\uc900Javascript \uc774\uc678\uc5d0\ub3c4 \uc0ac\uc6a9\uac00\ub2a5\ud55c \\n\ud615\ud0dc\ub85c \ubc1c\uc804\ud574 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub9c1 \uacfc\uc815\uc744 \uac70\uce58\ub294\uac83\uc774 Load\ub2e8\uacc4\uc5d0 \ud574\ub2f9\ud568.\\n\\n\uc5ec\uae30\uc11c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub7ec\ub294 \ud55c \uc5b8\uc5b4\ub97c \ucd94\uc0c1\ud654\ub2e8\uacc4\uac00 \ube44\uc2b7\ud55c \uc5b8\uc5b4\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uc5ed\ud560\uc744\ud558\uc9c0\ub9cc \\n\uc5b8\uc5b4 \uc804\uccb4\uc801\uc73c\ub85c \ud2b8\ub79c\uc2a4\ud30c\uc77c\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4. \ubb38\ubc95\uc758 \ubb38\uc81c\uac00 \uc544\ub2cc \uc5b8\uc5b4\uc758 \ud45c\uc900\uc774 \ubcc0\uacbd\ub418\uac70\ub098 \\n\uc0c8\ub85c\ucd94\uac00\ub418\ub294 \ud568\uc218\uc758 \uacbd\uc6b0 `\ud3f4\ub9ac\ud544(polyfill)`\uacfc\uc815\uc744 \uac70\uccd0\uc57c\ud55c\ub2e4 \uad6c\ud604\uc774 \ub204\ub77d\ub41c \\n\uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \uba54\uafd4\uc8fc\ub294(fill in) \uc5ed\ud560\uc744 \ud558\uba70 \uae30\ub2a5\uc774\ub098 \uc0ac\uc6a9\uc790\uc758 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub530\ub77c \\n\ub2e4\uc591\ud558\uac8c \uc124\uc815\ud560 \uc218 \uc788\ub2e4.\\n\\n### Optimization\\n\\nResolution/Load \ub2e8\uacc4\ub97c \uac70\uccd0 \uc644\uc804\ud55c JS\ud30c\uc77c \ud558\ub098\ub97c \uc0dd\uc131\ud588\ub2e4\uba74 \ub2e4\uc591\ud55c \uc758\uc874\uc131\uc744 \uc0ac\uc6a9\ud558\ub294 \\nJS\ud30c\uc77c\uc758 \ud06c\uae30\ub294 \ub108\ubb34 \ud06c\uae30 \ub54c\ubb38\uc5d0 \uc131\ub2a5\uc800\ud558\ub97c \uc720\ubc1c\ud560 \uc218 \uc788\ub2e4 \ub530\ub77c\uc11c \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc774\uae30\uc704\ud574 \\n\ub450 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud568\\n\\n1. Minification (Compression + Mangling)\\n2. Tree Shaking\\n\\n**1-1. Minification - Compression \ucf54\ub4dc\uc758 text\ub97c \ucd5c\ub300\ud55c \uc555\ucd95**\\n\\n- undefined -> void 0\\n- 2 + 3 -> 5\\n- !a && !b -> !(a || b)\\n- Infinity -> 1/0\\n\\n**1-2. Minification - Mangling \ubcc0\uc218,Class,\ud30c\uc77c\uc774\ub984 \ucd5c\uc801\ud654**\\n\\n```javascript\\n// function add(num1, num2) { return num1 + num2 }\\nfunction add(l, r) {\\n return l + r;\\n}\\n```\\n\\n**2. Tree Shaking \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc \uc81c\uac70**\\n\\nTree Shaking \ub2e8\uacc4\uc5d0\uc11c\ub294 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\ub97c \ubd84\uc11d\ud558\uace0 \uc81c\uac70\ud558\ub294 \uc5ed\ud560\uc744 \ud558\ub294\ub370 \\n\uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\uac00 \ubb34\uc5c7\uc778\uc9c0 \ud310\ubcc4\ud558\ub294 \uc77c\uc740 \uae4c\ub2e4\ub85c\uc6b4 \ud3b8\uc5d0 \uc18d\ud55c\ub2e4(\uc815\uc801\ubd84\uc11d\uc758 \uc5b4\ub824\uc6c0) \\n\ub530\ub77c\uc11c \ubc88\ub4e4\ub7ec\ubcc4\ub85c \uc54c\uace0\ub9ac\uc998 \ubc0f \uc811\uadfc\ubc29\uc2dd\uc774 \ucc9c\ucc28\ub9cc\ubcc4\uc774\ub77c \ud070 \ucc28\uc774\uac00 \uc788\ub294 \uc0ac\ud56d\uc774\uae30\ub3c4 \ud558\ub2e4.\\n\\n\ud1a0\uc2a4\uc5d0\uc11c\ub294 \uc704\uc640 \uac19\uc740 \ubc88\ub4e4\ub7ec\uc758 \ud2b9\uc131\uc744 \ud65c\uc6a9\ud574 React Native\uc758 Metro \uc5d0\uc11c \\nESbuild\ub85c \uc62e\uae30\uba70 \ube4c\ub4dc\uc18d\ub3c4\ub97c \ucd5c\uc801\ud654 \ud588\ub358 \uc0ac\ub840\ub97c \uc18c\uac1c\ud588\ub2e4.\\n\\n## Git \ubd84\uc11d \ubc0f \ud65c\uc6a9\\n\\nVCS\uc911 \ud558\ub098\uc778 Git\uc740 **\ub378\ud0c0\uae30\ubc18 \ubc84\uc804\uad00\ub9ac \uc2dc\uc2a4\ud15c**\uc73c\ub85c \ud30c\uc77c\uc758 \ubcc0\ud654\ub97c \uc2dc\uac04\uc21c\uc73c\ub85c \uad00\ub9ac\ud574 \\n\ud504\ub85c\uc81d\ud2b8\uc758 \uc2a4\ub0c5\uc0f7\uc744 \uc800\uc7a5\ud558\uace0 \ud30c\uc77c\uac04 \ubcc0\uacbd\uc0ac\ud56d\uc744 `\ucc28\uc774(diff)`/`\ub378\ud0c0(delta)` \ud615\ud0dc\ub85c \\n\uc800\uc7a5\ud558\uace0 \ud30c\uc77c\uc744 \uc138 \uac00\uc9c0 \uc0c1\ud0dc\uc778 `Committed`, `Modified`, `Staged` \uad00\ub9ac\ud558\uba70 \\n\uc774 \uc138 \uac00\uc9c0\uc758 \uc0c1\ud0dc\ub294 \ud504\ub85c\uc81d\ud2b8\uc758 \uc138 \uac00\uc9c0 \uc0c1\ud0dc\uc640 \uc5f0\uad00\ub418\uc5b4 \uc788\uace0 \ub2e4\uc74c\uacfc \uac19\ub2e4.\\n\\n1. Working Directory - \uc2e4\uc81c \uc791\uc5c5\uacf5\uac04\\n2. Staging Area - \ubcc0\uacbd\ub41c \ud30c\uc77c\ub4e4\uc758 \ub300\uae30\uacf5\uac04\\n3. Repository(.git directory) - \ucd5c\uc885\uc801\uc73c\ub85c \uc800\uc7a5\ub41c \ud30c\uc77c\ub4e4\uc758 \uacf5\uac04\\n\\nGit\uc740 \uc548\uc804\ud558\uace0 \uc77c\uad00\ub41c \ud30c\uc77c\uad00\ub9ac\ub97c \uc704\ud574 `sha-1` \ud574\uc2dc\uc54c\uace0\ub9ac\uc998\uc73c\ub85c 40\uc790\uae38\uc774\uc758 16\uc9c4\uc218 \ubb38\uc790\uc5f4\uc744 \\n\ub9cc\ub4e4\uace0 \ubaa8\ub4e0\uac83\uc744 \ud574\uc2dc\ub85c \uc2dd\ubcc4\ud558\uc5ec \ub370\uc774\ud130\uc758 \ubb34\uacb0\uc131\uc744 \ud655\uc778\ud55c\ub2e4.\\n\\n### Git basic\\n\\ngit\uc73c\ub85c \ubc84\uc804\uad00\ub9ac\ub97c \uc2dc\uc791\ud558\uae30 \uc704\ud574 \ubcf8\uc778\uc758 \uc791\uc5c5\ud3f4\ub354\uc5d0\uc11c `git init` \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uba74 \\n`.git`\ud3f4\ub354\uac00 \uc0dd\uc131\ub418\uace0 \uc774\uacf3\uc5d0 \ud30c\uc77c\ub4e4\uc758 \uc815\ubcf4\uac00 \uc800\uc7a5\ub41c\ub2e4. \\n\uc6b0\ub9ac\uac00 \uc2e4\uc81c\ub85c \uc791\uc5c5\ud558\ub294\uacf5\uac04(Working Directory)\uc758 \ud30c\uc77c\uc740 Tracked\uc640 Untracked\ub85c \ub098\ub204\uba70 \\nTracked\ud30c\uc77c\uc758 \uacbd\uc6b0 \uc2a4\ub0c5\uc0f7\uc5d0 \ud3ec\ud568\ub3fc \uc788\ub358 \ud30c\uc77c\ub85c `Unmodified`, `Modified`, `Staged` \uc0c1\ud0dc\uc911 \\n\ud558\ub098\uc774\ub2e4.\\n\\n![git-status](../../static/img/git-status.png)\\n\\n![git-add](../../static/img/git-add.png)\\n\\n## \ucc38\uace0\\n\\n- [package.json \ubc88\uc5ed](https://programmingsummaries.tistory.com/385)\\n- [node_modules\ub85c\ubd80\ud130 \uc6b0\ub9ac\ub97c \uad6c\uc6d0\ud574 \uc904 Yarn Berry](https://toss.tech/article/node-modules-and-yarn-berry)\\n- [FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?](https://www.youtube.com/watch?v=mee1QbvaO10&t=325s)\\n- [FECONF 2022 [B2] \uc77c\ubc31\uac1c \ud328\ud0a4\uc9c0 \ubaa8\ub178\ub808\ud3ec \uc6b0\uc544\ud558\uac8c \uc6b4\uc601\ud558\uae30](https://www.youtube.com/watch?v=Ix9gxqKOatY&t=114s)\\n- [FEConf 2023 [B4] React Native, Metro\ub97c \ub118\uc5b4\uc11c](https://www.youtube.com/watch?v=QfU5REp8sjQ&t=1253s)\\n- [\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uac1c\ubc1c\uc790\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c: \ub9e4\uc77c \ud558\ub8e8\ub97c \uc544\ub07c\ub294 DevOps \uc774\uc57c\uae30](https://www.youtube.com/watch?v=2IE68SDTYvI&list=PL1DJtS1Hv1PiGXmgruP1_gM2TSvQiOsFL&index=32)\\n- [\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uc720\uc800\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c : 100\ub144\uc744 \uc544\uaef4\uc900 SSR \uc774\uc57c\uae30](https://www.youtube.com/watch?v=IKyA8BKxpXc)\\n- [JavaScript \ubc88\ub4e4\ub7ec\uc758 \uc774\ud574](https://medium.com/naver-place-dev/javascript-%EB%B2%88%EB%93%A4%EB%9F%AC%EC%9D%98-%EC%9D%B4%ED%95%B4-1-javascript-%EB%AA%A8%EB%93%88-d68c7e438fcd)\\n- [Git \ub0b4\ubd80 \ub3d9\uc791 \ud30c\ud5e4\uce58\uae30](https://tech.wonderwall.kr/articles/git/)\\n- [\uc2dc\uc791\ud558\uae30 - Git \uae30\ucd08](https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EA%B8%B0%EC%B4%88)"},{"id":"docusaurus-plugin","metadata":{"permalink":"/blog/docusaurus-plugin","editUrl":"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-07-01-docusaurus-plugin/index.md","source":"@site/blog/2024-07-01-docusaurus-plugin/index.md","title":"docusaurus custom plugin \ub9cc\ub4e4\uae30","description":"Recent Posts","date":"2024-07-01T00:00:00.000Z","formattedDate":"July 1, 2024","tags":[{"label":"docusaurus","permalink":"/blog/tags/docusaurus"},{"label":"plugin","permalink":"/blog/tags/plugin"},{"label":"custom","permalink":"/blog/tags/custom"}],"readingTime":4.865,"hasTruncateMarker":false,"authors":[{"name":"WooSeok","url":"https://github.com/WanderedToLa","imageURL":"https://avatars.githubusercontent.com/u/87642287?v=4","key":"WanderedToLa"}],"frontMatter":{"slug":"docusaurus-plugin","title":"docusaurus custom plugin \ub9cc\ub4e4\uae30","authors":["WanderedToLa"],"tags":["docusaurus","plugin","custom"]},"unlisted":false,"prevItem":{"title":"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend","permalink":"/blog/frontend-environment"},"nextItem":{"title":"\uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\ub780?","permalink":"/blog/frontend-observability"}},"content":"## Recent Posts\\n\\n\uba54\uc778\ud398\uc774\uc9c0\uc5d0 recentpost \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub824\uace0 \ubbf8\ub8e8\ub2e4\uac00 \ub4dc\ub514\uc5b4 \uc2dc\uc791\ud558\uba70 \\ndocusaurus\uc5d0\uc11c \uc9c1\uc811 \ud30c\uc77c\uc2dc\uc2a4\ud15c\uc5d0 \uc811\uadfc\ud558\ub824\uace0 \uba87\ubc88\uc744 \uc0bd\uc9c8\ud558\ub2e4\uac00 \\nplugin\uc744 \ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\ud574\uc57c\ud55c\ub2e4\ub294 \uacb0\ub860\uc744 \uc5bb\uc5c8\ub2e4. \\n\uc774\ubbf8 \ub9cc\ub4e4\uc5b4\uc9c4 blog \uad00\ub828 plugin\uc774 \uc788\uae34\ud588\uc9c0\ub9cc [plugin-content-blog](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog) \\nconfig \ud544\ub4dc\uc5d0\uc11c option\uc744\ud1b5\ud574 \uc218\uc815\ud558\ub294 \ubc29\uc2dd\uc740 \uc6d0\ud558\ub358 \ubaa8\uc591\uc774 \uc544\ub2c8\ub77c \ud328\uc2a4\ud588\uc74c.\\n\\n## Architecture\\n\\nArchive\ud0ed\uc5d0 \uc788\ub294 \uae00 \uc911 \ucd5c\uc2e0\uc21c\uc73c\ub85c 5\uac1c\ub9cc \uba54\uc778\ud398\uc774\uc9c0\uc5d0 \ubcf4\uc5ec\uc8fc\uace0 \uc2f6\uc5c8\ub294\ub370 \\n\uba54\uc778\ud398\uc774\uc9c0\uc5d0\uc11c \ube44\ub3d9\uae30\ub85c \ud30c\uc77c\uc2dc\uc2a4\ud15c\uc744 \ud638\ucd9c\ud574 \uc77d\uc740\ub2e4\uc74c slug\ub97c \ub9ac\ud134\ud558\ub294 \uc2dd\uc73c\ub85c \\n\uad6c\uc0c1\ud588\uc9c0\ub9cc docusaurus\uc758 \uc81c\uc791\uc758\ub3c4\ub791\uc740 \uc804\ud600 \ub2e4\ub974\uae30\ub54c\ubb38\uc5d0 \uc5d0\ub7ec\uac00 \uc0dd\uae38 \uc218 \ubc16\uc5d0\uc5c6\ub2e4. \\n\uce5c\uc808\ud558\uac8c\ub3c4 \uc544\ud0a4\ud14d\ucc98 \uc18c\uac1c\uae00\uc744 \ubcf4\uba70 \uac10\uc744 \uc7a1\uc744\uc218 \uc788\uc5c8\uc74c\\n\\ndocusaurus\uc758 \uc124\uacc4 \ud639\uc740 \uba58\ud0c8\ubaa8\ub378\uc774 \ucf54\ub4dc\ub97c \uc9c1\uc811 import\ud574\uc11c \uc4f0\uac70\ub098 \ud558\uc9c0\uc54a\uace0 \\njson\uc73c\ub85c \uc784\uc2dc\ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\uac70\ub098 \uc0ac\uc6a9\uc790\uac00 plugin\uc5d0 \uc811\uadfc\ud55c\ub2e4\uba74 \\n\uc624\ub85c\uc9c0 config.js\ub97c \ud1b5\ud574 \uc0c1\ud638\uc791\uc6a9 \ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uacc4\ub418\uc5b4 \uc788\uae30\ub54c\ubb38\uc5d0 \\n\uc5ec\uae30\uc11c \uc81c\uacf5\ud558\ub294 Lifecycle API\ub97c \uc774\uc6a9\ud574 build\uc2dc \uc0dd\uc131\ub41c json \ud30c\uc77c\ub85c \\n\ub0b4 \ube14\ub85c\uadf8 \ub370\uc774\ud130\uc5d0 \uc811\uadfc\ud574\uc57c \ud55c\ub2e4. \ub530\ub77c\uc11c \ub300\ubd80\ubd84\uc758 \ucee4\uc2a4\ud140\uc740 config\uc5d0\uc11c \uac00\ub2a5\ud568\\n\\n![Architecture](../../static/img/docusaurus-architecture.png)\\n\\n\uadf8\ub798\uc11c \ubb38\uc11c\ub97c \ucc3e\uc544\ubcf4\ub358\uc911 globalData\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 `useGlobalData` API\uac00 \\n\uc788\uae34\ud588\uc73c\ub098 docs\uc758 \uc815\ubcf4\ub9cc \ub2f4\uc544\uc904 \ubfd0 blog\uc758 \ub370\uc774\ud130\ub294 \ub2f4\uae30\uc9c0 \uc54a\uae38\ub798 Lifecycle API\ub97c \uc774\uc6a9\ud574 \\nbuild\uc2dc json\uc5d0 \ube14\ub85c\uadf8 \uc815\ubcf4\ub4e4\uc744 \ub2f4\uc544 \uc0ac\uc6a9\ud558\ub294 \ucabd\uc73c\ub85c \ubcc0\uacbd\ud588\ub2e4. \\nglobalData\uc758 \uc815\ubcf4\ub4e4\uc740 `npm start`\uc2dc `.docusaurus/globalData.json`\uc5d0\uc11c \ud655\uc778\uac00\ub2a5\\n\\n- [useGlobalData](https://docusaurus.io/docs/docusaurus-core#useGlobalData)\\n\\n## Using Plugins\\n\\nplugin\uc740 \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 \uc124\uce58\ud560 \uc218\ub3c4 \uc788\uc9c0\ub9cc \ub85c\uceec\ud30c\uc77c\uc744 \ubd88\ub7ec\uc640 \uc0ac\uc6a9\uac00\ub2a5\ud568\\n\\n```ts title=\\"docusaurus.config.js\\"\\nexport default {\\n // ...\\n plugins: [\'./src/plugins/docusaurus-local-plugin\'],\\n};\\n```\\n\\n\ub85c\uceec\ud30c\uc77c\uc744 \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0 \uc808\ub300\uacbd\ub85c\ub85c \uba85\uc2dc\ud55c\ub2e4.\\n\\n```ts title=\\"docusaurus.config.js\\"\\nexport default {\\n // ...\\n plugins: [\\n async function myPlugin(context, options) {\\n // ...\\n return {\\n name: \'my-plugin\',\\n async loadContent() {\\n // ...\\n },\\n async contentLoaded({ content, actions }) {\\n // ...\\n },\\n /* other lifecycle API */\\n };\\n },\\n ],\\n};\\n```\\n\\n\uc9c1\uc811 \ud568\uc218\ub97c \uc791\uc131\ud558\ub294 \ubc29\ubc95\ub3c4 \uac00\ub2a5\\n\\n\uc704\uc640\uac19\uc774 \uacbd\ub85c\ub97c \uc9c0\uc815\ud588\ub2e4\uba74 Docusaurus\uce21\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Lifecycle APIs\ub97c \\n\uc774\uc6a9\ud574 \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uba74 \ub41c\ub2e4.\\n\\n- [Lifecycle APIs](https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis)\\n\\nAPI\ub4e4\uc911 \uac00\uc7a5 \uc911\uc694\ud558\ub2e4\uace0 \ubcfc \uc218 \uc788\ub294 `async loadContent()`\uc640 \\n`async contentLoaded({content, actions})` \ub450 \uac00\uc9c0\uac00 \uc788\ub2e4 `loadContent`\uc5d0\uc11c \ud30c\uc77c\uc2dc\uc2a4\ud15c\uc5d0 \\n\uc811\uadfc\ud558\uac70\ub098 \ub2e4\uc591\ud55c \ub3d9\uc791\ub4e4\uc774 \uac00\ub2a5\ud558\uace0 `loadContent`\uc5d0\uc11c \ub0b4\uac00 \ud544\uc694\ud55c \uac12\uc744 return\ud55c\ub2e4\uba74 \\n\uadf8 \uac12\uc740`contentLoaded`\ud568\uc218\uc5d0\uc11c `content` \ud30c\ub77c\ubbf8\ud130\ub85c \ubc1b\ub294\ub2e4. `actions`\uc758 \uacbd\uc6b0 \\n\uae30\ubcf8\uc73c\ub85c \uc81c\uacf5\ud558\ub294 3\uac00\uc9c0 \ud568\uc218\ub4e4\uc774 \uc788\uace0 \uacbd\ub85c\ub97c \uc124\uc815\ud558\ub294 \uacbd\uc6b0 `appRoute` \\njson\ud30c\uc77c\uc744 \ub9cc\ub4e0\ub2e4\uba74 `createData` \ub098\uc758 \uacbd\uc6b0 \uae30\uc874 globalData.json\uc5d0 \ub370\uc774\ud130\ub97c\\n\ucd94\uac00\ud558\ub824\uace0 \ud588\uae30\uc5d0 \ub9c8\uc9c0\ub9c9\uc778 `setGlobalData`\ub97c \uc0ac\uc6a9\ud588\ub2e4.\\n\\n- loadContent - \ub2e4\uc591\ud55c \ub3d9\uc791\uc744 \uc815\uc758\ud558\ub294 \ud568\uc218 (\ud30c\uc77c\uc2dc\uc2a4\ud15c, API\ud638\ucd9c...)\\n- contentLoaded - content,actions\ub97c \ud30c\ub77c\ubbf8\ud130\ub85c \ubc1b\ub294 \ud568\uc218\\n - content: loadCotent\uc758 \ub9ac\ud134\uac12\\n - actions: appRoute, createData, setGlobalData\ub85c \uad6c\uc131\\n\\n```ts title=\\"./src/plugins/my-plugin.js\\"\\nexport default {\\n plugins: [\\n async function myPlugin(context, options) {\\n return {\\n name: \'my-plugin\',\\n async loadContent() {\\n return 1;\\n },\\n\\n // loadContent\uc758 return\uac12 content\uc5d0 \uc804\ub2ec\\n async contentLoaded({ content, actions }) {\\n const { setGlobalData } = actions;\\n setGlobalData({ myBlogData: content });\\n },\\n };\\n },\\n ],\\n};\\n```\\n\\n\uc704\ucc98\ub7fc \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uba74 `npm start`\uc2dc globalData\uc5d0 \ub370\uc774\ud130\uac00 \uc800\uc7a5\ub418\uace0 \\n\ub0b4\uac00 \uc6d0\ud558\ub294 \ubd80\ubd84\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub824\uba74 `useGlobalData` \ubc0f `usePluginData`\ub97c \uc0ac\uc6a9\ud574 \\n\ub370\uc774\ud130\ub97c \uac00\uc838\uc640 \uc0ac\uc6a9\ud558\uba74 \ub05d\\n\\n```tsx title=\\"./src/pages/index.tsx\\"\\nimport { usePluginData } from \'@docusaurus/useGlobalData\';\\n\\nexport default function Home() {\\n const { myBlogData } = usePluginData(\'my-plugin\');\\n\\n return (\\n \\n );\\n}\\n```"},{"id":"frontend-observability","metadata":{"permalink":"/blog/frontend-observability","editUrl":"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/blog/2024-06-22-Observability/index.md","source":"@site/blog/2024-06-22-Observability/index.md","title":"\uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\ub780?","description":"SSR(Server-Side Rendering) \ub3c4\uc785\uc758 \ubcc0\ud654","date":"2024-06-22T00:00:00.000Z","formattedDate":"June 22, 2024","tags":[{"label":"Observability","permalink":"/blog/tags/observability"},{"label":"Frontend","permalink":"/blog/tags/frontend"}],"readingTime":5.355,"hasTruncateMarker":false,"authors":[{"name":"WooSeok","url":"https://github.com/WanderedToLa","imageURL":"https://avatars.githubusercontent.com/u/87642287?v=4","key":"WanderedToLa"}],"frontMatter":{"slug":"frontend-observability","title":"\uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\ub780?","authors":["WanderedToLa"],"tags":["Observability","Frontend"]},"unlisted":false,"prevItem":{"title":"docusaurus custom plugin \ub9cc\ub4e4\uae30","permalink":"/blog/docusaurus-plugin"}},"content":"## SSR(Server-Side Rendering) \ub3c4\uc785\uc758 \ubcc0\ud654\\n\\n\uc5ec\ub7ec\uae30\uc5c5\ub4e4\uc5d0\uc11c \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub354 \ub098\uc740 \uc0ac\uc6a9\uc131\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud574 \ub178\ub825\ud558\uace0 \uc788\ub2e4. \\nFrontend \uce21\uba74\uc5d0\uc11c \uc5b4\ub5a4 \ub178\ub825\ub4e4\uc744 \ud558\uace0\uc788\uc744\uae4c \ucc3e\uc544\ubcf4\uc558\ub294\ub370 \\n\uccab\ubc88\uc9f8\ub294 Node.js \uc758 \ubc1c\uc804\uc73c\ub85c server\uc640 client\uac00 \uac19\uc740 \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uac8c \ub418\uba74\uc11c \\n\ub80c\ub354\ub9c1\uc758 \ucc45\uc784\uc744 Server\ub85c \uc774\uc804\ud558\ub824\ub294 \uc6c0\uc9c1\uc784\uc774 \ub098\ud0c0\ub0ac\uace0 \\n\ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \ub80c\ub354\ub9c1\uc744 \ub2f4\ub2f9\ud558\ub358 React\uc640 \uac19\uc740 \ud658\uacbd\uc5d0\uc11c \\n\uc0ac\uc6a9\uc790\ub4e4\uc774 \ud398\uc774\uc9c0\uc5d0 \ucc98\uc74c\uc73c\ub85c \uc9c4\uc785\ud558\ub294 \uc2dc\uac04`(LCP/FCP)`\uc744 \uc904\uc5ec \ub354 \ub098\uc740 \uc0ac\uc6a9\uc131\uc744 \uc81c\uacf5\ud55c \uac83\uc774\ub2e4.\\n\\n\uc774\ub7f0 \ub300\ud45c\uc801\uc778 \ud504\ub808\uc784\uc6cc\ud06c\ub85c Next.js\uac00 \uc788\uace0 \ub2e8\uc810\uc740 \\nServer\uce21\uc5d0\uc11c \ub80c\ub354\ub9c1 \ud55c\ub2e4\ub294 \uac83\uc740 \uacb0\uad6d \uad00\ub9ac\ud574\uc57c\ud558\ub294 \uc11c\ubc84\uac00 \uc788\ub2e4\ub294 \uac83\uc774\uace0 \uace7 \\n\ubaa8\ub2c8\ud130\ub9c1 \ud558\ub294\ub370 \ube44\uc6a9\uc774 \ub4e4\uace0 \ud2b8\ub798\ud53d\uc774 \ubab0\ub9b4 \uacbd\uc6b0\ub97c \ub300\ube44\ud574\uc57c\ud55c\ub2e4. \\n\ub610\ud55c Build \ubc0f \ubc30\ud3ec\uc2dc\uac04\uc774 \uc624\ub798\uac78\ub9b0\ub2e4\ub294 \ub2e8\uc810\ub3c4 \uc874\uc7ac.\\n\\n## Observability?\\n\\n\ucee8\ud37c\ub7f0\uc2a4\ub098 \uc790\ub8cc\ub4e4\uc744 \ucc3e\ub2e4\ubcf4\uba74 `Observability`\ub77c\ub294 \ub2e8\uc5b4\ub97c \uc2ec\uc2ec\uce58 \uc54a\uac8c \ubcfc \uc218 \uc788\ub2e4. \\n\ub3c4\ub300\uccb4 \ubb34\uc2a8 \ub73b\uc77c\uae4c \ubcf4\ub2e4\ubcf4\ub2c8 \ub098\uc5d0\uac8c\ub294 \uc774\uc0c1\uc801\uc73c\ub85c \ub2e4\uac00\uc654\ub294\ub370 \\n\uc774 \ub2e8\uc5b4\ub97c \ub9cc\ub4e0 \uc0ac\ub78c `Rudolf E Kalman`\uc740 \\"\uc2dc\uc2a4\ud15c\uc758 \ucd9c\ub825\uc73c\ub85c\ubd80\ud130 \uc2dc\uc2a4\ud15c\uc758 \uc0c1\ud0dc\ub97c \uc774\ud574\ud560 \uc218 \uc788\ub294 \ub2a5\ub825\\"\\n\uc774\ub77c\uace0 \ud55c\ub2e4 \uacb0\uad6d \uc774 \ub9d0\uc774 \ub85c\uae45\uc774\ub098 \ubaa8\ub2c8\ud130\ub9c1 \uc9c0\ud45c\ub97c \ud1b5\ud574 \uc6b0\ub9ac\uc758 App\uc758 \uc0c1\ud0dc\ub97c \uce21\uc815\ud558\uace0 \\n\ubc1c \ube60\ub978 \ub300\uc751\uc774 \uac00\ub2a5\ud55c \ub2a5\ub825\uc774\ub77c\uace0 \uc0dd\uac01\ud55c\ub2e4.\\n\\n\ud2b9\ud788\ub098 \uaddc\ubaa8\uac00 \ud070 \uae30\uc5c5\ub4e4\uc740 MSA\uac19\uc740 \uc544\ud0a4\ud14d\ucc98\ub97c \uc0ac\uc6a9\ud558\uace0 \uc694\uccad\uc774 \ubd84\uc0b0\ucc98\ub9ac\ub418\uc5b4 \\n\uc81c\ub300\ub85c \ub85c\uadf8\ub97c \ud655\uc778\ud558\uac70\ub098 \ubaa8\ub2c8\ud130\ub9c1\uc774 \ud798\ub4e4 \uc218 \uc788\ub2e4. \\n\uc774\uc0c1\uc801\uc73c\ub85c\ub294 \uc5d0\ub7ec\uac00 \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc744 \uafc8\uafb8\uae34 \ud558\uaca0\uc9c0\ub9cc \uc5d0\ub7ec\ub294 \uc788\uc744 \uc218 \ubc16\uc5d0 \uc5c6\uace0 \\n\uadf8\ub807\uae30\uc5d0 \ubc1c\ube60\ub978 \ub300\uc751\uc744 \uc704\ud574 \ucd5c\ub300\ud55c `Observability`\ub97c \ud5a5\uc0c1\uc2dc\ud0a4\uae30 \uc704\ud574 \ud798\uc4f0\ub294\uac83 \uac19\ub2e4.\\n\\n## Web Vitals\\n\\n\ub300\ud45c\uc801\uc73c\ub85c \ud504\ub860\ud2b8\uc5d4\ub4dc\uc758 \uc131\ub2a5\uc744 \uce21\uc815\ud560 \ub54c \uc2e0\uacbd \uc4f0\ub294 4\uac00\uc9c0\ub294\\n\\n- TTFB: \ube0c\ub77c\uc6b0\uc800\uac00 \uc11c\ubc84\ub85c\ubd80\ud130 \uccab\ubc88\uc9f8 \ubc14\uc774\ud2b8\ub97c \uc218\uc2e0\ud558\ub294 \uc18d\ub3c4(>500ms)\\n- LCP: \uac00\uc7a5 \ud070 \ucf58\ud150\uce20\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 \uadf8\ub824\uc9c0\uae30\uae4c\uc9c0\uc758 \uc18d\ub3c4(>2.5s)\\n- FCP: \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcfc \uc218 \uc788\ub294 \ucf58\ud150\uce20\uac00 \ucd5c\ucd08\ub85c \uadf8\ub824\uc9c0\uae30\uae4c\uc9c0\uc758 \uc18d\ub3c4(>1.8s)\\n- TTI: \ud398\uc774\uc9c0 \ub85c\ub529\uc774 \uc644\ub8cc\ub418\uace0 \uc0ac\uc6a9\uc790 \uc785\ub825\uc5d0 \uc751\ub2f5\ud558\uae30\uae4c\uc9c0\uc758 \uc18d\ub3c4(>100ms)\\n\\n\uc774 \uc678\uc5d0\ub3c4 \ub808\uc774\uc544\uc6c3 \uc2dc\ud504\ud2b8(CLS)\ub098 TTI\uc640 \uc720\uc0ac\ud55c FID\ub4f1\uc774 \uc788\ub2e4.\\n\\n\uc774\ub7f0 \uc9c0\ud45c\ub4e4\uc758 \uc790\uc138\ud55c \uc124\uba85\uc774\uc544\ub2cc \uc774\uc720\uc5d0 \ub300\ud574 \uc0dd\uac01\ud574\ubcf4\ub824 \ud558\ub294\ub370 \\n\uc704\uc640\uac19\uc740 \uc9c0\ud45c\ub4e4\uc744 \ud1b5\ud574 \uc131\ub2a5\uc744 \uce21\uc815/\ucd5c\uc801\ud654 \ud558\ub294 \uac83\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8 \uac1c\uc120\uc73c\ub85c \uc774\uc5b4\uc9c0\uace0 \\n\uafb8\uc900\ud55c \ubaa8\ub2c8\ud130\ub9c1\uc744 \ud1b5\ud574 \uc131\ub2a5\uc758 \uc800\ud558\ub97c \ub9c9\ub294\ub2e4\uace0 \uc0dd\uac01\ud55c\ub2e4 \ud639\uc740 \ud14c\uc2a4\ud2b8\ucf54\ub4dc \uc791\uc131\uc744 \ud1b5\ud574 \ub9c9\uac70\ub098?\\n\\n## \uc815\ub9ac\\n\\n\ub204\uad70\uac00 \ub098\uc5d0\uac8c \uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\ub780 \ubb50\uc5d0\uc694? \ub77c\uace0 \ubb3b\ub294\ub2e4\uba74 \\nFrontend\uc758 Observability\ub97c \uac00\ub2a5\ud55c \ucd5c\ub300\ub85c \ub04c\uc5b4\uc62c\ub9ac\ub294 \uac83\uacfc Metric\uac19\uc740 \ubcf4\uc870\uc9c0\ud45c\ub97c \ud65c\uc6a9\ud558\uc5ec \\nApp\uc758 \uc131\ub2a5\uc744 \uce21\uc815\ud558\uace0 \ucd5c\uc801\ud654,\uc815\ud655\uc131\uc744 \ud14c\uc2a4\ud2b8\ud558\uc5ec \uc6f9\uc0ac\uc774\ud2b8\uc758 \ub2e4\uc591\ud55c \uce21\uba74\ub4e4\uc744 \uc6d0\ud65c\ud558\uac8c \\n\ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uac1c\uc120\ud558\uace0 \uc5d0\ub7ec\ub97c \uac10\uc9c0\ud558\uc5ec \uc2e0\uc18d\ud558\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\ub294 \ubaa8\ub2c8\ud130\ub9c1 \ud658\uacbd\uc744 \uad6c\uc131\ud558\ub294 \uac83\\n\uc774\uc0c1\uc801\uc73c\ub85c\ub294 \uc5d0\ub7ec\uac00 \uc544\uc608\uc5c6\ub294 \ud658\uacbd\uc774 \uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\uc5d0 \uadfc\uc811\ud558\uc9c0 \uc54a\uc744\uae4c \ub77c\uace0 \ub300\ub2f5\ud560\uac83\uac19\ub2e4.\\n\\n### \ucc38\uace0\\n\\n- [SSR\uc758 \uae30\uc068\uacfc \uc2ac\ud514: \ub80c\ub354\ub9c1\uc758 \ubcc0\ud654\uc758 \ud750\ub984\uc744 \ud1b5\ud574 \uc54c\uc544\ubcf4\ub294 SSR\uacfc Streaming SSR | \uc778\ud504\ucf582023](https://www.youtube.com/watch?v=hPyyFu3lrEg&list=PLpkj8RKr48waFtrqvJjbNrpGCvdxyX8Nx&index=30)\\n- [[Dev Dive\\\\_ Frontend Day] \uc2a4\ud2b8\ub9ac\ubc0d SSR \ub525 \ub2e4\uc774\ube0c](https://www.youtube.com/watch?v=9xl9X2pfHeI&t=1934s)\\n- [\ud1a0\uc2a4\u3163SLASH 23 - \ubd84\uc0b0 \ucd94\uc801 \uccb4\uacc4 & \ub85c\uadf8 \uc911\uc2ec\uc73c\ub85c Observability \ud655\ubcf4\ud558\uae30](https://www.youtube.com/watch?v=Ifz0LsfAG94&list=PL1DJtS1Hv1PiGXmgruP1_gM2TSvQiOsFL&index=23)\\n- [\ud1a0\uc2a4\u3163SLASH 22 - \uc783\uc5b4\ubc84\ub9b0 \uac1c\ubc1c\uc790\uc758 \uc2dc\uac04\uc744 \ucc3e\uc544\uc11c: \ub9e4\uc77c \ud558\ub8e8\ub97c \uc544\ub07c\ub294 DevOps \uc774\uc57c\uae30](https://www.youtube.com/watch?v=2IE68SDTYvI)"}]}')}}]); \ No newline at end of file diff --git a/assets/js/e9d548ba.351f48a6.js b/assets/js/e9d548ba.fba519fb.js similarity index 74% rename from assets/js/e9d548ba.351f48a6.js rename to assets/js/e9d548ba.fba519fb.js index bed5358..a2c808b 100644 --- a/assets/js/e9d548ba.351f48a6.js +++ b/assets/js/e9d548ba.fba519fb.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[175],{4584:e=>{e.exports=JSON.parse('{"label":"environment","permalink":"/blog/tags/environment","allTagsPath":"/blog/tags","count":1,"unlisted":false}')}}]); \ No newline at end of file +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[175],{2204:e=>{e.exports=JSON.parse('{"label":"environment","permalink":"/blog/tags/environment","allTagsPath":"/blog/tags","count":1,"unlisted":false}')}}]); \ No newline at end of file diff --git a/assets/js/main.f2882133.js b/assets/js/main.6c06daa2.js similarity index 99% rename from assets/js/main.f2882133.js rename to assets/js/main.6c06daa2.js index fa6b326..23975dc 100644 --- a/assets/js/main.f2882133.js +++ b/assets/js/main.6c06daa2.js @@ -1,2 +1,2 @@ -/*! For license information please see main.f2882133.js.LICENSE.txt */ -(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[1590],{628:(e,t,n)=>{"use strict";n.d(t,{c:()=>p});n(1504);var r=n(8852),a=n.n(r),o=n(4504);const i={"01a85c17":[()=>Promise.all([n.e(2176),n.e(8412)]).then(n.bind(n,3024)),"@theme/BlogTagsListPage",3024],"05c7f781":[()=>n.e(3516).then(n.t.bind(n,2928,19)),"~blog/default/blog-tags-environment-6f1-list.json",2928],"09b05c80":[()=>n.e(1024).then(n.bind(n,896)),"@site/docs/Frontend/01-tanstack-table.md",896],"0ada2768":[()=>n.e(3040).then(n.bind(n,2828)),"@site/docs/Tips/githubstatus.md",2828],"0ef3d8a7":[()=>n.e(7884).then(n.bind(n,2940)),"@site/docs/Frontend/04-js-type.md",2940],"108b598b":[()=>n.e(3592).then(n.t.bind(n,2080,19)),"/home/runner/work/wanderedtola.blog/wanderedtola.blog/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",2080],17896441:[()=>Promise.all([n.e(2176),n.e(9443),n.e(6752)]).then(n.bind(n,5104)),"@theme/DocItem",5104],18559978:[()=>n.e(4576).then(n.bind(n,7408)),"@site/docs/2024/07/07-17.md",7408],"19d4caa7":[()=>n.e(4991).then(n.bind(n,3052)),"@site/docs/2024/07/07-16.md",3052],"1df93b7f":[()=>n.e(8552).then(n.bind(n,9396)),"@site/src/pages/index.tsx",9396],"2497986c":[()=>n.e(8171).then(n.t.bind(n,3736,19)),"~blog/default/blog-tags-plugin-95c-list.json",3736],"26301e9e":[()=>n.e(2936).then(n.bind(n,1416)),"@site/docs/2024/07/07-23.md",1416],"27e351f1":[()=>n.e(4328).then(n.bind(n,8820)),"@site/docs/Frontend/06-popover.md",8820],"2b39322a":[()=>n.e(4056).then(n.bind(n,8716)),"@site/docs/Frontend/03-fe-conf-import.md",8716],"2f4f79ed":[()=>n.e(8816).then(n.bind(n,9004)),"@site/blog/2024-07-01-docusaurus-plugin/index.md",9004],"32f9d351":[()=>n.e(2564).then(n.bind(n,7924)),"@site/docs/Frontend/07-woowa-state-manage.md",7924],"419b793c":[()=>n.e(9232).then(n.bind(n,4772)),"@site/docs/OS/memo.md",4772],"454824b6":[()=>n.e(7152).then(n.bind(n,2664)),"@site/blog/2024-06-22-Observability/index.md",2664],"45773d59":[()=>n.e(9293).then(n.t.bind(n,2448,19)),"~blog/default/blog-tags-dependencies-385-list.json",2448],"479321cf":[()=>n.e(8728).then(n.t.bind(n,7336,19)),"~blog/default/blog-tags-git-b15-list.json",7336],"4cd4f0a7":[()=>n.e(9156).then(n.bind(n,3480)),"@site/docs/OS/install_wsl.md",3480],"4e5aa5ff":[()=>n.e(7470).then(n.bind(n,4196)),"@site/docs/PL/intro-programming-language.md",4196],"528fb942":[()=>n.e(3664).then(n.bind(n,3884)),"@site/blog/2024-07-19-frontend/index.md",3884],"55c24532":[()=>n.e(8056).then(n.bind(n,5248)),"@site/blog/2024-06-22-Observability/index.md?truncated=true",5248],"576f2e3a":[()=>n.e(168).then(n.t.bind(n,7586,19)),"~blog/default/blog-tags-custom-8e7.json",7586],"5854caf2":[()=>n.e(1456).then(n.bind(n,4867)),"@site/blog/2024-07-19-frontend/index.md?truncated=true",4867],"5daea7fd":[()=>n.e(8912).then(n.bind(n,6464)),"@site/docs/Tips/pets.md",6464],"5e95c892":[()=>n.e(4304).then(n.bind(n,3564)),"@theme/DocsRoot",3564],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,7768)),"@generated/docusaurus.config",7768],"60262e21":[()=>n.e(2180).then(n.t.bind(n,1266,19)),"~blog/default/blog-tags-git-b15.json",1266],"608ae6a4":[()=>n.e(5168).then(n.t.bind(n,3120,19)),"~blog/default/blog-tags-docusaurus-0e0-list.json",3120],"60be8e52":[()=>n.e(826).then(n.bind(n,4236)),"@site/docs/Tips/how-to-speak.md",4236],"62ca52c1":[()=>n.e(6792).then(n.bind(n,6960)),"@site/docs/2024/07/07-15.md",6960],"6875c492":[()=>Promise.all([n.e(2176),n.e(9443),n.e(606),n.e(2392)]).then(n.bind(n,2948)),"@theme/BlogTagsPostsPage",2948],"6b17ea64":[()=>n.e(9936).then(n.bind(n,6948)),"@site/docs/2024/07/07-19.md",6948],"73645fa8":[()=>n.e(1732).then(n.bind(n,6868)),"@site/blog/2024-07-01-docusaurus-plugin/index.md?truncated=true",6868],"752283db":[()=>n.e(8048).then(n.t.bind(n,818,19)),"~blog/default/blog-tags-plugin-95c.json",818],"814f3328":[()=>n.e(5512).then(n.t.bind(n,4352,19)),"~blog/default/blog-post-list-prop-default.json",4352],"935f2afb":[()=>n.e(5696).then(n.t.bind(n,5988,19)),"~docs/default/version-current-metadata-prop-751.json",5988],"9457f915":[()=>n.e(7976).then(n.bind(n,7844)),"@site/docs/Frontend/02-actions-core.md",7844],"99a66f7b":[()=>n.e(9904).then(n.t.bind(n,2380,19)),"~blog/default/blog-tags-frontend-1ec-list.json",2380],"9b36ccd3":[()=>n.e(9772).then(n.t.bind(n,9992,19)),"~blog/default/blog-tags-observability-e3f.json",9992],"9e4087bc":[()=>n.e(7028).then(n.bind(n,6140)),"@theme/BlogArchivePage",6140],a2247295:[()=>n.e(7313).then(n.bind(n,9924)),"@site/docs/2024/07/07-24.md",9924],a556cc0e:[()=>n.e(1832).then(n.t.bind(n,6792,19)),"/home/runner/work/wanderedtola.blog/wanderedtola.blog/.docusaurus/docusaurus-plugin-content-blog/default/plugin-route-context-module-100.json",6792],a6930543:[()=>n.e(7140).then(n.t.bind(n,7024,19)),"~blog/default/blog-tags-transplier-287-list.json",7024],a6aa9e1f:[()=>Promise.all([n.e(2176),n.e(9443),n.e(606),n.e(4976)]).then(n.bind(n,4328)),"@theme/BlogListPage",4328],a7023ddc:[()=>n.e(9112).then(n.t.bind(n,1568,19)),"~blog/default/blog-tags-tags-4c2.json",1568],a7bd4aaa:[()=>n.e(6500).then(n.bind(n,2e3)),"@theme/DocVersionRoot",2e3],a80da1cf:[()=>n.e(8600).then(n.t.bind(n,2338,19)),"~blog/default/blog-tags-docusaurus-0e0.json",2338],a94703ab:[()=>Promise.all([n.e(2176),n.e(4666)]).then(n.bind(n,996)),"@theme/DocRoot",996],acbb0b46:[()=>n.e(3376).then(n.bind(n,8780)),"@site/docs/Tips/command-tree.md",8780],b2b675dd:[()=>n.e(6292).then(n.t.bind(n,6180,19)),"~blog/default/blog-c06.json",6180],b2f554cd:[()=>n.e(6880).then(n.t.bind(n,8256,19)),"~blog/default/blog-archive-80c.json",8256],b9f07e2a:[()=>n.e(5244).then(n.t.bind(n,262,19)),"~blog/default/blog-tags-custom-8e7-list.json",262],c2f3c969:[()=>n.e(564).then(n.bind(n,328)),"@site/docs/Tips/git-alias.md",328],c6f71f2b:[()=>n.e(7560).then(n.t.bind(n,4680,19)),"~blog/default/blog-tags-frontend-1ec.json",4680],c847a044:[()=>n.e(5396).then(n.bind(n,5252)),"@site/docs/Frontend/05-next-14.md",5252],c98ea65b:[()=>n.e(6824).then(n.t.bind(n,164,19)),"~blog/default/blog-tags-transplier-287.json",164],ccc49370:[()=>Promise.all([n.e(2176),n.e(9443),n.e(606),n.e(6344)]).then(n.bind(n,8320)),"@theme/BlogPostPage",8320],d184639a:[()=>n.e(5908).then(n.t.bind(n,590,19)),"/home/runner/work/wanderedtola.blog/wanderedtola.blog/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",590],dda9d876:[()=>n.e(2520).then(n.bind(n,3100)),"@site/docs/Tips/advanced-search.md",3100],e9d548ba:[()=>n.e(175).then(n.t.bind(n,4584,19)),"~blog/default/blog-tags-environment-6f1.json",4584],ece636e5:[()=>n.e(1932).then(n.t.bind(n,248,19)),"~blog/default/blog-tags-dependencies-385.json",248],f1b3bdd2:[()=>n.e(1232).then(n.t.bind(n,4048,19)),"~blog/default/blog-tags-observability-e3f-list.json",4048]};var l=n(7624);function s(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,l.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,l.jsx)("p",{children:String(t)}),(0,l.jsx)("div",{children:(0,l.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,l.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,l.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,l.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,l.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(8120),u=n(5548);function d(e,t){if("*"===e)return a()({loading:s,loader:()=>n.e(4552).then(n.bind(n,4552)),modules:["@theme/NotFound"],webpack:()=>[4552],render(e,t){const n=e.default;return(0,l.jsx)(u.Y,{value:{plugin:{name:"native",id:"default"}},children:(0,l.jsx)(n,{...t})})}});const r=o[`${e}-${t}`],d={},p=[],f=[],m=(0,c.c)(r);return Object.entries(m).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),a().Map({loading:s,loader:d,modules:p,webpack:()=>f,render(t,n){const a=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const o=r.default;if(!o)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof o&&"function"!=typeof o||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{o[e]=r[e]}));let i=a;const l=n.split(".");l.slice(0,-1).forEach((e=>{i=i[e]})),i[l[l.length-1]]=o}));const o=a.__comp;delete a.__comp;const i=a.__context;return delete a.__context,(0,l.jsx)(u.Y,{value:i,children:(0,l.jsx)(o,{...a,...n})})}})}const p=[{path:"/blog",component:d("/blog","612"),exact:!0},{path:"/blog/archive",component:d("/blog/archive","ba9"),exact:!0},{path:"/blog/docusaurus-plugin",component:d("/blog/docusaurus-plugin","856"),exact:!0},{path:"/blog/frontend-environment",component:d("/blog/frontend-environment","8c9"),exact:!0},{path:"/blog/frontend-observability",component:d("/blog/frontend-observability","870"),exact:!0},{path:"/blog/tags",component:d("/blog/tags","379"),exact:!0},{path:"/blog/tags/custom",component:d("/blog/tags/custom","74f"),exact:!0},{path:"/blog/tags/dependencies",component:d("/blog/tags/dependencies","0be"),exact:!0},{path:"/blog/tags/docusaurus",component:d("/blog/tags/docusaurus","ffd"),exact:!0},{path:"/blog/tags/environment",component:d("/blog/tags/environment","c0d"),exact:!0},{path:"/blog/tags/frontend",component:d("/blog/tags/frontend","f81"),exact:!0},{path:"/blog/tags/git",component:d("/blog/tags/git","d38"),exact:!0},{path:"/blog/tags/observability",component:d("/blog/tags/observability","5b6"),exact:!0},{path:"/blog/tags/plugin",component:d("/blog/tags/plugin","8b4"),exact:!0},{path:"/blog/tags/transplier",component:d("/blog/tags/transplier","319"),exact:!0},{path:"/docs",component:d("/docs","8ca"),routes:[{path:"/docs",component:d("/docs","1bb"),routes:[{path:"/docs",component:d("/docs","db6"),routes:[{path:"/docs/2024/07/07-15",component:d("/docs/2024/07/07-15","4a8"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/2024/07/07-16",component:d("/docs/2024/07/07-16","2dd"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/2024/07/07-17",component:d("/docs/2024/07/07-17","50e"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/2024/07/07-19",component:d("/docs/2024/07/07-19","cff"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/2024/07/07-23",component:d("/docs/2024/07/07-23","04c"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/2024/07/07-24",component:d("/docs/2024/07/07-24","bc1"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Frontend/actions-core",component:d("/docs/Frontend/actions-core","08d"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Frontend/fe-conf-import",component:d("/docs/Frontend/fe-conf-import","d7f"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Frontend/js-type",component:d("/docs/Frontend/js-type","965"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Frontend/next-14",component:d("/docs/Frontend/next-14","50a"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Frontend/popover",component:d("/docs/Frontend/popover","5a0"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Frontend/tanstack-table",component:d("/docs/Frontend/tanstack-table","c82"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Frontend/woowa-state-manage",component:d("/docs/Frontend/woowa-state-manage","b4e"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/OS/install_wsl",component:d("/docs/OS/install_wsl","210"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/OS/memo",component:d("/docs/OS/memo","0dd"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/PL/intro-programming-language",component:d("/docs/PL/intro-programming-language","cf9"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Tips/advanced-search",component:d("/docs/Tips/advanced-search","46d"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Tips/command-tree",component:d("/docs/Tips/command-tree","e20"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Tips/git-alias",component:d("/docs/Tips/git-alias","7e4"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Tips/githubstatus",component:d("/docs/Tips/githubstatus","9f8"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Tips/how-to-speak",component:d("/docs/Tips/how-to-speak","eec"),exact:!0,sidebar:"WikiSidebar"},{path:"/docs/Tips/pets",component:d("/docs/Tips/pets","112"),exact:!0,sidebar:"WikiSidebar"}]}]}]},{path:"/",component:d("/","ebf"),exact:!0},{path:"*",component:d("*")}]},240:(e,t,n)=>{"use strict";n.d(t,{e:()=>o,g:()=>i});var r=n(1504),a=n(7624);const o=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,a.jsx)(o.Provider,{value:n,children:t})}},8808:(e,t,n)=>{"use strict";var r=n(1504),a=n(8352),o=n(440),i=n(2160),l=n(8684);const s=[n(1462),n(5396),n(9596),n(1496)];var c=n(628),u=n(5592),d=n(5464),p=n(7624);function f(e){let{children:t}=e;return(0,p.jsx)(p.Fragment,{children:t})}var m=n(6952),g=n(8264),h=n(964),b=n(1824),y=n(5756),v=n(1616),w=n(204),k=n(4456),x=n(5684),S=n(8712);function E(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,g.c)(),r=(0,v.D)(),a=n[e].htmlLang,o=e=>e.replace("-","_");return(0,p.jsxs)(m.c,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:o(a)}),Object.values(n).filter((e=>a!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:o(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function C(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,g.c)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,g.c)(),{pathname:r}=(0,u.IT)();return e+(0,x.applyTrailingSlash)((0,h.c)(r),{trailingSlash:n,baseUrl:t})}(),a=t?`${n}${t}`:r;return(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{property:"og:url",content:a}),(0,p.jsx)("link",{rel:"canonical",href:a})]})}function _(){const{i18n:{currentLocale:e}}=(0,g.c)(),{metadata:t,image:n}=(0,b.y)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:w.m})]}),n&&(0,p.jsx)(y.U7,{image:n}),(0,p.jsx)(C,{}),(0,p.jsx)(E,{}),(0,p.jsx)(S.c,{tag:k.e6,locale:e}),(0,p.jsx)(m.c,{children:t.map(((e,t)=>(0,p.jsx)("meta",{...e},t)))})]})}const T=new Map;function j(e){if(T.has(e.pathname))return{...e,pathname:T.get(e.pathname)};if((0,d.C)(c.c,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return T.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return T.set(e.pathname,t),{...e,pathname:t}}var A=n(240),L=n(136),N=n(5288);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>a.forEach((e=>e?.()))}const P=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,N.c)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,a=t.hash===n.hash,o=t.search===n.search;if(r&&a&&!o)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),R("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function O(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.C)(c.c,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class D extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.c.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),O(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,p.jsx)(P,{previousLocation:this.previousLocation,location:t,children:(0,p.jsx)(u.kX,{location:t,render:()=>e})})}}const F=D,I="__docusaurus-base-url-issue-banner-container",M="__docusaurus-base-url-issue-banner",z="__docusaurus-base-url-issue-banner-suggestion-container";function B(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${I}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

\n

We suggest trying baseUrl =

\n
\n`}(e)).replace(/{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const a=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;a?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var K=n(8120);const X=new Set,Z=new Set,J=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ee={prefetch(e){if(!(e=>!J()&&!Z.has(e)&&!X.has(e))(e))return!1;X.add(e);const t=(0,d.C)(c.c,e).flatMap((e=>{return t=e.route.path,Object.entries(Q).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,K.c)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Y(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!J()&&!Z.has(e))(e)&&(Z.add(e),O(e))},te=Object.freeze(ee),ne=Boolean(!0);if(l.c.canUseDOM){window.docusaurus=te;const e=document.getElementById("__docusaurus"),t=(0,p.jsx)(i.EN,{children:(0,p.jsx)(o.kn,{children:(0,p.jsx)(V,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},l=()=>{if(ne)r.startTransition((()=>{a.hydrateRoot(e,t,{onRecoverableError:n})}));else{const o=a.createRoot(e,{onRecoverableError:n});r.startTransition((()=>{o.render(t)}))}};O(window.location.pathname).then(l)}},136:(e,t,n)=>{"use strict";n.d(t,{e:()=>d,y:()=>p});var r=n(1504),a=n(7768);const o=JSON.parse('{"docusaurus-plugin-blog-data":{"default":{"myBlogData":[{"slug":"frontend-environment","title":"\ud658\uacbd\uad6c\uc131 \ubc0f \uac1c\ubc1c\uc0dd\uc0b0\uc131 \ub192\uc774\uae30 in frontend","date":"2024-07-19"},{"slug":"docusaurus-plugin","title":"docusaurus custom plugin \ub9cc\ub4e4\uae30","date":"2024-07-01"},{"slug":"frontend-observability","title":"\uc548\uc804\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uc11c\ube44\uc2a4\ub780?","date":"2024-06-22"}]}},"docusaurus-plugin-content-docs":{"default":{"path":"/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/docs","mainDocId":"2024/07/07-15","docs":[{"id":"2024/07/07-15","path":"/docs/2024/07/07-15","sidebar":"WikiSidebar"},{"id":"2024/07/07-16","path":"/docs/2024/07/07-16","sidebar":"WikiSidebar"},{"id":"2024/07/07-17","path":"/docs/2024/07/07-17","sidebar":"WikiSidebar"},{"id":"2024/07/07-19","path":"/docs/2024/07/07-19","sidebar":"WikiSidebar"},{"id":"2024/07/07-23","path":"/docs/2024/07/07-23","sidebar":"WikiSidebar"},{"id":"2024/07/07-24","path":"/docs/2024/07/07-24","sidebar":"WikiSidebar"},{"id":"Frontend/actions-core","path":"/docs/Frontend/actions-core","sidebar":"WikiSidebar"},{"id":"Frontend/fe-conf-import","path":"/docs/Frontend/fe-conf-import","sidebar":"WikiSidebar"},{"id":"Frontend/js-type","path":"/docs/Frontend/js-type","sidebar":"WikiSidebar"},{"id":"Frontend/next-14","path":"/docs/Frontend/next-14","sidebar":"WikiSidebar"},{"id":"Frontend/popover","path":"/docs/Frontend/popover","sidebar":"WikiSidebar"},{"id":"Frontend/tanstack-table","path":"/docs/Frontend/tanstack-table","sidebar":"WikiSidebar"},{"id":"Frontend/woowa-state-manage","path":"/docs/Frontend/woowa-state-manage","sidebar":"WikiSidebar"},{"id":"OS/install_wsl","path":"/docs/OS/install_wsl","sidebar":"WikiSidebar"},{"id":"OS/memo","path":"/docs/OS/memo","sidebar":"WikiSidebar"},{"id":"PL/intro-programming-language","path":"/docs/PL/intro-programming-language","sidebar":"WikiSidebar"},{"id":"Tips/advanced-search","path":"/docs/Tips/advanced-search","sidebar":"WikiSidebar"},{"id":"Tips/command-tree","path":"/docs/Tips/command-tree","sidebar":"WikiSidebar"},{"id":"Tips/git-alias","path":"/docs/Tips/git-alias","sidebar":"WikiSidebar"},{"id":"Tips/githubstatus","path":"/docs/Tips/githubstatus","sidebar":"WikiSidebar"},{"id":"Tips/how-to-speak","path":"/docs/Tips/how-to-speak","sidebar":"WikiSidebar"},{"id":"Tips/pets","path":"/docs/Tips/pets","sidebar":"WikiSidebar"}],"draftIds":[],"sidebars":{"WikiSidebar":{"link":{"path":"/docs/2024/07/07-15","label":"2024/07/07-15"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var l=n(144);const s=JSON.parse('{"docusaurusVersion":"3.0.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.0.0"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.0.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.0.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.0.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.0.0"},"docusaurus-plugin-blog-data":{"type":"project"}}}');var c=n(7624);const u={siteConfig:a.default,siteMetadata:s,globalData:o,i18n:i,codeTranslations:l},d=r.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},5852:(e,t,n)=>{"use strict";n.d(t,{c:()=>f});var r=n(1504),a=n(8684),o=n(6952),i=n(5684),l=n(2616),s=n(7624);function c(e){let{error:t,tryAgain:n}=e;return(0,s.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,s.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,s.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,s.jsx)(u,{error:t})]})}function u(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,s.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function d(e){let{error:t,tryAgain:n}=e;return(0,s.jsxs)(f,{fallback:()=>(0,s.jsx)(c,{error:t,tryAgain:n}),children:[(0,s.jsx)(o.c,{children:(0,s.jsx)("title",{children:"Page Error"})}),(0,s.jsx)(l.c,{children:(0,s.jsx)(c,{error:t,tryAgain:n})})]})}const p=e=>(0,s.jsx)(d,{...e});class f extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){a.c.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??p)(e)}return e??null}}},8684:(e,t,n)=>{"use strict";n.d(t,{c:()=>a});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},6952:(e,t,n)=>{"use strict";n.d(t,{c:()=>o});n(1504);var r=n(2160),a=n(7624);function o(e){return(0,a.jsx)(r.So,{...e})}},6016:(e,t,n)=>{"use strict";n.d(t,{c:()=>f});var r=n(1504),a=n(440),o=n(5684),i=n(8264),l=n(8136),s=n(8684),c=n(7624);const u=r.createContext({collectLink:()=>{}});var d=n(964);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:m,isActive:g,"data-noBrokenLinkCheck":h,autoAddBaseUrl:b=!0,...y}=e;const{siteConfig:{trailingSlash:v,baseUrl:w}}=(0,i.c)(),{withBaseUrl:k}=(0,d.E)(),x=(0,r.useContext)(u),S=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>S.current));const E=p||f;const C=(0,l.c)(E),_=E?.replace("pathname://","");let T=void 0!==_?(j=_,b&&(e=>e.startsWith("/"))(j)?k(j):j):void 0;var j;T&&C&&(T=(0,o.applyTrailingSlash)(T,{trailingSlash:v,baseUrl:w}));const A=(0,r.useRef)(!1),L=n?a.Af:a.cH,N=s.c.canUseIntersectionObserver,R=(0,r.useRef)(),P=()=>{A.current||null==T||(window.docusaurus.preload(T),A.current=!0)};(0,r.useEffect)((()=>(!N&&C&&null!=T&&window.docusaurus.prefetch(T),()=>{N&&R.current&&R.current.disconnect()})),[R,T,N,C]);const O=T?.startsWith("#")??!1,D=!T||!C||O;return D||h||x.collectLink(T),D?(0,c.jsx)("a",{ref:S,href:T,...E&&!C&&{target:"_blank",rel:"noopener noreferrer"},...y}):(0,c.jsx)(L,{...y,onMouseEnter:P,onTouchStart:P,innerRef:e=>{S.current=e,N&&e&&C&&(R.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(R.current.unobserve(e),R.current.disconnect(),null!=T&&window.docusaurus.prefetch(T))}))})),R.current.observe(e))},to:T,...n&&{isActive:g,activeClassName:m}})}const f=r.forwardRef(p)},2944:(e,t,n)=>{"use strict";n.d(t,{c:()=>r});const r=()=>null},4357:(e,t,n)=>{"use strict";n.d(t,{c:()=>c,G:()=>s});var r=n(1504),a=n(7624);function o(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(144);function l(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[t??n]??n??t}function s(e,t){let{message:n,id:r}=e;return o(l({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:r}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const i=l({message:t,id:n});return(0,a.jsx)(a.Fragment,{children:o(i,r)})}},2488:(e,t,n)=>{"use strict";n.d(t,{M:()=>r});const r="default"},8136:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{_:()=>r,c:()=>a})},964:(e,t,n)=>{"use strict";n.d(t,{E:()=>i,c:()=>l});var r=n(1504),a=n(8264),o=n(8136);function i(){const{siteConfig:{baseUrl:e,url:t}}=(0,a.c)(),n=(0,r.useCallback)(((n,r)=>function(e,t,n,r){let{forcePrependBaseUrl:a=!1,absolute:i=!1}=void 0===r?{}:r;if(!n||n.startsWith("#")||(0,o._)(n))return n;if(a)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+l:l}(t,e,n,r)),[t,e]);return{withBaseUrl:n}}function l(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},8264:(e,t,n)=>{"use strict";n.d(t,{c:()=>o});var r=n(1504),a=n(136);function o(){return(0,r.useContext)(a.e)}},3160:(e,t,n)=>{"use strict";n.d(t,{MP:()=>i,mm:()=>o});var r=n(8264),a=n(2488);function o(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,r.c)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}function i(e,t,n){void 0===t&&(t=a.M),void 0===n&&(n={});const r=o(e),i=r?.[t];if(!i&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return i}},3664:(e,t,n)=>{"use strict";n.d(t,{c:()=>o});var r=n(1504),a=n(240);function o(){return(0,r.useContext)(a.e)}},5288:(e,t,n)=>{"use strict";n.d(t,{c:()=>a});var r=n(1504);const a=n(8684).c.canUseDOM?r.useLayoutEffect:r.useEffect},8120:(e,t,n)=>{"use strict";n.d(t,{c:()=>a});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){const t={};return function e(n,a){Object.entries(n).forEach((n=>{let[o,i]=n;const l=a?`${a}.${o}`:o;r(i)?e(i,l):t[l]=i}))}(e),t}},5548:(e,t,n)=>{"use strict";n.d(t,{Y:()=>i,e:()=>o});var r=n(1504),a=n(7624);const o=r.createContext(null);function i(e){let{children:t,value:n}=e;const i=r.useContext(o),l=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:i,value:n})),[i,n]);return(0,a.jsx)(o.Provider,{value:l,children:t})}},5172:(e,t,n)=>{"use strict";n.d(t,{wB:()=>f,UF:()=>u,L0:()=>s,i8:()=>m,OK:()=>c,aA:()=>p,gN:()=>d});var r=n(5592),a=n(3160);const o=e=>e.versions.find((e=>e.isLast));function i(e,t){const n=function(e,t){const n=o(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.ot)(t,{path:e.path,exact:!1,strict:!1})))}(e,t),a=n?.docs.find((e=>!!(0,r.ot)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const l={},s=()=>(0,a.mm)("docusaurus-plugin-content-docs")??l,c=e=>(0,a.MP)("docusaurus-plugin-content-docs",e,{failfast:!0});function u(e){void 0===e&&(e={});const t=s(),{pathname:n}=(0,r.IT)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.ot)(t,{path:n.path,exact:!1,strict:!1})})),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return o}(t,n,e)}function d(e){return c(e).versions}function p(e){const t=c(e);return o(t)}function f(e){const t=c(e),{pathname:n}=(0,r.IT)();return i(t,n)}function m(e){const t=c(e),{pathname:n}=(0,r.IT)();return function(e,t){const n=o(e);return{latestDocSuggestion:i(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},9596:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(2272),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},5396:(e,t,n)=>{"use strict";n.r(t);var r=n(6756),a=n(7768);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(1808),n(8660)(`./prism-${e}`)})),delete globalThis.Prism}(r.sp)},6448:(e,t,n)=>{"use strict";n.d(t,{c:()=>c});n(1504);var r=n(4971),a=n(4357),o=n(1824),i=n(6016);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var s=n(7624);function c(e){let{as:t,id:n,...c}=e;const{navbar:{hideOnScroll:u}}=(0,o.y)();if("h1"===t||!n)return(0,s.jsx)(t,{...c,id:void 0});const d=(0,a.G)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof c.children?c.children:n});return(0,s.jsxs)(t,{...c,className:(0,r.c)("anchor",u?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,c.className),id:n,children:[c.children,(0,s.jsx)(i.c,{className:"hash-link",to:`#${n}`,"aria-label":d,title:d,children:"\u200b"})]})}},3232:(e,t,n)=>{"use strict";n.d(t,{c:()=>o});n(1504);const r={iconExternalLink:"iconExternalLink_nPIU"};var a=n(7624);function o(e){let{width:t=13.5,height:n=13.5}=e;return(0,a.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,a.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},2616:(e,t,n)=>{"use strict";n.d(t,{c:()=>pt});var r=n(1504),a=n(4971),o=n(5852),i=n(5756),l=n(5592),s=n(4357),c=n(7124),u=n(7624);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,l.Uz)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.c)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,s.G)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function g(e){const t=e.children??m,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":m,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var h=n(5864),b=n(204);const y={skipToContent:"skipToContent_fXgn"};function v(){return(0,u.jsx)(g,{className:y.skipToContent})}var w=n(1824),k=n(3868);function x(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:a=1.2,className:o,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:a,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const S={closeButton:"closeButton_CVFx"};function E(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,s.G)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,a.c)("clean-btn close",S.closeButton,e.className),children:(0,u.jsx)(x,{width:14,height:14,strokeWidth:3.1})})}const C={content:"content_knG7"};function _(e){const{announcementBar:t}=(0,w.y)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,a.c)(C.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const T={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function j(){const{announcementBar:e}=(0,w.y)(),{isActive:t,close:n}=(0,k.el)();if(!t)return null;const{backgroundColor:r,textColor:a,isCloseable:o}=e;return(0,u.jsxs)("div",{className:T.announcementBar,style:{backgroundColor:r,color:a},role:"banner",children:[o&&(0,u.jsx)("div",{className:T.announcementBarPlaceholder}),(0,u.jsx)(_,{className:T.announcementBarContent}),o&&(0,u.jsx)(E,{onClick:n,className:T.announcementBarClose})]})}var A=n(1336),L=n(3943);var N=n(1100),R=n(5168);const P=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,A.q)(),t=(0,R.MF)(),[n,a]=(0,r.useState)(!1),o=null!==t.component,i=(0,N.i0)(o);return(0,r.useEffect)((()=>{o&&!i&&a(!0)}),[o,i]),(0,r.useEffect)((()=>{o?e.shown||a(!0):a(!1)}),[e.shown,o]),(0,r.useMemo)((()=>[n,a]),[n])}();return(0,u.jsx)(P.Provider,{value:n,children:t})}function D(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function F(){const e=(0,r.useContext)(P);if(!e)throw new N.AH("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),o=(0,R.MF)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:D(o)})),[a,o,t])}function I(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:o}=F();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,a.c)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":o}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var M=n(6528),z=n(3664);function B(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function U(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const $={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function q(e){let{className:t,buttonClassName:n,value:r,onChange:o}=e;const i=(0,z.c)(),l=(0,s.G)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===r?(0,s.G)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,s.G)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,a.c)($.toggle,t),children:(0,u.jsxs)("button",{className:(0,a.c)("clean-btn",$.toggleButton,!i&&$.toggleButtonDisabled,n),type:"button",onClick:()=>o("dark"===r?"light":"dark"),disabled:!i,title:l,"aria-label":l,"aria-live":"polite",children:[(0,u.jsx)(B,{className:(0,a.c)($.toggleIcon,$.lightToggleIcon)}),(0,u.jsx)(U,{className:(0,a.c)($.toggleIcon,$.darkToggleIcon)})]})})}const H=r.memo(q),W={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function G(e){let{className:t}=e;const n=(0,w.y)().navbar.style,r=(0,w.y)().colorMode.disableSwitch,{colorMode:a,setColorMode:o}=(0,M.U)();return r?null:(0,u.jsx)(H,{className:t,buttonClassName:"dark"===n?W.darkNavbarColorModeToggle:void 0,value:a,onChange:o})}var V=n(8164);function Q(){return(0,u.jsx)(V.c,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Y(){const e=(0,A.q)();return(0,u.jsx)("button",{type:"button","aria-label":(0,s.G)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(x,{color:"var(--ifm-color-emphasis-600)"})})}function K(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(Q,{}),(0,u.jsx)(G,{className:"margin-right--md"}),(0,u.jsx)(Y,{})]})}var X=n(6016),Z=n(964),J=n(8136);function ee(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var te=n(3232);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:a,label:o,html:i,isDropdownLink:l,prependBaseUrlToHref:s,...c}=e;const d=(0,Z.c)(r),p=(0,Z.c)(t),f=(0,Z.c)(a,{forcePrependBaseUrl:!0}),m=o&&a&&!(0,J.c)(a),g=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[o,m&&(0,u.jsx)(te.c,{...l&&{width:12,height:12}})]})};return a?(0,u.jsx)(X.c,{href:s?f:a,...c,...g}):(0,u.jsx)(X.c,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?ee(n,t.pathname):t.pathname.startsWith(p)},...c,...g})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const o=(0,u.jsx)(ne,{className:(0,a.c)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:o}):o}function ae(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,a.c)("menu__link",t),...r})})}function oe(e){let{mobile:t=!1,position:n,...r}=e;const a=t?ae:re;return(0,u.jsx)(a,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ie=n(8448),le=n(3376),se=n(8264);function ce(e,t){return e.some((e=>function(e,t){return!!(0,le.Sc)(e.to,t)||!!ee(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function ue(e){let{items:t,position:n,className:o,onClick:i,...l}=e;const s=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{s.current&&!s.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[s]),(0,u.jsxs)("div",{ref:s,className:(0,a.c)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:l.to?void 0:"#",className:(0,a.c)("navbar__link",o),...l,onClick:l.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:l.children??l.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,r.createElement)(Ee,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function de(e){let{items:t,className:n,position:o,onClick:i,...s}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,se.c)(),{pathname:t}=(0,l.IT)();return t.replace(e,"/")}(),d=ce(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:m}=(0,ie.a)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&m(!d)}),[c,d,m]),(0,u.jsxs)("li",{className:(0,a.c)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,a.c)("menu__link menu__link--sublist menu__link--sublist-caret",n),...s,onClick:e=>{e.preventDefault(),f()},children:s.children??s.label}),(0,u.jsx)(ie.U,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(Ee,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:t})))})]})}function pe(e){let{mobile:t=!1,...n}=e;const r=t?de:ue;return(0,u.jsx)(r,{...n})}var fe=n(1616);function me(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const ge="iconLanguage_nlXk";var he=n(2944);const be={navbarSearchContainer:"navbarSearchContainer_Bca1"};function ye(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,a.c)(n,be.navbarSearchContainer),children:t})}var ve=n(5172),we=n(9940);var ke=n(4592);const xe=e=>e.docs.find((t=>t.id===e.mainDocId));const Se={default:oe,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:a="",...o}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,se.c)(),p=(0,fe.D)(),{search:f,hash:m}=(0,l.IT)(),g=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}${a}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],h=t?(0,s.G)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(pe,{...o,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(me,{className:ge}),h]}),items:g})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(ye,{className:n,children:(0,u.jsx)(he.c,{})})},dropdown:pe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:o=!1}=e;const i=o?"li":"div";return(0,u.jsx)(i,{className:(0,a.c)({navbar__item:!r&&!o,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:o}=(0,ve.wB)(r),i=(0,we.Qf)(t,r),l=o?.path===i?.path;return null===i||i.unlisted&&!l?null:(0,u.jsx)(oe,{exact:!0,...a,isActive:()=>l||!!o?.sidebar&&o.sidebar===i.sidebar,label:n??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:o}=(0,ve.wB)(r),i=(0,we.Ab)(t,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(oe,{exact:!0,...a,isActive:()=>o?.sidebar===t,label:n??i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...a}=e;const o=(0,we.b7)(r)[0],i=t??o.label,l=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(o).path;return(0,u.jsx)(oe,{...a,label:i,to:l})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:a,dropdownItemsAfter:o,...i}=e;const{search:c,hash:d}=(0,l.IT)(),p=(0,ve.wB)(n),f=(0,ve.gN)(n),{savePreferredVersionName:m}=(0,ke.iy)(n),g=[...a,...f.map((e=>{const t=p.alternateDocVersions[e.name]??xe(e);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>m(e.name)}})),...o],h=(0,we.b7)(n)[0],b=t&&g.length>1?(0,s.G)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,y=t&&g.length>1?void 0:xe(h).path;return g.length<=1?(0,u.jsx)(oe,{...i,mobile:t,label:b,to:y,isActive:r?()=>!1:void 0}):(0,u.jsx)(pe,{...i,mobile:t,label:b,to:y,items:g,isActive:r?()=>!1:void 0})}};function Ee(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),a=Se[r];if(!a)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(a,{...n})}function Ce(){const e=(0,A.q)(),t=(0,w.y)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(Ee,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function _e(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(s.c,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function Te(){const e=0===(0,w.y)().navbar.items.length,t=F();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(_e,{onClick:()=>t.hide()}),t.content]})}function je(){const e=(0,A.q)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(I,{header:(0,u.jsx)(K,{}),primaryMenu:(0,u.jsx)(Ce,{}),secondaryMenu:(0,u.jsx)(Te,{})}):null}const Ae={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Le(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,a.c)("navbar-sidebar__backdrop",e.className)})}function Ne(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:o}}=(0,w.y)(),i=(0,A.q)(),{navbarRef:l,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),o=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(o.current=e.getBoundingClientRect().height)}),[]);return(0,L.SM)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=l?n(!1):i+c{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:l,"aria-label":(0,s.G)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.c)("navbar","navbar--fixed-top",n&&[Ae.navbarHideable,!d&&Ae.navbarHidden],{"navbar--dark":"dark"===o,"navbar--primary":"primary"===o,"navbar-sidebar--show":i.shown}),children:[t,(0,u.jsx)(Le,{onClick:i.toggle}),(0,u.jsx)(je,{})]})}var Re=n(5684);const Pe={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function Oe(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(s.c,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function De(e){let{error:t}=e;const n=(0,Re.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Pe.errorBoundaryError,children:n})}class Fe extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const Ie="right";function Me(e){let{width:t=30,height:n=30,className:r,...a}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...a,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function ze(){const{toggle:e,shown:t}=(0,A.q)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,s.G)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(Me,{})})}const Be={colorModeToggle:"colorModeToggle_DEke"};function Ue(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(Fe,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(Ee,{...e})},t)))})}function $e(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function qe(){const e=(0,A.q)(),t=(0,w.y)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??Ie)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),a=t.find((e=>"search"===e.type));return(0,u.jsx)($e,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(ze,{}),(0,u.jsx)(Q,{}),(0,u.jsx)(Ue,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(Ue,{items:r}),(0,u.jsx)(G,{className:Be.colorModeToggle}),!a&&(0,u.jsx)(ye,{children:(0,u.jsx)(he.c,{})})]})})}function He(){return(0,u.jsx)(Ne,{children:(0,u.jsx)(qe,{})})}function We(e){let{item:t}=e;const{to:n,href:r,label:a,prependBaseUrlToHref:o,...i}=t,l=(0,Z.c)(n),s=(0,Z.c)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(X.c,{className:"footer__link-item",...r?{href:o?s:r}:{to:l},...i,children:[a,r&&!(0,J.c)(r)&&(0,u.jsx)(te.c,{})]})}function Ge(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(We,{item:t})},t.href??t.to)}function Ve(e){let{column:t}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(Ge,{item:e},t)))})]})}function Qe(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(Ve,{column:e},t)))})}function Ye(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function Ke(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(We,{item:t})}function Xe(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(Ke,{item:e}),t.length!==n+1&&(0,u.jsx)(Ye,{})]},n)))})})}function Ze(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(Qe,{columns:t}):(0,u.jsx)(Xe,{links:t})}var Je=n(1964);const et={footerLogoLink:"footerLogoLink_BH7S"};function tt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,Z.E)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(Je.c,{className:(0,a.c)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function nt(e){let{logo:t}=e;return t.href?(0,u.jsx)(X.c,{href:t.href,className:et.footerLogoLink,target:t.target,children:(0,u.jsx)(tt,{logo:t})}):(0,u.jsx)(tt,{logo:t})}function rt(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function at(e){let{style:t,links:n,logo:r,copyright:o}=e;return(0,u.jsx)("footer",{className:(0,a.c)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||o)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),o]})]})})}function ot(){const{footer:e}=(0,w.y)();if(!e)return null;const{copyright:t,links:n,logo:r,style:a}=e;return(0,u.jsx)(at,{style:a,links:n&&n.length>0&&(0,u.jsx)(Ze,{links:n}),logo:r&&(0,u.jsx)(nt,{logo:r}),copyright:t&&(0,u.jsx)(rt,{copyright:t})})}const it=r.memo(ot),lt=(0,N.qY)([M.C,k.qu,L.S2,ke.gc,i.w7,function(e){let{children:t}=e;return(0,u.jsx)(R.Ub,{children:(0,u.jsx)(A.y,{children:(0,u.jsx)(O,{children:t})})})}]);function st(e){let{children:t}=e;return(0,u.jsx)(lt,{children:t})}var ct=n(6448);function ut(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(ct.c,{as:"h1",className:"hero__title",children:(0,u.jsx)(s.c,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(Oe,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(De,{error:t})})]})})})}const dt={mainWrapper:"mainWrapper_z2l0"};function pt(e){const{children:t,noFooter:n,wrapperClassName:r,title:l,description:s}=e;return(0,b.W)(),(0,u.jsxs)(st,{children:[(0,u.jsx)(i.U7,{title:l,description:s}),(0,u.jsx)(v,{}),(0,u.jsx)(j,{}),(0,u.jsx)(He,{}),(0,u.jsx)("div",{id:d,className:(0,a.c)(h.W.wrapper.main,dt.mainWrapper,r),children:(0,u.jsx)(o.c,{fallback:e=>(0,u.jsx)(ut,{...e}),children:t})}),!n&&(0,u.jsx)(it,{})]})}},8164:(e,t,n)=>{"use strict";n.d(t,{c:()=>u});n(1504);var r=n(6016),a=n(964),o=n(8264),i=n(1824),l=n(1964),s=n(7624);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const o={light:(0,a.c)(t.src),dark:(0,a.c)(t.srcDark||t.src)},i=(0,s.jsx)(l.c,{className:t.className,sources:o,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,s.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:t}}=(0,o.c)(),{navbar:{title:n,logo:l}}=(0,i.y)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,a.c)(l?.href||"/"),m=n?"":t,g=l?.alt??m;return(0,s.jsxs)(r.c,{to:f,...p,...l?.target&&{target:l.target},children:[l&&(0,s.jsx)(c,{logo:l,alt:g,imageClassName:u}),null!=n&&(0,s.jsx)("b",{className:d,children:n})]})}},8712:(e,t,n)=>{"use strict";n.d(t,{c:()=>o});n(1504);var r=n(6952),a=n(7624);function o(e){let{locale:t,version:n,tag:o}=e;const i=t;return(0,a.jsxs)(r.c,{children:[t&&(0,a.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,a.jsx)("meta",{name:"docusaurus_version",content:n}),o&&(0,a.jsx)("meta",{name:"docusaurus_tag",content:o}),i&&(0,a.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,a.jsx)("meta",{name:"docsearch:version",content:n}),o&&(0,a.jsx)("meta",{name:"docsearch:docusaurus_tag",content:o})]})}},1964:(e,t,n)=>{"use strict";n.d(t,{c:()=>u});var r=n(1504),a=n(4971),o=n(3664),i=n(6528);const l={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var s=n(7624);function c(e){let{className:t,children:n}=e;const c=(0,o.c)(),{colorMode:u}=(0,i.U)();return(0,s.jsx)(s.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const o=n({theme:e,className:(0,a.c)(t,l.themedComponent,l[`themedComponent--${e}`])});return(0,s.jsx)(r.Fragment,{children:o},e)}))})}function u(e){const{sources:t,className:n,alt:r,...a}=e;return(0,s.jsx)(c,{className:n,children:e=>{let{theme:n,className:o}=e;return(0,s.jsx)("img",{src:t[n],alt:r,className:o,...a})}})}},8448:(e,t,n)=>{"use strict";n.d(t,{U:()=>b,a:()=>c});var r=n(1504),a=n(8684),o=n(5288),i=n(3856),l=n(7624);const s="ease-in-out";function c(e){let{initialState:t}=e;const[n,a]=(0,r.useState)(t??!1),o=(0,r.useCallback)((()=>{a((e=>!e))}),[]);return{collapsed:n,setCollapsed:a,toggleCollapsed:o}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:a}=e;const o=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=a?.duration??function(e){if((0,i.I)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${a?.easing??s}`,height:`${t}px`}}function l(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!o.current)return p(e,n),void(o.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(l(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{l()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,a])}function m(e){if(!a.c.canUseDOM)return e?u:d}function g(e){let{as:t="div",collapsed:n,children:a,animation:o,onCollapseTransitionEnd:i,className:s,disableSSRStyle:c}=e;const u=(0,r.useRef)(null);return f({collapsibleRef:u,collapsed:n,animation:o}),(0,l.jsx)(t,{ref:u,style:c?void 0:m(n),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,n),i?.(n))},className:s,children:a})}function h(e){let{collapsed:t,...n}=e;const[a,i]=(0,r.useState)(!t),[s,c]=(0,r.useState)(t);return(0,o.c)((()=>{t||i(!0)}),[t]),(0,o.c)((()=>{a&&c(t)}),[a,t]),a?(0,l.jsx)(g,{...n,collapsed:s}):null}function b(e){let{lazy:t,...n}=e;const r=t?h:g;return(0,l.jsx)(r,{...n})}},3868:(e,t,n)=>{"use strict";n.d(t,{el:()=>g,qu:()=>m});var r=n(1504),a=n(3664),o=n(1148),i=n(1100),l=n(1824),s=n(7624);const c=(0,o.GS)("docusaurus.announcement.dismiss"),u=(0,o.GS)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function m(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,l.y)(),t=(0,a.c)(),[n,o]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{o(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),o(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||o(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,s.jsx)(f.Provider,{value:n,children:t})}function g(){const e=(0,r.useContext)(f);if(!e)throw new i.AH("AnnouncementBarProvider");return e}},6528:(e,t,n)=>{"use strict";n.d(t,{C:()=>h,U:()=>b});var r=n(1504),a=n(8684),o=n(1100),i=n(1148),l=n(1824),s=n(7624);const c=r.createContext(void 0),u="theme",d=(0,i.GS)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,m=e=>a.c.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),g=e=>{d.set(f(e))};function h(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.y)(),[a,o]=(0,r.useState)(m(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:a=!0}=r;t?(o(t),a&&g(t)):(o(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(a))}),[a]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const s=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||s.current?s.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:a,setColorMode:i,get isDarkTheme(){return a===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[a,i])}();return(0,s.jsx)(c.Provider,{value:n,children:t})}function b(){const e=(0,r.useContext)(c);if(null==e)throw new o.AH("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},4592:(e,t,n)=>{"use strict";n.d(t,{gc:()=>b,iy:()=>v});var r=n(1504),a=n(5172),o=n(2488),i=n(1824),l=n(9940),s=n(1100),c=n(1148),u=n(7624);const d=e=>`docs-preferred-version-${e}`,p={save:(e,t,n)=>{(0,c.GS)(d(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.GS)(d(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.GS)(d(e),{persistence:t}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const m=r.createContext(null);function g(){const e=(0,a.L0)(),t=(0,i.y)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[o,l]=(0,r.useState)((()=>f(n)));(0,r.useEffect)((()=>{l(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function a(e){const t=p.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(p.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[o,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){p.save(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function h(e){let{children:t}=e;const n=g();return(0,u.jsx)(m.Provider,{value:n,children:t})}function b(e){let{children:t}=e;return l.c1?(0,u.jsx)(h,{children:t}):(0,u.jsx)(u.Fragment,{children:t})}function y(){const e=(0,r.useContext)(m);if(!e)throw new s.AH("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=o.M);const t=(0,a.OK)(e),[n,i]=y(),{preferredVersionName:l}=n[e];return{preferredVersion:t.versions.find((e=>e.name===l))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}},6192:(e,t,n)=>{"use strict";n.d(t,{m:()=>c,y:()=>s});var r=n(1504),a=n(1100),o=n(7624);const i=Symbol("EmptyContext"),l=r.createContext(i);function s(e){let{children:t,name:n,items:a}=e;const i=(0,r.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return(0,o.jsx)(l.Provider,{value:i,children:t})}function c(){const e=(0,r.useContext)(l);if(e===i)throw new a.AH("DocsSidebarProvider");return e}},9920:(e,t,n)=>{"use strict";n.d(t,{E:()=>s,Q:()=>l});var r=n(1504),a=n(1100),o=n(7624);const i=r.createContext(null);function l(e){let{children:t,version:n}=e;return(0,o.jsx)(i.Provider,{value:n,children:t})}function s(){const e=(0,r.useContext)(i);if(null===e)throw new a.AH("DocsVersionProvider");return e}},1336:(e,t,n)=>{"use strict";n.d(t,{y:()=>f,q:()=>m});var r=n(1504),a=n(5168),o=n(1432),i=n(5592),l=n(1100);function s(e){!function(e){const t=(0,i.Uz)(),n=(0,l.yA)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}var c=n(1824),u=n(7624);const d=r.createContext(void 0);function p(){const e=function(){const e=(0,a.MF)(),{items:t}=(0,c.y)().navbar;return 0===t.length&&!e.component}(),t=(0,o.U)(),n=!e&&"mobile"===t,[i,l]=(0,r.useState)(!1);s((()=>{if(i)return l(!1),!1}));const u=(0,r.useCallback)((()=>{l((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&l(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:i})),[e,n,u,i])}function f(e){let{children:t}=e;const n=p();return(0,u.jsx)(d.Provider,{value:n,children:t})}function m(){const e=r.useContext(d);if(void 0===e)throw new l.AH("NavbarMobileSidebarProvider");return e}},5168:(e,t,n)=>{"use strict";n.d(t,{MF:()=>s,Mx:()=>c,Ub:()=>l});var r=n(1504),a=n(1100),o=n(7624);const i=r.createContext(null);function l(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,o.jsx)(i.Provider,{value:n,children:t})}function s(){const e=(0,r.useContext)(i);if(!e)throw new a.AH("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const o=(0,r.useContext)(i);if(!o)throw new a.AH("NavbarSecondaryMenuContentProvider");const[,l]=o,s=(0,a.Mh)(n);return(0,r.useEffect)((()=>{l({component:t,props:s})}),[l,t,s]),(0,r.useEffect)((()=>()=>l({component:null,props:null})),[l]),null}},204:(e,t,n)=>{"use strict";n.d(t,{m:()=>a,W:()=>o});var r=n(1504);const a="navigation-with-keyboard";function o(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},1432:(e,t,n)=>{"use strict";n.d(t,{U:()=>l});var r=n(1504),a=n(8684);const o={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function l(){const[e,t]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){t(function(){if(!a.c.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>i?o.desktop:o.mobile}())}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),e}},5864:(e,t,n)=>{"use strict";n.d(t,{W:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},3856:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{I:()=>r})},9940:(e,t,n)=>{"use strict";n.d(t,{Gw:()=>f,Md:()=>h,c1:()=>p,Uj:()=>E,b7:()=>k,Qf:()=>S,Ab:()=>x,js:()=>w,mg:()=>y});var r=n(1504),a=n(5592),o=n(5464),i=n(5172),l=n(4592),s=n(9920),c=n(6192);function u(e){return Array.from(new Set(e))}var d=n(3376);const p=!!i.L0;function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=f(t);if(e)return e}}(e):void 0:e.href}const m=(e,t)=>void 0!==e&&(0,d.Sc)(e,t),g=(e,t)=>e.some((e=>h(e,t)));function h(e,t){return"link"===e.type?m(e.href,t):"category"===e.type&&(m(e.href,t)||g(e.items,t))}function b(e,t){switch(e.type){case"category":return h(e,t)||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||h(e,t);default:return!1}}function y(e,t){return(0,r.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function v(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const a=[];return function e(t){for(const o of t)if("category"===o.type&&((0,d.Sc)(o.href,n)||e(o.items))||"link"===o.type&&(0,d.Sc)(o.href,n)){return r&&"category"!==o.type||a.unshift(o),!0}return!1}(t),a}function w(){const e=(0,c.m)(),{pathname:t}=(0,a.IT)(),n=(0,i.UF)()?.pluginData.breadcrumbs;return!1!==n&&e?v({sidebarItems:e.items,pathname:t}):null}function k(e){const{activeVersion:t}=(0,i.wB)(e),{preferredVersion:n}=(0,l.iy)(e),a=(0,i.aA)(e);return(0,r.useMemo)((()=>u([t,n,a].filter(Boolean))),[t,n,a])}function x(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function S(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${u(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function E(e){let{route:t}=e;const n=(0,a.IT)(),r=(0,s.E)(),i=t.routes,l=i.find((e=>(0,a.ot)(n.pathname,e)));if(!l)return null;const c=l.sidebar,u=c?r.docsSidebars[c]:void 0;return{docElement:(0,o.k)(i),sidebarName:c,sidebarItems:u}}},5756:(e,t,n)=>{"use strict";n.d(t,{cr:()=>f,U7:()=>d,w7:()=>m});var r=n(1504),a=n(4971),o=n(6952),i=n(5548);function l(){const e=r.useContext(i.e);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(964),c=n(8264);var u=n(7624);function d(e){let{title:t,description:n,keywords:r,image:a,children:i}=e;const l=function(e){const{siteConfig:t}=(0,c.c)(),{title:n,titleDelimiter:r}=t;return e?.trim().length?`${e.trim()} ${r} ${n}`:n}(t),{withBaseUrl:d}=(0,s.E)(),p=a?d(a,{absolute:!0}):void 0;return(0,u.jsxs)(o.c,{children:[t&&(0,u.jsx)("title",{children:l}),t&&(0,u.jsx)("meta",{property:"og:title",content:l}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),r&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),i]})}const p=r.createContext(void 0);function f(e){let{className:t,children:n}=e;const i=r.useContext(p),l=(0,a.c)(i,t);return(0,u.jsxs)(p.Provider,{value:l,children:[(0,u.jsx)(o.c,{children:(0,u.jsx)("html",{className:l})}),n]})}function m(e){let{children:t}=e;const n=l(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const o=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(f,{className:(0,a.c)(r,o),children:t})}},1100:(e,t,n)=>{"use strict";n.d(t,{AH:()=>s,Mh:()=>c,i0:()=>l,qY:()=>u,yA:()=>i});var r=n(1504),a=n(5288),o=n(7624);function i(e){const t=(0,r.useRef)(e);return(0,a.c)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function l(e){const t=(0,r.useRef)();return(0,a.c)((()=>{t.current=e})),t.current}class s extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,o.jsx)(o.Fragment,{children:e.reduceRight(((e,t)=>(0,o.jsx)(t,{children:e})),n)})}}},3376:(e,t,n)=>{"use strict";n.d(t,{Sc:()=>i,Y5:()=>l});var r=n(1504),a=n(628),o=n(8264);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function l(){const{baseUrl:e}=(0,o.c)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(a).flatMap((e=>e.routes??[])))}(n)}({routes:a.c,baseUrl:e})),[e])}},3943:(e,t,n)=>{"use strict";n.d(t,{S2:()=>c,SM:()=>p,yI:()=>f});var r=n(1504),a=n(8684),o=n(3664),i=(n(5288),n(1100)),l=n(7624);const s=r.createContext(void 0);function c(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,l.jsx)(s.Provider,{value:n,children:t})}function u(){const e=(0,r.useContext)(s);if(null==e)throw new i.AH("ScrollControllerProvider");return e}const d=()=>a.c.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),a=(0,r.useRef)(d()),o=(0,i.yA)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=d();o(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[o,n,...t])}function f(){const e=(0,r.useRef)(null),t=(0,o.c)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},4456:(e,t,n)=>{"use strict";n.d(t,{SE:()=>a,e6:()=>r});n(8264);const r="default";function a(e,t){return`docs-${e}-${t}`}},1148:(e,t,n)=>{"use strict";n.d(t,{GS:()=>s});n(1504);const r="localStorage";function a(e){let{key:t,oldValue:n,newValue:r,storage:a}=e;if(n===r)return;const o=document.createEvent("StorageEvent");o.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(o)}function o(e){if(void 0===e&&(e=r),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,i||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),i=!0),null}var t}let i=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function s(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=o(t?.persistence);return null===n?l:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const r=n.getItem(e);n.setItem(e,t),a({key:e,oldValue:r,newValue:t,storage:n})}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${t}`,r)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),a({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const r=r=>{r.storageArea===n&&r.key===e&&t(r)};return window.addEventListener("storage",r),()=>window.removeEventListener("storage",r)}catch(r){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,r),()=>{}}}}}},1616:(e,t,n)=>{"use strict";n.d(t,{D:()=>i});var r=n(8264),a=n(5592),o=n(5684);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:l}}=(0,r.c)(),{pathname:s}=(0,a.IT)(),c=(0,o.applyTrailingSlash)(s,{trailingSlash:n,baseUrl:e}),u=l===i?e:e.replace(`/${l}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(n)}${d}`}}}},7124:(e,t,n)=>{"use strict";n.d(t,{c:()=>i});var r=n(1504),a=n(5592),o=n(1100);function i(e){const t=(0,a.IT)(),n=(0,o.i0)(t),i=(0,o.yA)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},1824:(e,t,n)=>{"use strict";n.d(t,{y:()=>a});var r=n(8264);function a(){return(0,r.c)().siteConfig.themeConfig}},1600:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[a]=e.split(/[#?]/),o="/"===a||a===r?a:(i=a,n?function(e){return e.endsWith("/")?e:`${e}/`}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(a,o)}},4292:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},5684:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var a=n(1600);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}});var o=n(4292);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return o.getErrorCausalChain}})},4971:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;ta});const a=function(){for(var e,t,n=0,a="";n{"use strict";n.d(t,{iU:()=>w,Yf:()=>_,gh:()=>f,Wi:()=>j,Ep:()=>p});var r=n(5072);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;p--){var f=i[p];"."===f?o(i,p):".."===f?(o(i,p),d++):d&&(o(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&a(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};var l=n(4812);function s(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function f(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.c)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,g(),w.location);u.confirmTransitionTo(a,r,n,(function(e){e&&(w.entries[w.index]=a,d({action:r,location:a}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=w.index+e;return t>=0&&t{"use strict";var r=n(2168),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var a=f(n);a&&a!==m&&e(t,a,r)}var i=u(n);d&&(i=i.concat(d(n)));for(var l=s(t),g=s(n),h=0;h{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,o,i,l],u=0;(s=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},9600:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},1462:(e,t,n)=>{"use strict";n.r(t)},1496:(e,t,n)=>{"use strict";n.r(t)},2272:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function a(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),c=o.querySelector(r.barSelector),u=r.speed,d=r.easing;return o.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(c,i(e,u,d)),1===e?(s(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){s(o,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,i=t.querySelector(r.barSelector),l=e?"-100":o(n.status||0),c=document.querySelector(r.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&f(a),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;c(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);c(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},7248:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},452:(e,t,n)=>{const r=n(7248),a=n(8284),o=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...o,...Object.keys(Prism.languages)];a(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(1976).resolve(t)],delete Prism.languages[e],n(1976)(t),o.add(e)}))}i.silent=!1,e.exports=i},1808:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,l=i.length;-1!==n.code.indexOf(a=t(r,l));)++l;return i[l]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=o.length);s++){var c=l[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=o[a],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(r,u),m=p.indexOf(f);if(m>-1){++a;var g=p.substring(0,m),h=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),b=p.substring(m+f.length),y=[];g&&y.push.apply(y,i([g])),y.push(h),b&&y.push.apply(y,i([b])),"string"==typeof c?l.splice.apply(l,[s,1].concat(y)):c.content=y}}else c.content&&i(c.content)}return l}(n.tokens)}}}})}(Prism)},8660:(e,t,n)=>{var r={"./":452};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=8660},1976:(e,t,n)=>{var r={"./":452};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=1976},8284:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n "));var l={},s=e[r];if(s){function c(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in l))for(var i in a(t,o),l[t]=!0,n[t])l[i]=!0}t(s.require,c),t(s.optional,c),t(s.modify,c)}n[r]=l,o.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(o,i,l){var s=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var o=r[a];t[a]="string"==typeof o?{title:o}:o}}return t}(o),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var o=e[a];t(o&&o.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[r]||r}}(s);i=i.map(c),l=(l||[]).map(c);var u=n(i),d=n(l);i.forEach((function e(n){var r=s[n];t(r&&r.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=r(s),m=u;a(m);){for(var g in p={},m){var h=s[g];t(h&&h.modify,(function(e){e in d&&(p[e]=!0)}))}for(var b in d)if(!(b in u))for(var y in f(b))if(y in u){p[b]=!0;break}for(var v in m=p)u[v]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,a){var o=a?a.series:void 0,i=a?a.parallel:e,l={},s={};function c(e){if(e in l)return l[e];s[e]=!0;var a,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)a=r(e);else{var p=i(u.map((function(e){var t=c(e);return delete s[e],t})));o?a=o(p,(function(){return r(e)})):r(e)}return l[e]=a}for(var u in n)c(u);var d=[];for(var p in s)d.push(l[p]);return i(d)}(f,u,t,n)}};return w}}();e.exports=t},9776:(e,t,n)=>{"use strict";var r=n(9143);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new 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:o,resetWarningCache:a};return n.PropTypes=n,n}},3268:(e,t,n)=>{e.exports=n(9776)()},9143:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},9516:(e,t,n)=>{"use strict";var r=n(1504),a=n(4712);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n