From d139a44b5e9e924c5ad5aa1706bb911da7f6d1e6 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 24 Jul 2024 16:01:44 +0000 Subject: [PATCH] deploy: 946b39156c52480616b39055522e9ec3aec28efd --- 404.html | 2 +- assets/js/528fb942.35c77b24.js | 1 + assets/js/528fb942.aa5f7a3a.js | 1 - assets/js/5854caf2.1ebc43af.js | 1 + assets/js/5854caf2.7ffdb379.js | 1 - assets/js/b2f554cd.a096084c.js | 1 + assets/js/b2f554cd.f3c405aa.js | 1 - ...n.0b800553.js => runtime~main.100755b6.js} | 2 +- blog.html | Bin 72075 -> 72664 bytes blog/archive.html | 2 +- blog/atom.xml | 9 +++++++++ blog/docusaurus-plugin.html | 2 +- blog/frontend-environment.html | Bin 31213 -> 31802 bytes blog/frontend-observability.html | Bin 14297 -> 14297 bytes blog/rss.xml | 9 +++++++++ blog/tags.html | 2 +- blog/tags/custom.html | Bin 41247 -> 41247 bytes blog/tags/dependencies.html | 13 +++++++++++-- blog/tags/docusaurus.html | Bin 41274 -> 41274 bytes blog/tags/environment.html | 13 +++++++++++-- blog/tags/frontend.html | Bin 36110 -> 36699 bytes blog/tags/git.html | Bin 28761 -> 29350 bytes blog/tags/observability.html | Bin 12498 -> 12498 bytes blog/tags/plugin.html | Bin 41247 -> 41247 bytes blog/tags/transplier.html | Bin 28812 -> 29401 bytes docs/2024/07/07-15.html | 2 +- docs/2024/07/07-16.html | 2 +- docs/2024/07/07-17.html | 2 +- docs/2024/07/07-19.html | 2 +- docs/2024/07/07-23.html | 2 +- docs/2024/07/07-24.html | 2 +- docs/Frontend/actions-core.html | 2 +- docs/Frontend/fe-conf-import.html | 2 +- docs/Frontend/js-type.html | 2 +- docs/Frontend/next-14.html | 2 +- docs/Frontend/popover.html | 2 +- docs/Frontend/tanstack-table.html | 2 +- docs/Frontend/woowa-state-manage.html | 2 +- docs/OS/install_wsl.html | 2 +- docs/OS/memo.html | 2 +- docs/PL/intro-programming-language.html | 2 +- docs/Tips/advanced-search.html | 2 +- docs/Tips/command-tree.html | 2 +- docs/Tips/git-alias.html | 2 +- docs/Tips/githubstatus.html | 2 +- docs/Tips/how-to-speak.html | 2 +- docs/Tips/pets.html | 2 +- index.html | Bin 6309 -> 6309 bytes 48 files changed, 70 insertions(+), 34 deletions(-) create mode 100644 assets/js/528fb942.35c77b24.js delete mode 100644 assets/js/528fb942.aa5f7a3a.js create mode 100644 assets/js/5854caf2.1ebc43af.js delete mode 100644 assets/js/5854caf2.7ffdb379.js create mode 100644 assets/js/b2f554cd.a096084c.js delete mode 100644 assets/js/b2f554cd.f3c405aa.js rename assets/js/{runtime~main.0b800553.js => runtime~main.100755b6.js} (59%) diff --git a/404.html b/404.html index 835027f..6f58529 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ Page Not Found • Wandered2LA - + diff --git a/assets/js/528fb942.35c77b24.js b/assets/js/528fb942.35c77b24.js new file mode 100644 index 0000000..8cbb962 --- /dev/null +++ b/assets/js/528fb942.35c77b24.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:()=>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.aa5f7a3a.js b/assets/js/528fb942.aa5f7a3a.js deleted file mode 100644 index 752b5db..0000000 --- a/assets/js/528fb942.aa5f7a3a.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 r=s(7624),i=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:12.84,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,i.M)(),...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.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,r.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,r.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,r.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,r.jsx)(e.admonition,{title:"\ucc38\uace0",type:"important",children:(0,r.jsx)(e.p,{children:"Youtube \ubc0f toss tech blog\ub97c \ucc38\uace0\ud558\uc5ec \uc791\uc131\ud55c \uae00 \uc785\ub2c8\ub2e4."})}),"\n",(0,r.jsx)(e.h2,{id:"dependencies-in-packagejson",children:"dependencies in Package.json"}),"\n",(0,r.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,r.jsx)(e.code,{children:"package.json"})," \ub0b4\uc758 ",(0,r.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,r.jsx)(e.br,{}),"\n","\ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud558\ub294 \uc790\uc138\ud55c \ubc29\ubc95\uc740 ",(0,r.jsx)(e.a,{href:"https://docs.npmjs.com/misc/semver",children:"semver"}),"\ub97c \ucc38\uace0"]}),"\n",(0,r.jsxs)(e.p,{children:["\ub9cc\uc57d \uac1c\ubc1c\uc911\uc5d0\ub9cc \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc77c \uacbd\uc6b0 ",(0,r.jsx)(e.code,{children:"devDependencies"}),"\ud544\ub4dc\ub97c \ud65c\uc6a9\ud558\uba70"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-bash",children:"npm install some-package --save-dev\n"})}),"\n",(0,r.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,r.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud55c\ub2e4.",(0,r.jsx)(e.br,{}),"\n","\uc5ec\uae30\uc11c \ub9cc\uc57d \ub0b4\uac00 clone\ub41c repository\uc5d0\uc11c ",(0,r.jsx)(e.code,{children:"npm install"}),"\ud588\uc744 \uacbd\uc6b0 npm\uc740 \uc774\ub97c \ud504\ub85c\uc81d\ud2b8\ub97c",(0,r.jsx)(e.br,{}),"\n","\uac1c\ubc1c\uc911\uc774\ub77c\uace0 \uc778\uc2dd\ud558\uace0 ",(0,r.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud558\ub2c8 \uc720\uc758\ud560 \uac83."]}),"\n",(0,r.jsxs)(e.p,{children:["\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ubcf8\uc778\ub9cc\uc758 plugin\uc744 \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,r.jsx)(e.code,{children:"peerDependencies"}),"\uc778\ub370",(0,r.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,r.jsx)(e.br,{}),"\n","\ub9cc\uc57d \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc5d0\uc11c \ud328\ud0a4\uc9c0\ub97c ",(0,r.jsx)(e.code,{children:"peerDependencies"}),"\ub85c \uba85\uc2dc\ud560 \uacbd\uc6b0 \ud328\ud0a4\uc9c0\ub97c \uc81c\uacf5\ud558\ub294 \ucc45\uc784\uc744",(0,r.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,r.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,r.jsx)(e.pre,{children:(0,r.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,r.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc774 peerDependency\ub97c \uc0ac\uc6a9\ud558\ub294 ",(0,r.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,r.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,r.jsx)(e.code,{children:"peerDependencies"}),"\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0",(0,r.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,r.jsx)(e.h3,{id:"dependencies\uc758-\ubb38\uc81c\uc810",children:"dependencies\uc758 \ubb38\uc81c\uc810"}),"\n",(0,r.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \ubb38\uc81c\ub9d0\uace0\ub3c4 ",(0,r.jsx)(e.code,{children:"npm/node_modules"}),"\uc758 \ubb38\uc81c\ub294 ",(0,r.jsx)(e.strong,{children:"\uc720\ub839\uc758\uc874\uc131(Phantom Dependency)"})," \ud604\uc0c1\uc774\ub2e4",(0,r.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,r.jsx)(e.br,{}),"\n","\ud638\uc774\uc2a4\ud305 \uae30\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4"]}),"\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.img,{alt:"Hoisting Tree",src:s(6112).c+"",width:"1024",height:"458"})}),"\n",(0,r.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,r.jsx)(e.br,{}),"\n","\uc9c1\uc811 \uc758\uc874\ud558\uace0 \uc788\uc9c0 \uc54a\uc558\ub358 ",(0,r.jsx)(e.code,{children:"B(1.0)"})," \ud328\ud0a4\uc9c0\ub97c \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.",(0,r.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,r.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,r.jsxs)(e.p,{children:["\ud1a0\uc2a4\ud300\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,r.jsx)(e.code,{children:"Yarn Berry + PnP"}),"\ub97c \ub3c4\uc785\ud558\uba70 \ud574\uacb0\ud588\ub2e4.",(0,r.jsx)(e.br,{}),"\n","Yarn Berry\ub294 ",(0,r.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,r.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,r.jsx)(e.br,{}),"\n",(0,r.jsx)(e.code,{children:".yarn/cache"}),"\ud3f4\ub354\uc5d0 \uc758\uc874\uc131 \uc815\ubcf4\ub97c \uc800\uc7a5\ud55c\ub2e4 \ub610\ud55c ",(0,r.jsx)(e.code,{children:".pnp.cjs"})," \ud30c\uc77c\uc5d0 \uc758\uc874\uc131\uc744 \ucc3e\uc744 \uc218 \uc788\ub294",(0,r.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,r.jsxs)(e.p,{children:["yarn\uc740 \uae30\uc874 node.js\uc758 ",(0,r.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,r.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,r.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,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"node_modules\uac00 \uc5c6\uc74c -> \ube60\ub978 \uc124\uce58 \uac00\ub2a5"}),"\n",(0,r.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,r.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,r.jsx)(e.h3,{id:"zero-install",children:"Zero Install"}),"\n",(0,r.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,r.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,r.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,r.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,r.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,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:"clone \ud639\uc740 branch\ubcc0\uacbd\uc2dc yarn install \uc2e4\ud589x"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.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,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:"CI\ub3d9\uc791\uc2dc \uc758\uc874\uc131 \uc124\uce58\uc2dc\uac04 \uc808\uc57d"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.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,r.jsx)(e.br,{}),"\n","\ubc14\ub85c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\uc5ec \uc2dc\uac04\uc808\uc57d"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(e.h2,{id:"bundler",children:"Bundler"}),"\n",(0,r.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,r.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,r.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,r.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,r.jsx)(e.strong,{children:"\ubc88\ub4e4\ub9c1(Bundling)"})," \uc774\ub77c\ub294 \uac1c\ub150\uc774 \ud0c4\uc0dd\ud558\uace0",(0,r.jsx)(e.br,{}),"\n","CommonJS\uc758 ",(0,r.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,r.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,r.jsxs)(e.p,{children:["\ubaa8\ub4c8\uc758 \ud0c4\uc0dd\uacfc \ud568\uaed8 \uc0dd\uaca8\ub09c \ubc88\ub4e4\ub7ec\ub294 ",(0,r.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,r.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,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"Resolution"}),"\n",(0,r.jsx)(e.li,{children:"Load"}),"\n",(0,r.jsx)(e.li,{children:"Optimization"}),"\n"]}),"\n",(0,r.jsx)(e.h3,{id:"resolution",children:"Resolution"}),"\n",(0,r.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,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-tsx",children:"import { App } from './App';\n"})}),"\n",(0,r.jsxs)(e.p,{children:["App\uc744 import \ud558\ub294\uacbd\uc6b0 ",(0,r.jsx)(e.code,{children:"./App"}),"\uc758 \uc815\ud655\ud55c \uacbd\ub85c\ub97c \ud0d0\uc0c9\ud55c\ub2e4 (App.js, App.ts, App.tsx)",(0,r.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,r.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,r.jsx)(e.h3,{id:"load",children:"Load"}),"\n",(0,r.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,r.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,r.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,r.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub9c1\uacfc\uc815\uc5d0\uc11c ",(0,r.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,r.jsx)(e.br,{}),"\n","\ud615\ud0dc\ub85c \ubc1c\uc804\ud588\ub2e4."]}),"\n",(0,r.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,r.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,r.jsx)(e.br,{}),"\n","\ud568\uc218\uc758 \uacbd\uc6b0 ",(0,r.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,r.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,r.jsx)(e.h3,{id:"optimization",children:"Optimization"}),"\n",(0,r.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,r.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,r.jsx)(e.br,{}),"\n","\ub450 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud568"]}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"Minification (Compression + Mangling)"}),"\n",(0,r.jsx)(e.li,{children:"Tree Shaking"}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"1-1. Minification - Compression \ucf54\ub4dc\uc758 text\ub97c \ucd5c\ub300\ud55c \uc555\ucd95"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:"undefined -> void 0"}),"\n",(0,r.jsx)(e.li,{children:"2 + 3 -> 5"}),"\n",(0,r.jsx)(e.li,{children:"!a && !b -> !(a || b)"}),"\n",(0,r.jsx)(e.li,{children:"Infinity -> 1/0"}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"1-2. Minification - Mangling \ubcc0\uc218,Class,\ud30c\uc77c\uc774\ub984 \ucd5c\uc801\ud654"})}),"\n",(0,r.jsx)(e.pre,{children:(0,r.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,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"2. Tree Shaking \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc \uc81c\uac70"})}),"\n",(0,r.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,r.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,r.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,r.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,r.jsx)(e.h2,{id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",children:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9"}),"\n",(0,r.jsx)(e.h2,{id:"\ucc38\uace0",children:"\ucc38\uace0"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://programmingsummaries.tistory.com/385",children:"package.json \ubc88\uc5ed"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,i.M)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(a,{...n})}):a(n)}},6112:(n,e,s)=>{s.d(e,{c:()=>r});const r=s.p+"assets/images/hoisting-tree-45c2932b3dc3597787977575c84561d2.png"},2172:(n,e,s)=>{s.d(e,{I:()=>c,M:()=>d});var r=s(1504);const i={},l=r.createContext(i);function d(n){const e=r.useContext(l);return r.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(i):n.components||i:d(n.components),r.createElement(l.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 new file mode 100644 index 0000000..af1405b --- /dev/null +++ b/assets/js/5854caf2.1ebc43af.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:()=>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.7ffdb379.js b/assets/js/5854caf2.7ffdb379.js deleted file mode 100644 index 35683ed..0000000 --- a/assets/js/5854caf2.7ffdb379.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 r=s(7624),i=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:12.84,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,i.M)(),...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.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,r.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,r.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,r.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,r.jsx)(e.admonition,{title:"\ucc38\uace0",type:"important",children:(0,r.jsx)(e.p,{children:"Youtube \ubc0f toss tech blog\ub97c \ucc38\uace0\ud558\uc5ec \uc791\uc131\ud55c \uae00 \uc785\ub2c8\ub2e4."})}),"\n",(0,r.jsx)(e.h2,{id:"dependencies-in-packagejson",children:"dependencies in Package.json"}),"\n",(0,r.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,r.jsx)(e.code,{children:"package.json"})," \ub0b4\uc758 ",(0,r.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,r.jsx)(e.br,{}),"\n","\ubc84\uc804\ubc94\uc704\ub97c \uc9c0\uc815\ud558\ub294 \uc790\uc138\ud55c \ubc29\ubc95\uc740 ",(0,r.jsx)(e.a,{href:"https://docs.npmjs.com/misc/semver",children:"semver"}),"\ub97c \ucc38\uace0"]}),"\n",(0,r.jsxs)(e.p,{children:["\ub9cc\uc57d \uac1c\ubc1c\uc911\uc5d0\ub9cc \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc77c \uacbd\uc6b0 ",(0,r.jsx)(e.code,{children:"devDependencies"}),"\ud544\ub4dc\ub97c \ud65c\uc6a9\ud558\uba70"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-bash",children:"npm install some-package --save-dev\n"})}),"\n",(0,r.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,r.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud55c\ub2e4.",(0,r.jsx)(e.br,{}),"\n","\uc5ec\uae30\uc11c \ub9cc\uc57d \ub0b4\uac00 clone\ub41c repository\uc5d0\uc11c ",(0,r.jsx)(e.code,{children:"npm install"}),"\ud588\uc744 \uacbd\uc6b0 npm\uc740 \uc774\ub97c \ud504\ub85c\uc81d\ud2b8\ub97c",(0,r.jsx)(e.br,{}),"\n","\uac1c\ubc1c\uc911\uc774\ub77c\uace0 \uc778\uc2dd\ud558\uace0 ",(0,r.jsx)(e.code,{children:"devDependencies"}),"\uc5d0 \ucd94\uac00\ud558\ub2c8 \uc720\uc758\ud560 \uac83."]}),"\n",(0,r.jsxs)(e.p,{children:["\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ubcf8\uc778\ub9cc\uc758 plugin\uc744 \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,r.jsx)(e.code,{children:"peerDependencies"}),"\uc778\ub370",(0,r.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,r.jsx)(e.br,{}),"\n","\ub9cc\uc57d \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc5d0\uc11c \ud328\ud0a4\uc9c0\ub97c ",(0,r.jsx)(e.code,{children:"peerDependencies"}),"\ub85c \uba85\uc2dc\ud560 \uacbd\uc6b0 \ud328\ud0a4\uc9c0\ub97c \uc81c\uacf5\ud558\ub294 \ucc45\uc784\uc744",(0,r.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,r.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,r.jsx)(e.pre,{children:(0,r.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,r.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc774 peerDependency\ub97c \uc0ac\uc6a9\ud558\ub294 ",(0,r.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,r.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,r.jsx)(e.code,{children:"peerDependencies"}),"\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0",(0,r.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,r.jsx)(e.h3,{id:"dependencies\uc758-\ubb38\uc81c\uc810",children:"dependencies\uc758 \ubb38\uc81c\uc810"}),"\n",(0,r.jsxs)(e.p,{children:["\uc704\uc640 \uac19\uc740 \ubb38\uc81c\ub9d0\uace0\ub3c4 ",(0,r.jsx)(e.code,{children:"npm/node_modules"}),"\uc758 \ubb38\uc81c\ub294 ",(0,r.jsx)(e.strong,{children:"\uc720\ub839\uc758\uc874\uc131(Phantom Dependency)"})," \ud604\uc0c1\uc774\ub2e4",(0,r.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,r.jsx)(e.br,{}),"\n","\ud638\uc774\uc2a4\ud305 \uae30\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4"]}),"\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.img,{alt:"Hoisting Tree",src:s(6112).c+"",width:"1024",height:"458"})}),"\n",(0,r.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,r.jsx)(e.br,{}),"\n","\uc9c1\uc811 \uc758\uc874\ud558\uace0 \uc788\uc9c0 \uc54a\uc558\ub358 ",(0,r.jsx)(e.code,{children:"B(1.0)"})," \ud328\ud0a4\uc9c0\ub97c \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.",(0,r.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,r.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,r.jsxs)(e.p,{children:["\ud1a0\uc2a4\ud300\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,r.jsx)(e.code,{children:"Yarn Berry + PnP"}),"\ub97c \ub3c4\uc785\ud558\uba70 \ud574\uacb0\ud588\ub2e4.",(0,r.jsx)(e.br,{}),"\n","Yarn Berry\ub294 ",(0,r.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,r.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,r.jsx)(e.br,{}),"\n",(0,r.jsx)(e.code,{children:".yarn/cache"}),"\ud3f4\ub354\uc5d0 \uc758\uc874\uc131 \uc815\ubcf4\ub97c \uc800\uc7a5\ud55c\ub2e4 \ub610\ud55c ",(0,r.jsx)(e.code,{children:".pnp.cjs"})," \ud30c\uc77c\uc5d0 \uc758\uc874\uc131\uc744 \ucc3e\uc744 \uc218 \uc788\ub294",(0,r.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,r.jsxs)(e.p,{children:["yarn\uc740 \uae30\uc874 node.js\uc758 ",(0,r.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,r.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,r.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,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"node_modules\uac00 \uc5c6\uc74c -> \ube60\ub978 \uc124\uce58 \uac00\ub2a5"}),"\n",(0,r.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,r.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,r.jsx)(e.h3,{id:"zero-install",children:"Zero Install"}),"\n",(0,r.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,r.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,r.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,r.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,r.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,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:"clone \ud639\uc740 branch\ubcc0\uacbd\uc2dc yarn install \uc2e4\ud589x"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.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,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:"CI\ub3d9\uc791\uc2dc \uc758\uc874\uc131 \uc124\uce58\uc2dc\uac04 \uc808\uc57d"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.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,r.jsx)(e.br,{}),"\n","\ubc14\ub85c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\uc5ec \uc2dc\uac04\uc808\uc57d"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(e.h2,{id:"bundler",children:"Bundler"}),"\n",(0,r.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,r.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,r.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,r.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,r.jsx)(e.strong,{children:"\ubc88\ub4e4\ub9c1(Bundling)"})," \uc774\ub77c\ub294 \uac1c\ub150\uc774 \ud0c4\uc0dd\ud558\uace0",(0,r.jsx)(e.br,{}),"\n","CommonJS\uc758 ",(0,r.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,r.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,r.jsxs)(e.p,{children:["\ubaa8\ub4c8\uc758 \ud0c4\uc0dd\uacfc \ud568\uaed8 \uc0dd\uaca8\ub09c \ubc88\ub4e4\ub7ec\ub294 ",(0,r.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,r.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,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"Resolution"}),"\n",(0,r.jsx)(e.li,{children:"Load"}),"\n",(0,r.jsx)(e.li,{children:"Optimization"}),"\n"]}),"\n",(0,r.jsx)(e.h3,{id:"resolution",children:"Resolution"}),"\n",(0,r.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,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-tsx",children:"import { App } from './App';\n"})}),"\n",(0,r.jsxs)(e.p,{children:["App\uc744 import \ud558\ub294\uacbd\uc6b0 ",(0,r.jsx)(e.code,{children:"./App"}),"\uc758 \uc815\ud655\ud55c \uacbd\ub85c\ub97c \ud0d0\uc0c9\ud55c\ub2e4 (App.js, App.ts, App.tsx)",(0,r.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,r.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,r.jsx)(e.h3,{id:"load",children:"Load"}),"\n",(0,r.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,r.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,r.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,r.jsx)(e.br,{}),"\n","\ubc88\ub4e4\ub9c1\uacfc\uc815\uc5d0\uc11c ",(0,r.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,r.jsx)(e.br,{}),"\n","\ud615\ud0dc\ub85c \ubc1c\uc804\ud588\ub2e4."]}),"\n",(0,r.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,r.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,r.jsx)(e.br,{}),"\n","\ud568\uc218\uc758 \uacbd\uc6b0 ",(0,r.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,r.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,r.jsx)(e.h3,{id:"optimization",children:"Optimization"}),"\n",(0,r.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,r.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,r.jsx)(e.br,{}),"\n","\ub450 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud568"]}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"Minification (Compression + Mangling)"}),"\n",(0,r.jsx)(e.li,{children:"Tree Shaking"}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"1-1. Minification - Compression \ucf54\ub4dc\uc758 text\ub97c \ucd5c\ub300\ud55c \uc555\ucd95"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:"undefined -> void 0"}),"\n",(0,r.jsx)(e.li,{children:"2 + 3 -> 5"}),"\n",(0,r.jsx)(e.li,{children:"!a && !b -> !(a || b)"}),"\n",(0,r.jsx)(e.li,{children:"Infinity -> 1/0"}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"1-2. Minification - Mangling \ubcc0\uc218,Class,\ud30c\uc77c\uc774\ub984 \ucd5c\uc801\ud654"})}),"\n",(0,r.jsx)(e.pre,{children:(0,r.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,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"2. Tree Shaking \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc \uc81c\uac70"})}),"\n",(0,r.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,r.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,r.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,r.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,r.jsx)(e.h2,{id:"git-\ubd84\uc11d-\ubc0f-\ud65c\uc6a9",children:"Git \ubd84\uc11d \ubc0f \ud65c\uc6a9"}),"\n",(0,r.jsx)(e.h2,{id:"\ucc38\uace0",children:"\ucc38\uace0"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://programmingsummaries.tistory.com/385",children:"package.json \ubc88\uc5ed"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,r.jsx)(e.li,{children:(0,r.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,i.M)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(a,{...n})}):a(n)}},6112:(n,e,s)=>{s.d(e,{c:()=>r});const r=s.p+"assets/images/hoisting-tree-45c2932b3dc3597787977575c84561d2.png"},2172:(n,e,s)=>{s.d(e,{I:()=>c,M:()=>d});var r=s(1504);const i={},l=r.createContext(i);function d(n){const e=r.useContext(l);return r.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(i):n.components||i:d(n.components),r.createElement(l.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 new file mode 100644 index 0000000..4c24de1 --- /dev/null +++ b/assets/js/b2f554cd.a096084c.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":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.f3c405aa.js b/assets/js/b2f554cd.f3c405aa.js deleted file mode 100644 index 2f7db93..0000000 --- a/assets/js/b2f554cd.f3c405aa.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":12.84,"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\\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/runtime~main.0b800553.js b/assets/js/runtime~main.100755b6.js similarity index 59% rename from assets/js/runtime~main.0b800553.js rename to assets/js/runtime~main.100755b6.js index a84b4fe..ed8c877 100644 --- a/assets/js/runtime~main.0b800553.js +++ b/assets/js/runtime~main.100755b6.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,f,c,d,t={},r={};function b(e){var a=r[e];if(void 0!==a)return a.exports;var f=r[e]={id:e,loaded:!1,exports:{}};return t[e].call(f.exports,f,f.exports,b),f.loaded=!0,f.exports}b.m=t,b.c=r,e=[],b.O=(a,f,c,d)=>{if(!f){var t=1/0;for(i=0;i=d)&&Object.keys(b.O).every((e=>b.O[e](f[o])))?f.splice(o--,1):(r=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[f,c,d]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var d=Object.create(null);b.r(d);var t={};a=a||[null,f({}),f([]),f(f)];for(var r=2&c&&e;"object"==typeof r&&!~a.indexOf(r);r=f(r))Object.getOwnPropertyNames(r).forEach((a=>t[a]=()=>e[a]));return t.default=()=>e,b.d(d,t),d},b.d=(e,a)=>{for(var f in a)b.o(a,f)&&!b.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,f)=>(b.f[f](e,a),a)),[])),b.u=e=>"assets/js/"+({168:"576f2e3a",175:"e9d548ba",564:"c2f3c969",826:"60be8e52",1024:"09b05c80",1232:"f1b3bdd2",1456:"5854caf2",1732:"73645fa8",1832:"a556cc0e",1932:"ece636e5",2180:"60262e21",2392:"6875c492",2520:"dda9d876",2564:"32f9d351",2936:"26301e9e",3040:"0ada2768",3376:"acbb0b46",3516:"05c7f781",3592:"108b598b",3664:"528fb942",4056:"2b39322a",4304:"5e95c892",4328:"27e351f1",4576:"18559978",4666:"a94703ab",4976:"a6aa9e1f",4991:"19d4caa7",5168:"608ae6a4",5244:"b9f07e2a",5396:"c847a044",5512:"814f3328",5696:"935f2afb",5908:"d184639a",6292:"b2b675dd",6344:"ccc49370",6500:"a7bd4aaa",6752:"17896441",6792:"62ca52c1",6824:"c98ea65b",6880:"b2f554cd",7028:"9e4087bc",7140:"a6930543",7152:"454824b6",7313:"a2247295",7470:"4e5aa5ff",7560:"c6f71f2b",7884:"0ef3d8a7",7976:"9457f915",8048:"752283db",8056:"55c24532",8171:"2497986c",8412:"01a85c17",8552:"1df93b7f",8600:"a80da1cf",8728:"479321cf",8816:"2f4f79ed",8912:"5daea7fd",9112:"a7023ddc",9156:"4cd4f0a7",9232:"419b793c",9293:"45773d59",9772:"9b36ccd3",9904:"99a66f7b",9936:"6b17ea64"}[e]||e)+"."+{168:"18cc718a",175:"351f48a6",564:"a2b34908",606:"e8e1f57d",826:"90e4d4be",1024:"04fef362",1232:"3585e231",1456:"7ffdb379",1732:"923d1ef1",1832:"072b83a7",1932:"12b6c383",2180:"02085f51",2392:"7936008a",2520:"67e5da40",2564:"5798d4f8",2936:"2b0a4256",3040:"077f937e",3376:"5c74f90c",3516:"1f47f4c8",3592:"bb0c08a4",3664:"aa5f7a3a",4056:"86050c0b",4304:"b69897bf",4328:"6d257302",4552:"2986e2dc",4576:"60bbf70d",4666:"09f4ec21",4976:"b015623b",4991:"fff701a3",5168:"3e0329b0",5244:"a29bd618",5396:"396fa3be",5512:"3082ee0b",5696:"297fd9e8",5908:"fb7ffa95",6292:"5843a1db",6344:"59bd7dd9",6500:"47857033",6752:"bb08baf3",6792:"84134461",6824:"143de7aa",6880:"f3c405aa",7028:"aea41b19",7140:"fed7a02b",7152:"adecfd95",7313:"41d55fd6",7470:"ff44e729",7560:"d977849d",7884:"54478903",7976:"68a4aea9",8048:"912721a7",8056:"b4a6bf59",8171:"999fc157",8412:"1390932d",8552:"fcb1a7cd",8600:"7ed26d3f",8728:"817bb33f",8816:"421ce660",8912:"9f717967",9112:"45cf2a6f",9156:"7d871861",9232:"968b6a33",9293:"78f3bb0e",9443:"958d450c",9772:"003e0215",9904:"f6c2b2d4",9936:"19ba6e62"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),c={},d="wanderedtola.blog:",b.l=(e,a,f,t)=>{if(c[e])c[e].push(a);else{var r,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{r.onerror=r.onload=null,clearTimeout(s);var d=c[e];if(delete c[e],r.parentNode&&r.parentNode.removeChild(r),d&&d.forEach((e=>e(f))),a)return a(f)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=u.bind(null,r.onerror),r.onload=u.bind(null,r.onload),o&&document.head.appendChild(r)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/",b.gca=function(e){return e={17896441:"6752",18559978:"4576","576f2e3a":"168",e9d548ba:"175",c2f3c969:"564","60be8e52":"826","09b05c80":"1024",f1b3bdd2:"1232","5854caf2":"1456","73645fa8":"1732",a556cc0e:"1832",ece636e5:"1932","60262e21":"2180","6875c492":"2392",dda9d876:"2520","32f9d351":"2564","26301e9e":"2936","0ada2768":"3040",acbb0b46:"3376","05c7f781":"3516","108b598b":"3592","528fb942":"3664","2b39322a":"4056","5e95c892":"4304","27e351f1":"4328",a94703ab:"4666",a6aa9e1f:"4976","19d4caa7":"4991","608ae6a4":"5168",b9f07e2a:"5244",c847a044:"5396","814f3328":"5512","935f2afb":"5696",d184639a:"5908",b2b675dd:"6292",ccc49370:"6344",a7bd4aaa:"6500","62ca52c1":"6792",c98ea65b:"6824",b2f554cd:"6880","9e4087bc":"7028",a6930543:"7140","454824b6":"7152",a2247295:"7313","4e5aa5ff":"7470",c6f71f2b:"7560","0ef3d8a7":"7884","9457f915":"7976","752283db":"8048","55c24532":"8056","2497986c":"8171","01a85c17":"8412","1df93b7f":"8552",a80da1cf:"8600","479321cf":"8728","2f4f79ed":"8816","5daea7fd":"8912",a7023ddc:"9112","4cd4f0a7":"9156","419b793c":"9232","45773d59":"9293","9b36ccd3":"9772","99a66f7b":"9904","6b17ea64":"9936"}[e]||e,b.p+b.u(e)},(()=>{var e={296:0,2176:0};b.f.j=(a,f)=>{var c=b.o(e,a)?e[a]:void 0;if(0!==c)if(c)f.push(c[2]);else if(/^2(17|9)6$/.test(a))e[a]=0;else{var d=new Promise(((f,d)=>c=e[a]=[f,d]));f.push(c[2]=d);var t=b.p+b.u(a),r=new Error;b.l(t,(f=>{if(b.o(e,a)&&(0!==(c=e[a])&&(e[a]=void 0),c)){var d=f&&("load"===f.type?"missing":f.type),t=f&&f.target&&f.target.src;r.message="Loading chunk "+a+" failed.\n("+d+": "+t+")",r.name="ChunkLoadError",r.type=d,r.request=t,c[1](r)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,f)=>{var c,d,t=f[0],r=f[1],o=f[2],n=0;if(t.some((a=>0!==e[a]))){for(c in r)b.o(r,c)&&(b.m[c]=r[c]);if(o)var i=o(b)}for(a&&a(f);n{"use strict";var e,a,c,f,d,t={},r={};function b(e){var a=r[e];if(void 0!==a)return a.exports;var c=r[e]={id:e,loaded:!1,exports:{}};return t[e].call(c.exports,c,c.exports,b),c.loaded=!0,c.exports}b.m=t,b.c=r,e=[],b.O=(a,c,f,d)=>{if(!c){var t=1/0;for(i=0;i=d)&&Object.keys(b.O).every((e=>b.O[e](c[o])))?c.splice(o--,1):(r=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[c,f,d]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},c=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var d=Object.create(null);b.r(d);var t={};a=a||[null,c({}),c([]),c(c)];for(var r=2&f&&e;"object"==typeof r&&!~a.indexOf(r);r=c(r))Object.getOwnPropertyNames(r).forEach((a=>t[a]=()=>e[a]));return t.default=()=>e,b.d(d,t),d},b.d=(e,a)=>{for(var c in a)b.o(a,c)&&!b.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,get:a[c]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,c)=>(b.f[c](e,a),a)),[])),b.u=e=>"assets/js/"+({168:"576f2e3a",175:"e9d548ba",564:"c2f3c969",826:"60be8e52",1024:"09b05c80",1232:"f1b3bdd2",1456:"5854caf2",1732:"73645fa8",1832:"a556cc0e",1932:"ece636e5",2180:"60262e21",2392:"6875c492",2520:"dda9d876",2564:"32f9d351",2936:"26301e9e",3040:"0ada2768",3376:"acbb0b46",3516:"05c7f781",3592:"108b598b",3664:"528fb942",4056:"2b39322a",4304:"5e95c892",4328:"27e351f1",4576:"18559978",4666:"a94703ab",4976:"a6aa9e1f",4991:"19d4caa7",5168:"608ae6a4",5244:"b9f07e2a",5396:"c847a044",5512:"814f3328",5696:"935f2afb",5908:"d184639a",6292:"b2b675dd",6344:"ccc49370",6500:"a7bd4aaa",6752:"17896441",6792:"62ca52c1",6824:"c98ea65b",6880:"b2f554cd",7028:"9e4087bc",7140:"a6930543",7152:"454824b6",7313:"a2247295",7470:"4e5aa5ff",7560:"c6f71f2b",7884:"0ef3d8a7",7976:"9457f915",8048:"752283db",8056:"55c24532",8171:"2497986c",8412:"01a85c17",8552:"1df93b7f",8600:"a80da1cf",8728:"479321cf",8816:"2f4f79ed",8912:"5daea7fd",9112:"a7023ddc",9156:"4cd4f0a7",9232:"419b793c",9293:"45773d59",9772:"9b36ccd3",9904:"99a66f7b",9936:"6b17ea64"}[e]||e)+"."+{168:"18cc718a",175:"351f48a6",564:"a2b34908",606:"e8e1f57d",826:"90e4d4be",1024:"04fef362",1232:"3585e231",1456:"1ebc43af",1732:"923d1ef1",1832:"072b83a7",1932:"12b6c383",2180:"02085f51",2392:"7936008a",2520:"67e5da40",2564:"5798d4f8",2936:"2b0a4256",3040:"077f937e",3376:"5c74f90c",3516:"1f47f4c8",3592:"bb0c08a4",3664:"35c77b24",4056:"86050c0b",4304:"b69897bf",4328:"6d257302",4552:"2986e2dc",4576:"60bbf70d",4666:"09f4ec21",4976:"b015623b",4991:"fff701a3",5168:"3e0329b0",5244:"a29bd618",5396:"396fa3be",5512:"3082ee0b",5696:"297fd9e8",5908:"fb7ffa95",6292:"5843a1db",6344:"59bd7dd9",6500:"47857033",6752:"bb08baf3",6792:"84134461",6824:"143de7aa",6880:"a096084c",7028:"aea41b19",7140:"fed7a02b",7152:"adecfd95",7313:"41d55fd6",7470:"ff44e729",7560:"d977849d",7884:"54478903",7976:"68a4aea9",8048:"912721a7",8056:"b4a6bf59",8171:"999fc157",8412:"1390932d",8552:"fcb1a7cd",8600:"7ed26d3f",8728:"817bb33f",8816:"421ce660",8912:"9f717967",9112:"45cf2a6f",9156:"7d871861",9232:"968b6a33",9293:"78f3bb0e",9443:"958d450c",9772:"003e0215",9904:"f6c2b2d4",9936:"19ba6e62"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},d="wanderedtola.blog:",b.l=(e,a,c,t)=>{if(f[e])f[e].push(a);else{var r,o;if(void 0!==c)for(var n=document.getElementsByTagName("script"),i=0;i{r.onerror=r.onload=null,clearTimeout(s);var d=f[e];if(delete f[e],r.parentNode&&r.parentNode.removeChild(r),d&&d.forEach((e=>e(c))),a)return a(c)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=u.bind(null,r.onerror),r.onload=u.bind(null,r.onload),o&&document.head.appendChild(r)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/",b.gca=function(e){return e={17896441:"6752",18559978:"4576","576f2e3a":"168",e9d548ba:"175",c2f3c969:"564","60be8e52":"826","09b05c80":"1024",f1b3bdd2:"1232","5854caf2":"1456","73645fa8":"1732",a556cc0e:"1832",ece636e5:"1932","60262e21":"2180","6875c492":"2392",dda9d876:"2520","32f9d351":"2564","26301e9e":"2936","0ada2768":"3040",acbb0b46:"3376","05c7f781":"3516","108b598b":"3592","528fb942":"3664","2b39322a":"4056","5e95c892":"4304","27e351f1":"4328",a94703ab:"4666",a6aa9e1f:"4976","19d4caa7":"4991","608ae6a4":"5168",b9f07e2a:"5244",c847a044:"5396","814f3328":"5512","935f2afb":"5696",d184639a:"5908",b2b675dd:"6292",ccc49370:"6344",a7bd4aaa:"6500","62ca52c1":"6792",c98ea65b:"6824",b2f554cd:"6880","9e4087bc":"7028",a6930543:"7140","454824b6":"7152",a2247295:"7313","4e5aa5ff":"7470",c6f71f2b:"7560","0ef3d8a7":"7884","9457f915":"7976","752283db":"8048","55c24532":"8056","2497986c":"8171","01a85c17":"8412","1df93b7f":"8552",a80da1cf:"8600","479321cf":"8728","2f4f79ed":"8816","5daea7fd":"8912",a7023ddc:"9112","4cd4f0a7":"9156","419b793c":"9232","45773d59":"9293","9b36ccd3":"9772","99a66f7b":"9904","6b17ea64":"9936"}[e]||e,b.p+b.u(e)},(()=>{var e={296:0,2176:0};b.f.j=(a,c)=>{var f=b.o(e,a)?e[a]:void 0;if(0!==f)if(f)c.push(f[2]);else if(/^2(17|9)6$/.test(a))e[a]=0;else{var d=new Promise(((c,d)=>f=e[a]=[c,d]));c.push(f[2]=d);var t=b.p+b.u(a),r=new Error;b.l(t,(c=>{if(b.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var d=c&&("load"===c.type?"missing":c.type),t=c&&c.target&&c.target.src;r.message="Loading chunk "+a+" failed.\n("+d+": "+t+")",r.name="ChunkLoadError",r.type=d,r.request=t,f[1](r)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,c)=>{var f,d,t=c[0],r=c[1],o=c[2],n=0;if(t.some((a=>0!==e[a]))){for(f in r)b.o(r,f)&&(b.m[f]=r[f]);if(o)var i=o(b)}for(a&&a(c);n`eU5lyEHqOQ>7<&=doRbsA;o;jcyO_6CGUx@NJ2Gb^s3= zp>MFN15u@dZXY81dwk8P5$+$IoTF<4D+IW`$Lei#O~Cg@;eI8?qnGFGA@v{(47S^e znjT=u25glcu+4_Jq)BJQD}n%mAh9ho>~_!%*q%Qa=h8fgwgUE{fmRhw2gGINnJi_A z4rGn!VkX(vf4#YwD?8Y#T@y1ZXH-`CvPz_#k_WV(7j!2JWRaqy)XSxo4DRTel^ph|> z16w;Mp$(`;NHU3TRl;o_O>fvnlInmyok;8)&{ok#22fS4VaJXp3;wd36WHZ{~q zjp$>8?erl_)?;1qZ}hGkH3Q%I$vH;a_+8BZ@2fxDxNW)TQ?KcaT)0a6 VCHM09*ce^dy|8ll;#_L-^dBO5R8#-} delta 72 zcmV-O0Js0xw*-r`1h7>G2QXqdFfcVWlb!}2vwH^n4FNN=cN7y)m$Cu@GMDNU0e!QE eXM!UE0J8{-ogI^@&JDA)s0L~Q0Jpjl0UimN${73r diff --git a/blog/archive.html b/blog/archive.html index 57adaa9..61b0758 100644 --- a/blog/archive.html +++ b/blog/archive.html @@ -5,7 +5,7 @@ Archive • Wandered2LA - + diff --git a/blog/atom.xml b/blog/atom.xml index 3ec4a88..f526c0e 100644 --- a/blog/atom.xml +++ b/blog/atom.xml @@ -136,6 +136,15 @@ A를 사용하지 않음에도 peerDependencies에 추가해주어야 하며 이

토스에서는 위와 같은 번들러의 특성을 활용해 React Native의 Metro 에서
ESbuild로 옮기며 빌드속도를 최적화 했던 사례를 소개한다.

Git 분석 및 활용​

+

VCS중 하나인 Git은 새로 추가된 파일 혹은 변경된 파일의 내용들을 쉽게 추적하고 관리할 수 있는
+도구이며 관리 할 폴더에서 git init 명령어를 통해 시작.

+
    +
  1. Working Directory - 실제 작업공간
    2. +
  2. Staging Area - 변경된 파일들의 대기공간
    3. +
  3. Repository - 최종적으로 저장된 파일들의 공간
    4. +
+

우선 Git은 크게 세 가지 영역으로 분리되며 파일들의 변화를 gistory를 통해 분석하여 정리
+ㅁㅁㅁㅁㅁㅁㅁㅁㅁ

참고​

  • package.json 번역
    • diff --git a/blog/docusaurus-plugin.html b/blog/docusaurus-plugin.html index 8e824ea..5886d56 100644 --- a/blog/docusaurus-plugin.html +++ b/blog/docusaurus-plugin.html @@ -5,7 +5,7 @@ docusaurus custom plugin 만들기 • Wandered2LA - + diff --git a/blog/frontend-environment.html b/blog/frontend-environment.html index ce45c58be846faa4cef67001151954429a8ab9d4..ccf529be2ee9138eac168eb71f9d7db56003f4c0 100644 GIT binary patch delta 631 zcmZ`$&ubGw6ec%Q@Z!arJpX_-6&mYdSr7#eUc`ce;-Rf^87$qf-HWH))Qvv(~OP&>fTrMmm3s<#=Zq;~vcL|4WP`yBI1{h7?K65bg0N*s^ZU}hP6|pB0`GD_E#bGnUBd-y=NH~bplb=Vb#{nAw;Gp5k z_g#I(HsyjVi$5if<%C}?HO98h+9JFufr7C@4t4`~v5&Ni8wKmx7mvM-DbqWN-lPp~q zxrc-OvlypT=SWJq@T!43G5UPgkE)IGeEkVfLHLCl3u@T^Hf5GaK1D5CK^ElS>Si(% tPkriUA(`yKMkef^zzBwZM0H_*1ju{Daju`A_1gbd=lRRqNymJ8s delta 42 ycmdn>gYoTW#to*N>;_2|1_q|4lj}I;H%D{c;AJ%4Y$C23FgZERX!C>2C?Nn&91i#Z diff --git a/blog/frontend-observability.html b/blog/frontend-observability.html index 2502c9e47cdab1be5ff940db25e892d38be400a9..111c3d8c7f2f91209597e82d9881475e45589b64 100644 GIT binary patch delta 25 hcmcbae=~nWJ_m=Pfq}WHX_DFGog8wTr*gRH0|0*#2)_UT delta 24 gcmcbae=~nWJ_ox&l7)eRsp;e$9P*o|a=7RN0C토스에서는 위와 같은 번들러의 특성을 활용해 React Native의 Metro 에서
    ESbuild로 옮기며 빌드속도를 최적화 했던 사례를 소개한다.

    Git 분석 및 활용​

    +

    VCS중 하나인 Git은 새로 추가된 파일 혹은 변경된 파일의 내용들을 쉽게 추적하고 관리할 수 있는
    +도구이며 관리 할 폴더에서 git init 명령어를 통해 시작.

    +
      +
    1. Working Directory - 실제 작업공간
      2. +
    2. Staging Area - 변경된 파일들의 대기공간
      3. +
    3. Repository - 최종적으로 저장된 파일들의 공간
      4. +
    +

    우선 Git은 크게 세 가지 영역으로 분리되며 파일들의 변화를 gistory를 통해 분석하여 정리
    +ㅁㅁㅁㅁㅁㅁㅁㅁㅁ

    참고​

    • package.json 번역
      • diff --git a/blog/tags.html b/blog/tags.html index eab385e..74b8bfd 100644 --- a/blog/tags.html +++ b/blog/tags.html @@ -5,7 +5,7 @@ Tags • Wandered2LA - + diff --git a/blog/tags/custom.html b/blog/tags/custom.html index 976b7af2ee5f8d93e7245eed6be4e958c36e4de3..f24bdac57de9119390c22056fd259ee377464c20 100644 GIT binary patch delta 27 jcmbP#h-v;IrVR;f9EJu4=BB1eW|LR3$!%_9n>h;rhMEb2 delta 26 icmbP#h-v;IrVR;f>;_2|1_q|4lUK6IZ*F6oIST-P=Lt&y diff --git a/blog/tags/dependencies.html b/blog/tags/dependencies.html index c1358ff..8798bfa 100644 --- a/blog/tags/dependencies.html +++ b/blog/tags/dependencies.html @@ -5,11 +5,11 @@ One post tagged with "dependencies" • Wandered2LA - + -

      One post tagged with "dependencies"

      View All Tags

      · 13 min read
      WooSeok

      얼마전 토스과제를 진행하며 알게된 점들은 매끄러운 사용자경험 및 개발 생산성을 위해
      +

      One post tagged with "dependencies"

      View All Tags

      · 14 min read
      WooSeok

      얼마전 토스과제를 진행하며 알게된 점들은 매끄러운 사용자경험 및 개발 생산성을 위해
      frontend 로직뿐 아니라 보이지 않는 환경설정에도 엄청난 노력을 하고있음을 알게되었다.
      이전에 개발을 하며 알고는 있지만 자세하게 몰랐던 부분과 그들의 디테일에
      놀라워하며 면접준비를 했는데 이 글에서는 이 과정에서 알게된 사실들을 정리한다.

      @@ -132,6 +132,15 @@

      Optimization토스에서는 위와 같은 번들러의 특성을 활용해 React Native의 Metro 에서
      ESbuild로 옮기며 빌드속도를 최적화 했던 사례를 소개한다.

      Git 분석 및 활용​

      +

      VCS중 하나인 Git은 새로 추가된 파일 혹은 변경된 파일의 내용들을 쉽게 추적하고 관리할 수 있는
      +도구이며 관리 할 폴더에서 git init 명령어를 통해 시작.

      +
        +
      1. Working Directory - 실제 작업공간
        2. +
      2. Staging Area - 변경된 파일들의 대기공간
        3. +
      3. Repository - 최종적으로 저장된 파일들의 공간
        4. +
      +

      우선 Git은 크게 세 가지 영역으로 분리되며 파일들의 변화를 gistory를 통해 분석하여 정리
      +ㅁㅁㅁㅁㅁㅁㅁㅁㅁ

      참고​

      • package.json 번역
        • diff --git a/blog/tags/docusaurus.html b/blog/tags/docusaurus.html index 201a74c1a294c36dcf95b901a2b93a4b2f222ace..185c564ef444e8837d1da6431598e99b798c0cb8 100644 GIT binary patch delta 23 fcmdmWh-ud$rVSNr9EJu4=BB1eW}6$>cFh6+YPblB delta 26 icmdmWh-ud$rVSNr>;_2|1_q|4lMk}VZ=T0CXBGg6013 One post tagged with "environment" • Wandered2LA - + -

        One post tagged with "environment"

        View All Tags

        · 13 min read
        WooSeok

        얼마전 토스과제를 진행하며 알게된 점들은 매끄러운 사용자경험 및 개발 생산성을 위해
        +

        One post tagged with "environment"

        View All Tags

        · 14 min read
        WooSeok

        얼마전 토스과제를 진행하며 알게된 점들은 매끄러운 사용자경험 및 개발 생산성을 위해
        frontend 로직뿐 아니라 보이지 않는 환경설정에도 엄청난 노력을 하고있음을 알게되었다.
        이전에 개발을 하며 알고는 있지만 자세하게 몰랐던 부분과 그들의 디테일에
        놀라워하며 면접준비를 했는데 이 글에서는 이 과정에서 알게된 사실들을 정리한다.

        @@ -132,6 +132,15 @@

        Optimization토스에서는 위와 같은 번들러의 특성을 활용해 React Native의 Metro 에서
        ESbuild로 옮기며 빌드속도를 최적화 했던 사례를 소개한다.

        Git 분석 및 활용​

        +

        VCS중 하나인 Git은 새로 추가된 파일 혹은 변경된 파일의 내용들을 쉽게 추적하고 관리할 수 있는
        +도구이며 관리 할 폴더에서 git init 명령어를 통해 시작.

        +
          +
        1. Working Directory - 실제 작업공간
          2. +
        2. Staging Area - 변경된 파일들의 대기공간
          3. +
        3. Repository - 최종적으로 저장된 파일들의 공간
          4. +
        +

        우선 Git은 크게 세 가지 영역으로 분리되며 파일들의 변화를 gistory를 통해 분석하여 정리
        +ㅁㅁㅁㅁㅁㅁㅁㅁㅁ

        참고​

        • package.json 번역
          • diff --git a/blog/tags/frontend.html b/blog/tags/frontend.html index 677bde43b2a5c0385a9db01420c71dc80c4a6d20..c40221f45ea3e47ec381d3c94793ba61af836bdd 100644 GIT binary patch delta 631 zcmZ`$O-ma=7^WVi^x&b;`|HWm8VlO?uxu$6dg!H8(6b*)7%OgA_tHa~jonDv#+s0% zS<~HREV0EBVR1JSL4QMkfJbjL@BW9ryG^hPg<)W3-shR;<4b4kG8hZj$L~IznRz@n zxAG`5$G=V7nT;kM+<#RpXp7Gmuv>?u<;rar{Q^$JjZNjV}5Q;KvJbQcdy5OT;cB4kEVYk6zN^fE5=os1)U= zrn+Kk_tZ&60Y%Z|o+J7_^kaDx4#!Cvhh#67yG?A@(D6WBHP&=3&n#e@%u;jN5#+D3 z5IHbBklFNh_H0*@v@KHZWsh8#J41fy4pVXLJ!uIiyS)Mu+wXC^mkbkQi$&Bn| vznO-VXD_!>VgCe1Fm!yX3)?+F-Xe}0{alqx|67g8_fHzI^Dg?WKb`sm5+PPZ delta 39 vcmcaTkEw4K(}pZI4ud2M0|Qf2L;^L~W#;#fkK%T7&aDpf0MX}e}4 zDet7)m{bT$Iy%_?5O0EbdEY1g4L*r2a|0m+^5*$|-|zGJe*cj>`IQS7^Y>x!u@zgWUS3zDuUcRdWo@QT?OIDqf!^2i6g=!npfO&^j* z1A{9_yvy{rj2v-(eRGb12XZ&Y!!y|)VBi9NxEAM)RFAw$?jqtKVn?0~lP(9Wdw~6V zMSkq4YnFCjeWEC!D4N`J#b}5@EYHHpI7Q=-?8WkP2YXF)eNfkp4P7fU8`u`J)k5|O z@@q}w*GQ4C~MPIiKYX=mX93ZE4 z`z`F%L^Kkis}^WDQ!Lr58mt*clT^#TEF3lad=nzMmLRZHoax!R#tnXK>;_2|1_q|4lc%%EZ!Tf0O{3vJQ3t diff --git a/blog/tags/observability.html b/blog/tags/observability.html index c44f8a8e46ed6e40861592fc5af8556c40e09ded..2d4916d05a86bf16f9f290c4bb3330877def9dd4 100644 GIT binary patch delta 21 ccmcbVcqws17aND6fq}WHX_DFINo)>U09#TAE&u=k delta 21 ccmcbVcqws17aNB`l7)eRsj2biNo)>U09-W(D*ylh diff --git a/blog/tags/plugin.html b/blog/tags/plugin.html index 72bed8ba29461a4200233486611de73e77362b58..17ade1a0d6f02a3a2cc4dd05354bab84fce0b37f 100644 GIT binary patch delta 27 jcmbP#h-v;IrVR;f9EJu4=BB1eW|LR3$!%_9n>h;rhMEb2 delta 26 icmbP#h-v;IrVR;f>;_2|1_q|4lUK6IZ*F6oIST-P=Lt&y diff --git a/blog/tags/transplier.html b/blog/tags/transplier.html index 48b26506936c606c2e02f47b85840ef974cf27ad..8c8f40c18c6da2d0e0321dfa68d07c0316ebbd9f 100644 GIT binary patch delta 627 zcmZ`$&r94u6lO0{TIiwBbDu{K=~}4OLkLKP9(pMi^sH-GhKgBY4((~PHe0rB#9iEV zqa1F2SfAA&U#VQnrfth*VH{TEUSK;TMLiB#(-m~fH*_oNu z7qLANJ}f+spFDo_rdrXKUM^y<1!>2VTOI~Oc*QIXY`~8V`OODBZ;Qy5O&?O%#o!WB z?;?Aau`SN7ZtgMgKyD>?a4dIw7&w5Ruf&;~;gQ#fUBnzjV#^=>w8H@#9$?t0$}eqo z)zt2*lZpb0qRAac4Eh)(@;DlelQa(LP9nG4*lnWYgIY4ybgj%RU>nR*i}?}cNnP>_ z+)Lyksr)oZI|<-dAH&vDwOFAqjCI=9nYL`0@7P8e7MNMpOO|1N0EH%d$jNTl!fsu} z0}(lDk%n``qP0@a5c8(KLbG?h=Z?v~Yl~rY7yDMP7@KVT%fQF)bqWOi%Pie0avQ_L zn;1t_w@8Y)@QQ{95juR_Pg?8e`8q?Og7AnM^J>^V9Wl#uhoY8EFAMT-bz_;ao$j}@ okjm`!W+v>PzzBv;Ky_ia56C;jajT!-_1gc|uCg{4m-MLz*LV3;ng9R* delta 42 ycmccll(FX_O{3PYx^q diff --git a/docs/2024/07/07-15.html b/docs/2024/07/07-15.html index 69e4a82..ad953e9 100644 --- a/docs/2024/07/07-15.html +++ b/docs/2024/07/07-15.html @@ -5,7 +5,7 @@ 07-15 • Wandered2LA - + diff --git a/docs/2024/07/07-16.html b/docs/2024/07/07-16.html index 856c860..0a9e1fd 100644 --- a/docs/2024/07/07-16.html +++ b/docs/2024/07/07-16.html @@ -5,7 +5,7 @@ 07-16 • Wandered2LA - + diff --git a/docs/2024/07/07-17.html b/docs/2024/07/07-17.html index c3e1420..2200f4d 100644 --- a/docs/2024/07/07-17.html +++ b/docs/2024/07/07-17.html @@ -5,7 +5,7 @@ 07-17 • Wandered2LA - + diff --git a/docs/2024/07/07-19.html b/docs/2024/07/07-19.html index 3d668d4..947b4d9 100644 --- a/docs/2024/07/07-19.html +++ b/docs/2024/07/07-19.html @@ -5,7 +5,7 @@ 07-19 • Wandered2LA - + diff --git a/docs/2024/07/07-23.html b/docs/2024/07/07-23.html index 2a0ecd4..23923bc 100644 --- a/docs/2024/07/07-23.html +++ b/docs/2024/07/07-23.html @@ -5,7 +5,7 @@ 07-23 🧷 • Wandered2LA - + diff --git a/docs/2024/07/07-24.html b/docs/2024/07/07-24.html index 88a76b8..6f228bf 100644 --- a/docs/2024/07/07-24.html +++ b/docs/2024/07/07-24.html @@ -5,7 +5,7 @@ 07-24 • Wandered2LA - + diff --git a/docs/Frontend/actions-core.html b/docs/Frontend/actions-core.html index 8e3c6e5..e02ea65 100644 --- a/docs/Frontend/actions-core.html +++ b/docs/Frontend/actions-core.html @@ -5,7 +5,7 @@ @actions/toolkit • Wandered2LA - + diff --git a/docs/Frontend/fe-conf-import.html b/docs/Frontend/fe-conf-import.html index 4abef5b..f368a16 100644 --- a/docs/Frontend/fe-conf-import.html +++ b/docs/Frontend/fe-conf-import.html @@ -5,7 +5,7 @@ [FECONF 2022] 내 import 문이 그렇게 이상했나요? • Wandered2LA - + diff --git a/docs/Frontend/js-type.html b/docs/Frontend/js-type.html index c11dad0..d18c25a 100644 --- a/docs/Frontend/js-type.html +++ b/docs/Frontend/js-type.html @@ -5,7 +5,7 @@ Javascript의 null check • Wandered2LA - + diff --git a/docs/Frontend/next-14.html b/docs/Frontend/next-14.html index 00f7926..1d92b96 100644 --- a/docs/Frontend/next-14.html +++ b/docs/Frontend/next-14.html @@ -5,7 +5,7 @@ Next.js 14 • Wandered2LA - + diff --git a/docs/Frontend/popover.html b/docs/Frontend/popover.html index 1b827df..55cf80a 100644 --- a/docs/Frontend/popover.html +++ b/docs/Frontend/popover.html @@ -5,7 +5,7 @@ FrontEnd의 modal관리 • Wandered2LA - + diff --git a/docs/Frontend/tanstack-table.html b/docs/Frontend/tanstack-table.html index d60000a..087766d 100644 --- a/docs/Frontend/tanstack-table.html +++ b/docs/Frontend/tanstack-table.html @@ -5,7 +5,7 @@ @tanstack/table • Wandered2LA - + diff --git a/docs/Frontend/woowa-state-manage.html b/docs/Frontend/woowa-state-manage.html index 99faf00..0b3c88e 100644 --- a/docs/Frontend/woowa-state-manage.html +++ b/docs/Frontend/woowa-state-manage.html @@ -5,7 +5,7 @@ [WOOWACON 2023] 프론트엔드 상태관리 실전 편 with React Query & Zustand • Wandered2LA - + diff --git a/docs/OS/install_wsl.html b/docs/OS/install_wsl.html index 9f33e83..6ae7c55 100644 --- a/docs/OS/install_wsl.html +++ b/docs/OS/install_wsl.html @@ -5,7 +5,7 @@ WSL2 + VSCode 기반 리눅스 개발환경 설정 • Wandered2LA - + diff --git a/docs/OS/memo.html b/docs/OS/memo.html index 9d0321c..3357f32 100644 --- a/docs/OS/memo.html +++ b/docs/OS/memo.html @@ -5,7 +5,7 @@ 메모 • Wandered2LA - + diff --git a/docs/PL/intro-programming-language.html b/docs/PL/intro-programming-language.html index d27c9d5..1b4ae6e 100644 --- a/docs/PL/intro-programming-language.html +++ b/docs/PL/intro-programming-language.html @@ -5,7 +5,7 @@ 프로그래밍 언어란? • Wandered2LA - + diff --git a/docs/Tips/advanced-search.html b/docs/Tips/advanced-search.html index 1a9c273..965f15a 100644 --- a/docs/Tips/advanced-search.html +++ b/docs/Tips/advanced-search.html @@ -5,7 +5,7 @@ Github Advanced Search 팁 • Wandered2LA - + diff --git a/docs/Tips/command-tree.html b/docs/Tips/command-tree.html index eca99f6..870b398 100644 --- a/docs/Tips/command-tree.html +++ b/docs/Tips/command-tree.html @@ -5,7 +5,7 @@ tree 명령어 사용팁 • Wandered2LA - + diff --git a/docs/Tips/git-alias.html b/docs/Tips/git-alias.html index 2cbe6e9..4681035 100644 --- a/docs/Tips/git-alias.html +++ b/docs/Tips/git-alias.html @@ -5,7 +5,7 @@ Git Alias로 명령어 지정 • Wandered2LA - + diff --git a/docs/Tips/githubstatus.html b/docs/Tips/githubstatus.html index 4f19ec2..1a788bf 100644 --- a/docs/Tips/githubstatus.html +++ b/docs/Tips/githubstatus.html @@ -5,7 +5,7 @@ Github Status 확인 • Wandered2LA - + diff --git a/docs/Tips/how-to-speak.html b/docs/Tips/how-to-speak.html index a791682..f6a6c34 100644 --- a/docs/Tips/how-to-speak.html +++ b/docs/Tips/how-to-speak.html @@ -5,7 +5,7 @@ How To Speak • Wandered2LA - + diff --git a/docs/Tips/pets.html b/docs/Tips/pets.html index 5e86f00..faab504 100644 --- a/docs/Tips/pets.html +++ b/docs/Tips/pets.html @@ -5,7 +5,7 @@ pets • Wandered2LA - + diff --git a/index.html b/index.html index c25a3a0c639267bc6ab6962a6647e0a85d07b096..e9d07a3450251e47d2c19ef4ba70d198dc0dbb1b 100644 GIT binary patch delta 25 gcmZ2#xYTfi0yl@Dfq}WHX_DFGEN;2YZrt&_0ARTW@Bjb+ delta 24 fcmZ2#xYTfi0yn!sl7)eRsp;fQZu!k_-0{2sTU!RX