diff --git a/404.html b/404.html index 155fc95..6a8d023 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ Page Not Found • Wandered2LA - + diff --git a/assets/js/13b86060.3031bd81.js b/assets/js/13b86060.b12abf45.js similarity index 96% rename from assets/js/13b86060.3031bd81.js rename to assets/js/13b86060.b12abf45.js index c44ba9e..48db43a 100644 --- a/assets/js/13b86060.3031bd81.js +++ b/assets/js/13b86060.b12abf45.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[6080],{6292:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>o,default:()=>p,frontMatter:()=>s,metadata:()=>i,toc:()=>l});var r=t(7624),c=t(2172);const s={sidebar_position:2},o="Javascript\uc758 null check",i={id:"Frontend/js-type",title:"Javascript\uc758 null check",description:"javascript \uc5d0\uc11c\uc758 null\uc740 falsy\ud55c \uc6d0\uc2dc \uac12\uc774\uc9c0\ub9cc \ud0c0\uc785\uc740 object\uc778 \ud2b9\ubcc4\ud55c \uc874\uc7ac.",source:"@site/docs/Frontend/js-type.md",sourceDirName:"Frontend",slug:"/Frontend/js-type",permalink:"/docs/Frontend/js-type",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/Frontend/js-type.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"WikiSidebar",previous:{title:"[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?",permalink:"/docs/Frontend/fe-conf-import"},next:{title:"Next.js 14",permalink:"/docs/Frontend/next-14"}},a={},l=[];function d(e){const n={br:"br",code:"code",h1:"h1",p:"p",pre:"pre",...(0,c.M)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"javascript\uc758-null-check",children:"Javascript\uc758 null check"}),"\n",(0,r.jsxs)(n.p,{children:["javascript \uc5d0\uc11c\uc758 ",(0,r.jsx)(n.code,{children:"null"}),"\uc740 falsy\ud55c \uc6d0\uc2dc \uac12\uc774\uc9c0\ub9cc \ud0c0\uc785\uc740 ",(0,r.jsx)(n.code,{children:"object"}),"\uc778 \ud2b9\ubcc4\ud55c \uc874\uc7ac."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"typeof null === 'object'; // true\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\uc815\ud655\ud788\ub294 ",(0,r.jsx)(n.code,{children:"null"}),"\uc744 \ubc18\ud658\ud558\ub294 \ucabd\uc774 \ub9de\uaca0\uc9c0\ub9cc \uadfc 20\ub144\uac04 \ubc84\ud168\uc654\uace0 \uc774\uc81c\uc640 \uc218\uc815\ud558\uae30\uc5d0\ub294 \ub2a6\uc5b4\ubc84\ub838\uc73c\ub2c8 \uc0ac\uc6a9\ud558\ub294\ub370 \uc8fc\uc758 \ud560\uac83.",(0,r.jsx)(n.br,{}),"\n","\ub530\ub77c\uc11c \uac12\uc744 \uc815\ud655\ud788 \ud655\uc778\ud558\uae30\uc704\ud574 \uc870\uac74\uc774 \ud558\ub098 \ub354 \ud544\uc694\ud568"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"var a = null;\n!a && typeof a === 'object'; // true\n"})}),"\n",(0,r.jsx)(n.h1,{id:"function-type",children:"function type"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"typeof function a(b , c) {\n /*... */\n}; === 'function' // true\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\uc704\uc758 \ucf54\ub4dc\ub294 \ub9c8\uce58 ",(0,r.jsx)(n.code,{children:"function"}),"\uc774 \ucd5c\uc0c1\uc704 \ub808\ubca8\uc758 \ub0b4\uc7a5\ud0c0\uc785 \ucc98\ub7fc \ubcf4\uc774\uc9c0\ub9cc\n\uc815\ud655\ud788\ub294 ",(0,r.jsx)(n.code,{children:"object"}),"\uc758 \ud558\uc704\ud0c0\uc785\uc774\uace0,",(0,r.jsx)(n.br,{}),"\n","\ud568\uc218\ub294 \ud638\ucd9c\uac00\ub2a5\ud55c \uac1d\uccb4\ub77c\uace0 \uba85\uc2dc\ub418\uc5b4 \uc788\uc74c",(0,r.jsx)(n.br,{}),"\n","\ub530\ub77c\uc11c ",(0,r.jsx)(n.code,{children:"object"}),"\uc758 \ud558\uc704 \ud0c0\uc785\uc774\uae30 \ub54c\ubb38\uc5d0 ",(0,r.jsx)(n.code,{children:"length"}),"\ud504\ub85c\ud37c\ud2f0\ub85c \uc778\uc790\uc758 \uac2f\uc218\ub97c \uc54c\uc218\uc788\ub2e4."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"a.length; //2\n"})}),"\n",(0,r.jsx)(n.h1,{id:"\ubc30\uc5f4",children:"\ubc30\uc5f4"}),"\n",(0,r.jsxs)(n.p,{children:["\ubc30\uc5f4\ub610\ud55c \ub9c8\ucc2c\uac00\uc9c0 \uc778\ub370 \ubc30\uc5f4\uc740 \uc22b\uc790 \uc778\ub371\uc2a4\ub97c \uac00\uc9c0\uba70 length \ud504\ub85c\ud37c\ud2f0\uac00",(0,r.jsx)(n.br,{}),"\n","\uc790\ub3d9\uc73c\ub85c \uad00\ub9ac\ub418\ub294 \ud2b9\uc131\uc744 \uac00\uc9c4 \uac1d\uccb4\uc758 \ud558\uc704\ud0c0\uc785\uc774\ub2e4."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"typeof [1, 2, 3] === 'object'; //true\n"})}),"\n",(0,r.jsxs)(n.p,{children:["typescript\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ud2b9\uc131\uc744 \uc774\uc6a9\ud574 \uc81c\ub124\ub9ad\uc5d0\uc11c \uc0ac\uc6a9\ud558\uae30\ub3c4 \ud558\ub294\ub370,",(0,r.jsx)(n.br,{}),"\n","\uc608\ub97c \ub4e4\uc5b4 \ubc30\uc5f4\uc758 \uae38\uc774\ub97c \ucd94\ub860\ud558\ub294 \ud0c0\uc785\uc758 \uacbd\uc6b0"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"type Length = T extends { length: infer L } ? L : never;\n"})}),"\n",(0,r.jsx)(n.p,{children:"\uc704\uc640 \uac19\uc774 \ubc30\uc5f4\uc5d0 length \ud504\ub85c\ud37c\ud2f0\uac00 \uc788\ub2e4\ub294 \uc810\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc74c"})]})}function p(e={}){const{wrapper:n}={...(0,c.M)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>i,M:()=>o});var r=t(1504);const c={},s=r.createContext(c);function o(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:o(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[6080],{6292:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>o,default:()=>p,frontMatter:()=>s,metadata:()=>i,toc:()=>l});var r=t(7624),c=t(2172);const s={sidebar_position:3},o="Javascript\uc758 null check",i={id:"Frontend/js-type",title:"Javascript\uc758 null check",description:"javascript \uc5d0\uc11c\uc758 null\uc740 falsy\ud55c \uc6d0\uc2dc \uac12\uc774\uc9c0\ub9cc \ud0c0\uc785\uc740 object\uc778 \ud2b9\ubcc4\ud55c \uc874\uc7ac.",source:"@site/docs/Frontend/js-type.md",sourceDirName:"Frontend",slug:"/Frontend/js-type",permalink:"/docs/Frontend/js-type",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/Frontend/js-type.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"WikiSidebar",previous:{title:"[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?",permalink:"/docs/Frontend/fe-conf-import"},next:{title:"Next.js 14",permalink:"/docs/Frontend/next-14"}},a={},l=[];function d(e){const n={br:"br",code:"code",h1:"h1",p:"p",pre:"pre",...(0,c.M)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"javascript\uc758-null-check",children:"Javascript\uc758 null check"}),"\n",(0,r.jsxs)(n.p,{children:["javascript \uc5d0\uc11c\uc758 ",(0,r.jsx)(n.code,{children:"null"}),"\uc740 falsy\ud55c \uc6d0\uc2dc \uac12\uc774\uc9c0\ub9cc \ud0c0\uc785\uc740 ",(0,r.jsx)(n.code,{children:"object"}),"\uc778 \ud2b9\ubcc4\ud55c \uc874\uc7ac."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"typeof null === 'object'; // true\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\uc815\ud655\ud788\ub294 ",(0,r.jsx)(n.code,{children:"null"}),"\uc744 \ubc18\ud658\ud558\ub294 \ucabd\uc774 \ub9de\uaca0\uc9c0\ub9cc \uadfc 20\ub144\uac04 \ubc84\ud168\uc654\uace0 \uc774\uc81c\uc640 \uc218\uc815\ud558\uae30\uc5d0\ub294 \ub2a6\uc5b4\ubc84\ub838\uc73c\ub2c8 \uc0ac\uc6a9\ud558\ub294\ub370 \uc8fc\uc758 \ud560\uac83.",(0,r.jsx)(n.br,{}),"\n","\ub530\ub77c\uc11c \uac12\uc744 \uc815\ud655\ud788 \ud655\uc778\ud558\uae30\uc704\ud574 \uc870\uac74\uc774 \ud558\ub098 \ub354 \ud544\uc694\ud568"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"var a = null;\n!a && typeof a === 'object'; // true\n"})}),"\n",(0,r.jsx)(n.h1,{id:"function-type",children:"function type"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"typeof function a(b , c) {\n /*... */\n}; === 'function' // true\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\uc704\uc758 \ucf54\ub4dc\ub294 \ub9c8\uce58 ",(0,r.jsx)(n.code,{children:"function"}),"\uc774 \ucd5c\uc0c1\uc704 \ub808\ubca8\uc758 \ub0b4\uc7a5\ud0c0\uc785 \ucc98\ub7fc \ubcf4\uc774\uc9c0\ub9cc\n\uc815\ud655\ud788\ub294 ",(0,r.jsx)(n.code,{children:"object"}),"\uc758 \ud558\uc704\ud0c0\uc785\uc774\uace0,",(0,r.jsx)(n.br,{}),"\n","\ud568\uc218\ub294 \ud638\ucd9c\uac00\ub2a5\ud55c \uac1d\uccb4\ub77c\uace0 \uba85\uc2dc\ub418\uc5b4 \uc788\uc74c",(0,r.jsx)(n.br,{}),"\n","\ub530\ub77c\uc11c ",(0,r.jsx)(n.code,{children:"object"}),"\uc758 \ud558\uc704 \ud0c0\uc785\uc774\uae30 \ub54c\ubb38\uc5d0 ",(0,r.jsx)(n.code,{children:"length"}),"\ud504\ub85c\ud37c\ud2f0\ub85c \uc778\uc790\uc758 \uac2f\uc218\ub97c \uc54c\uc218\uc788\ub2e4."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"a.length; //2\n"})}),"\n",(0,r.jsx)(n.h1,{id:"\ubc30\uc5f4",children:"\ubc30\uc5f4"}),"\n",(0,r.jsxs)(n.p,{children:["\ubc30\uc5f4\ub610\ud55c \ub9c8\ucc2c\uac00\uc9c0 \uc778\ub370 \ubc30\uc5f4\uc740 \uc22b\uc790 \uc778\ub371\uc2a4\ub97c \uac00\uc9c0\uba70 length \ud504\ub85c\ud37c\ud2f0\uac00",(0,r.jsx)(n.br,{}),"\n","\uc790\ub3d9\uc73c\ub85c \uad00\ub9ac\ub418\ub294 \ud2b9\uc131\uc744 \uac00\uc9c4 \uac1d\uccb4\uc758 \ud558\uc704\ud0c0\uc785\uc774\ub2e4."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:"typeof [1, 2, 3] === 'object'; //true\n"})}),"\n",(0,r.jsxs)(n.p,{children:["typescript\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ud2b9\uc131\uc744 \uc774\uc6a9\ud574 \uc81c\ub124\ub9ad\uc5d0\uc11c \uc0ac\uc6a9\ud558\uae30\ub3c4 \ud558\ub294\ub370,",(0,r.jsx)(n.br,{}),"\n","\uc608\ub97c \ub4e4\uc5b4 \ubc30\uc5f4\uc758 \uae38\uc774\ub97c \ucd94\ub860\ud558\ub294 \ud0c0\uc785\uc758 \uacbd\uc6b0"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"type Length = T extends { length: infer L } ? L : never;\n"})}),"\n",(0,r.jsx)(n.p,{children:"\uc704\uc640 \uac19\uc774 \ubc30\uc5f4\uc5d0 length \ud504\ub85c\ud37c\ud2f0\uac00 \uc788\ub2e4\ub294 \uc810\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc74c"})]})}function p(e={}){const{wrapper:n}={...(0,c.M)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>i,M:()=>o});var r=t(1504);const c={},s=r.createContext(c);function o(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:o(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/18559978.22cecde3.js b/assets/js/18559978.22cecde3.js new file mode 100644 index 0000000..e9123d2 --- /dev/null +++ b/assets/js/18559978.22cecde3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[4576],{7408:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>s,toc:()=>d});var r=t(7624),c=t(2172);const o={},i="2024-07-17",s={id:"2024/07/07-17",title:"2024-07-17",description:"execute contentscript",source:"@site/docs/2024/07/07-17.md",sourceDirName:"2024/07",slug:"/2024/07/07-17",permalink:"/docs/2024/07/07-17",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/2024/07/07-17.md",tags:[],version:"current",frontMatter:{},sidebar:"WikiSidebar",previous:{title:"2024-07-16",permalink:"/docs/2024/07/07-16"},next:{title:"@actions/toolkit",permalink:"/docs/Frontend/actions-core"}},a={},d=[{value:"execute contentscript",id:"execute-contentscript",level:2},{value:"chrome.action",id:"chromeaction",level:3}];function l(e){const n={br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,c.M)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"2024-07-17",children:"2024-07-17"}),"\n",(0,r.jsx)(n.h2,{id:"execute-contentscript",children:"execute contentscript"}),"\n",(0,r.jsxs)(n.p,{children:["service-worker\ub97c ts\ub85c \ubcc0\uacbd\ud558\uba74\uc11c \uc0dd\uae34 \ubb38\uc81c \uc808\ub300\uacbd\ub85c\ub85c \uba85\uc2dc\ud558\uc5ec \ud574\uacb0 (not receiving, file path)",(0,r.jsx)(n.br,{}),"\n","\ud558\uc9c0\ub9cc \uc624\ub958\uac00 \uc5c6\uc74c\uc5d0\ub3c4 contentscript\uac00 load\ub418\uc9c0 \uc54a\uc74c",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.code,{children:"chrome.action.onClicked"})," event\ub85c contentscript\ub97c \ub2e8\uc21c load\ub9cc \ud558\uc9c0\uc54a\uace0",(0,r.jsx)(n.br,{}),"\n","react\ub97c \uc0ac\uc6a9\ud558\ub294 contentscript\ub0b4\ubd80\uc5d0\uc11c body.prepend \ud558\uc5ec",(0,r.jsx)(n.br,{}),"\n","html\ub0b4\ubd80\uc5d0 script\ub97c \uc0bd\uc785\ud558\ub294 \ubc29\ud5a5\uc73c\ub85c \uc218\uc815\ud574\ubcfc \uac83"]}),"\n",(0,r.jsx)(n.h3,{id:"chromeaction",children:"chrome.action"}),"\n",(0,r.jsx)(n.p,{children:"\uacf5\uc2dd\ubb38\uc11c \uc911 \ucf58\ud150\uce20 \ud074\ub9ad\uc2dc \uc2a4\ud06c\ub9bd\ud2b8 \uc0bd\uc785\ubd80\ubd84"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title="manifest.json"',children:'{\n "name": "Action script injection demo",\n "version": "1.0",\n "manifest_version": 3,\n "action": {\n "default_title": "Click to show an alert"\n },\n "permissions": ["activeTab", "scripting"],\n "background": {\n "service_worker": "background.js"\n }\n}\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="service-worker.ts"',children:"chrome.action.onClicked.addListener((tab) => {\n if (tab.id) {\n chrome.scripting.executeScript({\n target: { tabId: tab.id },\n files: ['dist/contentscript.js'],\n });\n }\n});\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"alert('hello world');\n"})})]})}function p(e={}){const{wrapper:n}={...(0,c.M)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>s,M:()=>i});var r=t(1504);const c={},o=r.createContext(c);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/18559978.dcbd8323.js b/assets/js/18559978.dcbd8323.js deleted file mode 100644 index f63e87b..0000000 --- a/assets/js/18559978.dcbd8323.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[4576],{7408:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>s,toc:()=>d});var r=t(7624),c=t(2172);const o={},i="2024-07-17",s={id:"2024/07/07-17",title:"2024-07-17",description:"execute contentscript",source:"@site/docs/2024/07/07-17.md",sourceDirName:"2024/07",slug:"/2024/07/07-17",permalink:"/docs/2024/07/07-17",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/2024/07/07-17.md",tags:[],version:"current",frontMatter:{},sidebar:"WikiSidebar",previous:{title:"2024-07-16",permalink:"/docs/2024/07/07-16"},next:{title:"[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?",permalink:"/docs/Frontend/fe-conf-import"}},a={},d=[{value:"execute contentscript",id:"execute-contentscript",level:2},{value:"chrome.action",id:"chromeaction",level:3}];function l(e){const n={br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,c.M)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"2024-07-17",children:"2024-07-17"}),"\n",(0,r.jsx)(n.h2,{id:"execute-contentscript",children:"execute contentscript"}),"\n",(0,r.jsxs)(n.p,{children:["service-worker\ub97c ts\ub85c \ubcc0\uacbd\ud558\uba74\uc11c \uc0dd\uae34 \ubb38\uc81c \uc808\ub300\uacbd\ub85c\ub85c \uba85\uc2dc\ud558\uc5ec \ud574\uacb0 (not receiving, file path)",(0,r.jsx)(n.br,{}),"\n","\ud558\uc9c0\ub9cc \uc624\ub958\uac00 \uc5c6\uc74c\uc5d0\ub3c4 contentscript\uac00 load\ub418\uc9c0 \uc54a\uc74c",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.code,{children:"chrome.action.onClicked"})," event\ub85c contentscript\ub97c \ub2e8\uc21c load\ub9cc \ud558\uc9c0\uc54a\uace0",(0,r.jsx)(n.br,{}),"\n","react\ub97c \uc0ac\uc6a9\ud558\ub294 contentscript\ub0b4\ubd80\uc5d0\uc11c body.prepend \ud558\uc5ec",(0,r.jsx)(n.br,{}),"\n","html\ub0b4\ubd80\uc5d0 script\ub97c \uc0bd\uc785\ud558\ub294 \ubc29\ud5a5\uc73c\ub85c \uc218\uc815\ud574\ubcfc \uac83"]}),"\n",(0,r.jsx)(n.h3,{id:"chromeaction",children:"chrome.action"}),"\n",(0,r.jsx)(n.p,{children:"\uacf5\uc2dd\ubb38\uc11c \uc911 \ucf58\ud150\uce20 \ud074\ub9ad\uc2dc \uc2a4\ud06c\ub9bd\ud2b8 \uc0bd\uc785\ubd80\ubd84"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title="manifest.json"',children:'{\n "name": "Action script injection demo",\n "version": "1.0",\n "manifest_version": 3,\n "action": {\n "default_title": "Click to show an alert"\n },\n "permissions": ["activeTab", "scripting"],\n "background": {\n "service_worker": "background.js"\n }\n}\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="service-worker.ts"',children:"chrome.action.onClicked.addListener((tab) => {\n if (tab.id) {\n chrome.scripting.executeScript({\n target: { tabId: tab.id },\n files: ['dist/contentscript.js'],\n });\n }\n});\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"alert('hello world');\n"})})]})}function p(e={}){const{wrapper:n}={...(0,c.M)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>s,M:()=>i});var r=t(1504);const c={},o=r.createContext(c);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1ec96c11.c69cc297.js b/assets/js/1ec96c11.c69cc297.js deleted file mode 100644 index 8a838bf..0000000 --- a/assets/js/1ec96c11.c69cc297.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[2576],{8320:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>d,toc:()=>c});var s=t(7624),r=t(2172);const i={sidebar_position:5},l="[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand",d={id:"Frontend/woowa-state-manage",title:"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand",description:"\uc608\uc81c\ucf54\ub4dc\ub294 \uc81c\uc678\ud588\uc2b5\ub2c8\ub2e4",source:"@site/docs/Frontend/woowa-state-manage.md",sourceDirName:"Frontend",slug:"/Frontend/woowa-state-manage",permalink:"/docs/Frontend/woowa-state-manage",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/Frontend/woowa-state-manage.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"WikiSidebar",previous:{title:"FrontEnd\uc758 modal\uad00\ub9ac",permalink:"/docs/Frontend/popover"},next:{title:"@actions/toolkit",permalink:"/docs/Frontend/actions-core"}},a={},c=[{value:"\ubc30\uacbd",id:"\ubc30\uacbd",level:2},{value:"\uc0c1\ud0dc\uad00\ub9ac \ubc29\ubc95\uc758 \ubcc0\ud654",id:"\uc0c1\ud0dc\uad00\ub9ac-\ubc29\ubc95\uc758-\ubcc0\ud654",level:2},{value:"ReactQuery/Zustand \ub3c4\uc785 \ubc30\uacbd",id:"reactqueryzustand-\ub3c4\uc785-\ubc30\uacbd",level:2},{value:"Redux vs ReactQuery",id:"redux-vs-reactquery",level:2},{value:"Redux vs Zustand",id:"redux-vs-zustand",level:2},{value:"\ud45c\uc900 \uac1c\ubc1c \ud658\uacbd \uc124\uc815 \ubc0f \ud65c\uc6a9",id:"\ud45c\uc900-\uac1c\ubc1c-\ud658\uacbd-\uc124\uc815-\ubc0f-\ud65c\uc6a9",level:2},{value:"queries \uc640 stores \ud65c\uc6a9",id:"queries-\uc640-stores-\ud65c\uc6a9",level:2},{value:"1. Component Layer",id:"1-component-layer",level:3},{value:"2. Business Layer/hooks",id:"2-business-layerhooks",level:3},{value:"3. Store Layer/queries",id:"3-store-layerqueries",level:3},{value:"4. Store Layer/stores",id:"4-store-layerstores",level:3},{value:"\uc544\ud0a4\ud14d\uccd0 Layer\uc758 \ubcf8\uc9c8",id:"\uc544\ud0a4\ud14d\uccd0-layer\uc758-\ubcf8\uc9c8",level:2},{value:"\uc601\uc0c1 \ud55c\uc904 \ud3c9",id:"\uc601\uc0c1-\ud55c\uc904-\ud3c9",level:2}];function o(e){const n={a:"a",br:"br",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.M)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"woowacon-2023-\ud504\ub860\ud2b8\uc5d4\ub4dc-\uc0c1\ud0dc\uad00\ub9ac-\uc2e4\uc804-\ud3b8-with-react-query--zustand",children:"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.em,{children:"\uc608\uc81c\ucf54\ub4dc\ub294 \uc81c\uc678\ud588\uc2b5\ub2c8\ub2e4"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.youtube.com/watch?v=nkXIpGjVxWU&list=PLgXGHBqgT2TundZ81MAVHPzeYOTeII69j&index=21",children:"\ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand"})}),"\n",(0,s.jsx)(n.li,{children:"\ucf54\uc5b4\uc6f9\ud504\ub860\ud2b8\uac1c\ubc1c\ud300 \ubc30\ubbfc\uadfc"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"\ubc30\uacbd",children:"\ubc30\uacbd"}),"\n",(0,s.jsxs)(n.p,{children:["State(\uc0c1\ud0dc)\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uba54\ubaa8\ub9ac\uc774\ub2e4. \ud604\uc7ac \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc758 \uc911\uc2ec\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc788\uace0",(0,s.jsx)(n.br,{}),"\n","\ub9ce\uc740 \ubc1c\uc804\uc744 \uac70\ub4ed\ud558\uba74\uc11c \ub2e8\uc21c \uc815\uc801\ud398\uc774\uc9c0\uac00 \uc544\ub2cc \ud31d\uc5c5\uc774\ub098 \uc8fc\ubb38/\ubc30\ub2ec\uc758 \uc9c4\ud589\uc744 \ubcf4\uc5ec\uc8fc\ub294 \uc218\ub9ce\uc740 \uc778\ud130\ub799\uc158\uc744 \ub2f4\ub2f9\ud558\uac8c \ub418\uc5c8\uc74c.",(0,s.jsx)(n.br,{}),"\n","\uc774\ub7f0 \uc0c1\ud0dc\ub294 \ub300\ud45c\uc801\uc73c\ub85c ",(0,s.jsx)(n.code,{children:"useState"}),"\uc640 \uac19\uc774 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uadc0\uc18d\ub418\uc5b4 \uc788\ub294 \uac1c\ub150\uc774\uc9c0\ub9cc",(0,s.jsx)(n.br,{}),"\n","\ud504\ub85c\ub355\ud2b8 \uc804\ubc18\uc5d0 \uac78\uccd0 \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ub420 \uc218 \ub3c4 \uc788\ub294\ub370 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uadc0\uc18d\ub418\uc5b4 \uc788\uc9c0\uc54a\ub294 \uc0c8\ub85c\uc6b4 \uc0c1\ud0dc\uad00\ub9ac \ubc29\ubc95\ub860\uc744 \ud544\uc694\ub85c \ud568"]}),"\n",(0,s.jsx)(n.h2,{id:"\uc0c1\ud0dc\uad00\ub9ac-\ubc29\ubc95\uc758-\ubcc0\ud654",children:"\uc0c1\ud0dc\uad00\ub9ac \ubc29\ubc95\uc758 \ubcc0\ud654"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"\ucef4\ud3ec\ub10c\ud2b8 \uacc4\uce35\ubd84\ub9ac"}),"\n",(0,s.jsx)(n.li,{children:"Props Drilling"}),"\n",(0,s.jsx)(n.li,{children:"Redux"}),"\n",(0,s.jsx)(n.li,{children:"MobX\ub4f1 \ud6c4\ubc1c\uc8fc\uc790 \ub4f1\uc7a5 (Redux\uc758 \ucf54\ub4dc\uac00 \ub108\ubb34 \ub9ce\uc74c)"}),"\n",(0,s.jsx)(n.li,{children:"React Hooks/Context API \uc640 \uae30\uc874 \uc0c1\ud0dc\uad00\ub9ac\uc758 \ud55c\uacc4 \ub3c4\ub2ec"}),"\n",(0,s.jsx)(n.li,{children:"Post Redux \uc0c1\ud0dc\uad00\ub9ac (Recoil,Zustand..)"}),"\n",(0,s.jsx)(n.li,{children:"\uc6d0\uaca9 \uc0c1\ud0dc\uad00\ub9ac \ubc29\ubc95 \ubd84\ub9ac\uc2dc\ub3c4(React-query, SWR..)"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"reactqueryzustand-\ub3c4\uc785-\ubc30\uacbd",children:"ReactQuery/Zustand \ub3c4\uc785 \ubc30\uacbd"}),"\n",(0,s.jsxs)(n.p,{children:["Store\uac00 \ud06c\uace0 \ubcf5\uc7a1\ud574\uc9c0\uba74\uc11c \uc0c1\ud0dc\uad00\ub9ac\ub77c\uae30 \ubcf4\ub2e4 API\ub97c \ud638\ucd9c\ud558\ub294 \ucf54\ub4dc\uac00 \ub354 \ub9ce\uc544\uc9d0",(0,s.jsx)(n.br,{}),"\n","\uc0c1\ud0dc\uad00\ub9ac\ub97c \uc704\ud55c \ub3c4\uad6c\uc778\ub370 API fetching\uc6a9\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc801\uc808\ud55c\uac00? -> ReactQuery",(0,s.jsx)(n.br,{}),"\n","Store\ub294 \uac04\ub2e8\ud574\uc84c\uc9c0\ub9cc \ucef4\ud3ec\ub10c\ud2b8\uc758 \ubcf5\uc7a1\uc131 \uc99d\uac00, \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1 \ub300\ubd80\ubd84\uc774 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc788\uc74c",(0,s.jsx)(n.br,{}),"\n","\uc5bc\ub9c8 \ub0a8\uc544\uc788\uc9c0\ub3c4 \uc54a\uc740 \uc0c1\ud0dc\ub97c \uad73\uc774 MobX\ub85c \uc0ac\uc6a9\ud574\uc57c \ud558\ub294\uac00? -> Zustand"]}),"\n",(0,s.jsxs)(n.p,{children:["\ub530\ub77c\uc11c Client\uc5d0\uc11c \uc628\uc804\ud788 \uad00\ub9ac\uac00\ub2a5\ud55c \uc0c1\ud0dc\ub294 Zustand\ub85c, Client \uc678\ubd80\uc5d0\uc11c \uc18c\uc720\ud558\uba70",(0,s.jsx)(n.br,{}),"\n","Server State\uc778 \uacbd\uc6b0\ub294 React Query\ub85c \uad00\ub9ac\ud55c\ub2e4.(Client\uc5d0\uc11c\ub294 \uc77c\uc885\uc758 \uce90\uc2dc\ud615\ud0dc\ub85c \uc874\uc7ac\ud568)"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://techblog.woowahan.com/6339/",children:"Store\uc5d0\uc11c \ube44\ub3d9\uae30 \ud1b5\uc2e0 \ubd84\ub9ac\ud558\uae30 (feat. React Query)"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"redux-vs-reactquery",children:"Redux vs ReactQuery"}),"\n",(0,s.jsx)(n.p,{children:"\ud300 \ub0b4 \ub3c4\uba54\uc778\ub4e4\uc774 \uc11c\ubc84\uc640 \uc720\uae30\uc801\uc73c\ub85c \uc5bd\ud600\uc788\uc73c\uba74\uc11c \ube44\ub3d9\uae30 \ud638\ucd9c \uc804\ub7b5\uc774 \uc694\uad6c\ub418\ubbc0\ub85c ReactQuery\uac00 \uc801\ud569\ud558\ub2e4."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"API \ud638\ucd9c \ucf54\ub4dc\ub85c \ube44\ub300\ud574\uc9c4 Store\ub97c \ubaa9\uc801\uc5d0 \ub9de\uac8c \ubd84\ub9ac\ud568"}),"\n",(0,s.jsx)(n.li,{children:"\ub9ac\uc5d1\ud2b8 \ud6c5\uacfc \ube44\uc2b7\ud55c \uc9c1\uad00\uc801\uc778 \uc0ac\uc6a9\uc131"}),"\n",(0,s.jsx)(n.li,{children:"\uc5ec\ub7ec \uc778\ud130\ud398\uc774\uc2a4&\uc635\uc158\uc744 \uc81c\uacf5\ud574 \uc801\uc740 \ucf54\ub4dc\ub85c \uac15\ub825\ud558\uac8c \ub3d9\uc791"}),"\n",(0,s.jsx)(n.li,{children:"\uc790\uccb4 \uac1c\ubc1c\ub3c4\uad6c \uc81c\uacf5"}),"\n"]}),"\n",(0,s.jsx)("h3",{children:"1. API\ud638\ucd9c\ucf54\ub4dc\uc5d0 Polling\uc744 \uad6c\ud604\ud560 \ub54c"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Redux"}),(0,s.jsx)(n.th,{children:"ReactQuery"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"1. Action \uc120\uc5b8"}),(0,s.jsx)(n.td,{children:"1. Query \uc120\uc5b8 + \uc635\uc158"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"2. State \ucd94\uac00"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"3. Reducer \ub300\uc751"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"4. saga \ud3f4\ub9c1 \uad6c\ud604"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"5. \ucef4\ud3ec\ub10c\ud2b8 \uc5f0\uacb0"}),(0,s.jsx)(n.td,{})]})]})]}),"\n",(0,s.jsx)("h3",{children:"2. API \ud638\ucd9c \uc0c1\ud0dc \ud655\uc778"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"center"},children:"Redux"}),(0,s.jsx)(n.th,{style:{textAlign:"center"},children:"ReactQuery"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:"1. State \ucd94\uac00"}),(0,s.jsx)(n.td,{style:{textAlign:"center"},children:"1. Query\uc5d0\uc11c \uc81c\uacf5"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:"2. Reducer \ub300\uc751"}),(0,s.jsx)(n.td,{style:{textAlign:"center"}})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:"3. \ucef4\ud3ec\ub10c\ud2b8 \uc5f0\uacb0"}),(0,s.jsx)(n.td,{style:{textAlign:"center"}})]})]})]}),"\n",(0,s.jsx)(n.h2,{id:"redux-vs-zustand",children:"Redux vs Zustand"}),"\n",(0,s.jsxs)(n.p,{children:["\uc678\ubd80 \uc0c1\ud0dc\uad00\ub9ac \ub3c4\uad6c\uc758 \uc758\uc874\ub3c4\uac00 \ub0ae\uc740 \ud300 \ub0b4 \ucf54\ub4dc\uc640",(0,s.jsx)(n.br,{}),"\n","\uc804\uc5ed \uc0c1\ud0dc\ub97c \ucd5c\uc18c\ud654\ud558\ub294 \ud300 \ubc29\ud5a5\uc131\uc5d0 \uc801\ud569"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"\ucef4\ud3ec\ub10c\ud2b8 \ubc16\uc5d0\uc11c\ub3c4 \uc0c1\ud0dc\ubcc0\uacbd \uac00\ub2a5"}),"\n",(0,s.jsx)(n.li,{children:"\uc0ac\uc6a9\uc131\uc774 \ub2e8\uc21c\ud568"}),"\n",(0,s.jsx)(n.li,{children:"\uc0c1\ud0dc\uad00\ub9ac\uc5d0 \ud544\uc694\ud55c \ucf54\ub4dc\uac00 \uc801\uc74c"}),"\n",(0,s.jsx)(n.li,{children:"Redux Devtools \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8 \ud65c\uc6a9\uac00\ub2a5"}),"\n"]}),"\n",(0,s.jsx)("h3",{children:"1. Store \uad6c\ud604"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Redux"}),(0,s.jsx)(n.th,{children:"Zustand"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"1. \uc2a4\ud1a0\uc5b4 \ubc0f \uc0c1\ud0dc \uc120\uc5b8"}),(0,s.jsx)(n.td,{children:"1. \uc2a4\ud1a0\uc5b4\uc5d0 \ubaa8\ub450 \uad6c\ud604"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"2. Action \uc120\uc5b8"}),(0,s.jsx)(n.td,{children:"2. \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ud638\ucd9c"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"3. Reducer \uad6c\ud604"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"4. Provider \uc5f0\uacb0"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"5. \ucef4\ud3ec\ub10c\ud2b8 \uc5f0\uacb0"}),(0,s.jsx)(n.td,{})]})]})]}),"\n",(0,s.jsx)(n.h2,{id:"\ud45c\uc900-\uac1c\ubc1c-\ud658\uacbd-\uc124\uc815-\ubc0f-\ud65c\uc6a9",children:"\ud45c\uc900 \uac1c\ubc1c \ud658\uacbd \uc124\uc815 \ubc0f \ud65c\uc6a9"}),"\n",(0,s.jsx)(n.p,{children:"\ub808\uc774\uc5b4\ub97c 5\uac1c\ub85c \uad6c\ubd84\ud558\uc5ec \uad00\ub9ac"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Page Layer"}),"\n",(0,s.jsx)(n.li,{children:"Component Layer"}),"\n",(0,s.jsx)(n.li,{children:"Business Layer (Hooks, Services)"}),"\n",(0,s.jsx)(n.li,{children:"Store Layer (Queries, Stores)"}),"\n",(0,s.jsx)(n.li,{children:"Utility Layer"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"queries-\uc640-stores-\ud65c\uc6a9",children:"queries \uc640 stores \ud65c\uc6a9"}),"\n",(0,s.jsx)(n.h3,{id:"1-component-layer",children:"1. Component Layer"}),"\n",(0,s.jsx)(n.p,{children:"\ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc5d0\uc11c hooks, store, services\ub97c \ud638\ucd9c\ud568"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="PocketListContainer.tsx"',children:"const PocketListContainer = () => {\n //...\n\n //zustand\n const { handler } = useBaeminpayModuleStore();\n const { selectedPocket, onSelectPocket } = usePayMethodStore();\n\n //hooks\n const { pocketList } = usePocketListViewModel();\n\n const handleSelectPocket = async (pocket: PocketItemViewModel) => {\n //services\n sendPocketSelectLog();\n };\n\n //...\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"2-business-layerhooks",children:"2. Business Layer/hooks"}),"\n",(0,s.jsxs)(n.p,{children:["pocketList\ub97c \ub9ac\ud134\ud558\uae30 \uc704\ud574 4\uac1c\uc758 \ucffc\ub9ac \ud638\ucd9c, store\ub97c \ud638\ucd9c\ud558\uace0 covertViewModel\uc744 \ud1b5\ud574 \ub370\uc774\ud130 \uac00\uacf5",(0,s.jsx)(n.br,{}),"\n","\ucef4\ud3ec\ub10c\ud2b8\ub2e8\uc5d0\uc11c \ucffc\ub9ac \ud638\ucd9c\uc744 \ud588\ub2e4\uba74 \uac00\ub3c5\uc131\uc774 \uc800\ud558\ub428"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="usePocketListViewModel.ts"',children:"const usePocketListViewModel = () => {\n // queries\n const { data: baeminpayPocketListData } = useFetchBaeminpayPocketListQuery();\n const { data: baeminpayMemberInfoData } = useFetchBaeminpayMemberInfoQuery();\n const { data: baeminpayMoneyInfoData } = useFetchBaeminpayMoneyInfoQuery();\n const { data: baeminpayMoneyAMLStatusData } = useFetchBaeminpayMoneyAMLStatusQuery();\n\n // store\n const { config } = useBaeminpayModuleStore();\n\n const convertPocketList = useMemo(() => {\n //...\n return convertPocketListViewModel({\n // \ub370\uc774\ud130 \uac00\uacf5\n });\n }, []);\n\n //...\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"3-store-layerqueries",children:"3. Store Layer/queries"}),"\n",(0,s.jsxs)(n.p,{children:["API \ud638\ucd9c\uc2dc global state\ub97c \ucc38\uc870\ud558\ub294 \uacbd\uc6b0\ub3c4 \uc788\uae30\ub9c8\ub828",(0,s.jsx)(n.br,{}),"\n","\ub530\ub77c\uc11c \ucffc\ub9ac\ub0b4\ubd80\uc5d0\uc11c\ub3c4 store\ub97c \ud638\ucd9c\ud558\ub294 \uacbd\uc6b0 \uc874\uc7ac \uc678\ubd80\uc5d0\uc11c \ubc1b\ub294\uacbd\uc6b0\ub3c4 \uc788\uace0 store\uc5d0\uc11c \ubc1b\uc744 \uc218\ub3c4 \uc788\uc74c",(0,s.jsx)(n.br,{}),"\n","\ubcf8\uc778\uc774 \uc9c0\ud5a5\ud558\ub294 \ubc14\uc5d0\ub530\ub77c \uacb0\uc815"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="useFetchBaeminpayPocketListQuery.ts"',children:"const baeminpayQueryKey = createQueryKey('baeminpay', {\n pocketList: (params: FetchBaeminpayPocketListRequest) => [params],\n});\n\nexport const useFetchBaeminpayPocketListQuery = (options?: { enabled: boolean }) => {\n // store\n const { user } = useBaeminpayModuleStore();\n\n return useQuery({\n context: queryContext,\n //...\n });\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"4-store-layerstores",children:"4. Store Layer/stores"}),"\n",(0,s.jsx)(n.p,{children:"\uc77c\ubc18\uc801\uc778 store\uc758 \ud615\ud0dc"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="useBaeminpayModuleStore.ts"',children:"export const useBaeminpayModuleStore = create(() => ({\n initialized: false,\n //...\n}));\n\nexport const initializeBaeminpayModule = (moduleData: ModuleData) => {\n useBaeminpayModuleStore.setState({\n ...moduleData,\n initialized: true,\n });\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"\uc544\ud0a4\ud14d\uccd0-layer\uc758-\ubcf8\uc9c8",children:"\uc544\ud0a4\ud14d\uccd0 Layer\uc758 \ubcf8\uc9c8"}),"\n",(0,s.jsxs)(n.p,{children:["\uac04\ub2e8\ud55c \ud398\uc774\uc9c0\uc77c \uacbd\uc6b0 \uc704\uc640 \uac19\uc740 \uacfc\uc815\uc740 \ubd88\ud544\uc694\ud558\ub2e4 \ud615\uc2dd\uc5d0 \uc9d1\uc911\ud558\uc9c0 \ub9d0\uace0 \ubcf8\uc9c8\uc744 \ubc14\ub77c\ubcf4\uc790",(0,s.jsx)(n.br,{}),"\n","\uc704\uc640 \uac19\uc740 Layer \uad6c\uc870\ub97c \uc120\ud0dd\ud55c \uc774\uc720\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc9d1\uc911\ub41c \ub85c\uc9c1\uc744 \uc801\uc808\ud788 \ubd84\ubc30\ud558\uace0 \uac00\ub3c5\uc131/\uac1c\ubc1c\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\uae30 \uc704\ud55c \uac83",(0,s.jsx)(n.br,{}),"\n","Class\uc758 \ub2e8\uc77c\ucc45\uc784\uc6d0\uce59\uae4c\uc9c0\ub294 \uc5b4\ub835\uc9c0\ub9cc \uc5ed\ud560\uc744 \uc801\uc808\ud788 \ubd84\uc0b0\uc2dc\ucf1c \uc720\uc9c0\ubcf4\uc218\uc5d0 \uc6a9\uc774\ud558\ub2e4."]}),"\n",(0,s.jsx)(n.h2,{id:"\uc601\uc0c1-\ud55c\uc904-\ud3c9",children:"\uc601\uc0c1 \ud55c\uc904 \ud3c9"}),"\n",(0,s.jsx)(n.p,{children:"\uc6d0\ub798 \uc801\uc808\ud788\uac00 \uc81c\uc77c \uc5b4\ub824\uc6c0"})]})}function h(e={}){const{wrapper:n}={...(0,r.M)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>d,M:()=>l});var s=t(1504);const r={},i=s.createContext(r);function l(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1ec96c11.ea1ecfa9.js b/assets/js/1ec96c11.ea1ecfa9.js new file mode 100644 index 0000000..42e25be --- /dev/null +++ b/assets/js/1ec96c11.ea1ecfa9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[2576],{8320:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>d,toc:()=>c});var s=t(7624),r=t(2172);const i={sidebar_position:6},l="[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand",d={id:"Frontend/woowa-state-manage",title:"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand",description:"\uc608\uc81c\ucf54\ub4dc\ub294 \uc81c\uc678\ud588\uc2b5\ub2c8\ub2e4",source:"@site/docs/Frontend/woowa-state-manage.md",sourceDirName:"Frontend",slug:"/Frontend/woowa-state-manage",permalink:"/docs/Frontend/woowa-state-manage",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/Frontend/woowa-state-manage.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"WikiSidebar",previous:{title:"FrontEnd\uc758 modal\uad00\ub9ac",permalink:"/docs/Frontend/popover"},next:{title:"\uba54\ubaa8",permalink:"/docs/OS/memo"}},a={},c=[{value:"\ubc30\uacbd",id:"\ubc30\uacbd",level:2},{value:"\uc0c1\ud0dc\uad00\ub9ac \ubc29\ubc95\uc758 \ubcc0\ud654",id:"\uc0c1\ud0dc\uad00\ub9ac-\ubc29\ubc95\uc758-\ubcc0\ud654",level:2},{value:"ReactQuery/Zustand \ub3c4\uc785 \ubc30\uacbd",id:"reactqueryzustand-\ub3c4\uc785-\ubc30\uacbd",level:2},{value:"Redux vs ReactQuery",id:"redux-vs-reactquery",level:2},{value:"Redux vs Zustand",id:"redux-vs-zustand",level:2},{value:"\ud45c\uc900 \uac1c\ubc1c \ud658\uacbd \uc124\uc815 \ubc0f \ud65c\uc6a9",id:"\ud45c\uc900-\uac1c\ubc1c-\ud658\uacbd-\uc124\uc815-\ubc0f-\ud65c\uc6a9",level:2},{value:"queries \uc640 stores \ud65c\uc6a9",id:"queries-\uc640-stores-\ud65c\uc6a9",level:2},{value:"1. Component Layer",id:"1-component-layer",level:3},{value:"2. Business Layer/hooks",id:"2-business-layerhooks",level:3},{value:"3. Store Layer/queries",id:"3-store-layerqueries",level:3},{value:"4. Store Layer/stores",id:"4-store-layerstores",level:3},{value:"\uc544\ud0a4\ud14d\uccd0 Layer\uc758 \ubcf8\uc9c8",id:"\uc544\ud0a4\ud14d\uccd0-layer\uc758-\ubcf8\uc9c8",level:2},{value:"\uc601\uc0c1 \ud55c\uc904 \ud3c9",id:"\uc601\uc0c1-\ud55c\uc904-\ud3c9",level:2}];function o(e){const n={a:"a",br:"br",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.M)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"woowacon-2023-\ud504\ub860\ud2b8\uc5d4\ub4dc-\uc0c1\ud0dc\uad00\ub9ac-\uc2e4\uc804-\ud3b8-with-react-query--zustand",children:"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.em,{children:"\uc608\uc81c\ucf54\ub4dc\ub294 \uc81c\uc678\ud588\uc2b5\ub2c8\ub2e4"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.youtube.com/watch?v=nkXIpGjVxWU&list=PLgXGHBqgT2TundZ81MAVHPzeYOTeII69j&index=21",children:"\ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand"})}),"\n",(0,s.jsx)(n.li,{children:"\ucf54\uc5b4\uc6f9\ud504\ub860\ud2b8\uac1c\ubc1c\ud300 \ubc30\ubbfc\uadfc"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"\ubc30\uacbd",children:"\ubc30\uacbd"}),"\n",(0,s.jsxs)(n.p,{children:["State(\uc0c1\ud0dc)\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uba54\ubaa8\ub9ac\uc774\ub2e4. \ud604\uc7ac \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc758 \uc911\uc2ec\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc788\uace0",(0,s.jsx)(n.br,{}),"\n","\ub9ce\uc740 \ubc1c\uc804\uc744 \uac70\ub4ed\ud558\uba74\uc11c \ub2e8\uc21c \uc815\uc801\ud398\uc774\uc9c0\uac00 \uc544\ub2cc \ud31d\uc5c5\uc774\ub098 \uc8fc\ubb38/\ubc30\ub2ec\uc758 \uc9c4\ud589\uc744 \ubcf4\uc5ec\uc8fc\ub294 \uc218\ub9ce\uc740 \uc778\ud130\ub799\uc158\uc744 \ub2f4\ub2f9\ud558\uac8c \ub418\uc5c8\uc74c.",(0,s.jsx)(n.br,{}),"\n","\uc774\ub7f0 \uc0c1\ud0dc\ub294 \ub300\ud45c\uc801\uc73c\ub85c ",(0,s.jsx)(n.code,{children:"useState"}),"\uc640 \uac19\uc774 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uadc0\uc18d\ub418\uc5b4 \uc788\ub294 \uac1c\ub150\uc774\uc9c0\ub9cc",(0,s.jsx)(n.br,{}),"\n","\ud504\ub85c\ub355\ud2b8 \uc804\ubc18\uc5d0 \uac78\uccd0 \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ub420 \uc218 \ub3c4 \uc788\ub294\ub370 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uadc0\uc18d\ub418\uc5b4 \uc788\uc9c0\uc54a\ub294 \uc0c8\ub85c\uc6b4 \uc0c1\ud0dc\uad00\ub9ac \ubc29\ubc95\ub860\uc744 \ud544\uc694\ub85c \ud568"]}),"\n",(0,s.jsx)(n.h2,{id:"\uc0c1\ud0dc\uad00\ub9ac-\ubc29\ubc95\uc758-\ubcc0\ud654",children:"\uc0c1\ud0dc\uad00\ub9ac \ubc29\ubc95\uc758 \ubcc0\ud654"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"\ucef4\ud3ec\ub10c\ud2b8 \uacc4\uce35\ubd84\ub9ac"}),"\n",(0,s.jsx)(n.li,{children:"Props Drilling"}),"\n",(0,s.jsx)(n.li,{children:"Redux"}),"\n",(0,s.jsx)(n.li,{children:"MobX\ub4f1 \ud6c4\ubc1c\uc8fc\uc790 \ub4f1\uc7a5 (Redux\uc758 \ucf54\ub4dc\uac00 \ub108\ubb34 \ub9ce\uc74c)"}),"\n",(0,s.jsx)(n.li,{children:"React Hooks/Context API \uc640 \uae30\uc874 \uc0c1\ud0dc\uad00\ub9ac\uc758 \ud55c\uacc4 \ub3c4\ub2ec"}),"\n",(0,s.jsx)(n.li,{children:"Post Redux \uc0c1\ud0dc\uad00\ub9ac (Recoil,Zustand..)"}),"\n",(0,s.jsx)(n.li,{children:"\uc6d0\uaca9 \uc0c1\ud0dc\uad00\ub9ac \ubc29\ubc95 \ubd84\ub9ac\uc2dc\ub3c4(React-query, SWR..)"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"reactqueryzustand-\ub3c4\uc785-\ubc30\uacbd",children:"ReactQuery/Zustand \ub3c4\uc785 \ubc30\uacbd"}),"\n",(0,s.jsxs)(n.p,{children:["Store\uac00 \ud06c\uace0 \ubcf5\uc7a1\ud574\uc9c0\uba74\uc11c \uc0c1\ud0dc\uad00\ub9ac\ub77c\uae30 \ubcf4\ub2e4 API\ub97c \ud638\ucd9c\ud558\ub294 \ucf54\ub4dc\uac00 \ub354 \ub9ce\uc544\uc9d0",(0,s.jsx)(n.br,{}),"\n","\uc0c1\ud0dc\uad00\ub9ac\ub97c \uc704\ud55c \ub3c4\uad6c\uc778\ub370 API fetching\uc6a9\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc801\uc808\ud55c\uac00? -> ReactQuery",(0,s.jsx)(n.br,{}),"\n","Store\ub294 \uac04\ub2e8\ud574\uc84c\uc9c0\ub9cc \ucef4\ud3ec\ub10c\ud2b8\uc758 \ubcf5\uc7a1\uc131 \uc99d\uac00, \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1 \ub300\ubd80\ubd84\uc774 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc788\uc74c",(0,s.jsx)(n.br,{}),"\n","\uc5bc\ub9c8 \ub0a8\uc544\uc788\uc9c0\ub3c4 \uc54a\uc740 \uc0c1\ud0dc\ub97c \uad73\uc774 MobX\ub85c \uc0ac\uc6a9\ud574\uc57c \ud558\ub294\uac00? -> Zustand"]}),"\n",(0,s.jsxs)(n.p,{children:["\ub530\ub77c\uc11c Client\uc5d0\uc11c \uc628\uc804\ud788 \uad00\ub9ac\uac00\ub2a5\ud55c \uc0c1\ud0dc\ub294 Zustand\ub85c, Client \uc678\ubd80\uc5d0\uc11c \uc18c\uc720\ud558\uba70",(0,s.jsx)(n.br,{}),"\n","Server State\uc778 \uacbd\uc6b0\ub294 React Query\ub85c \uad00\ub9ac\ud55c\ub2e4.(Client\uc5d0\uc11c\ub294 \uc77c\uc885\uc758 \uce90\uc2dc\ud615\ud0dc\ub85c \uc874\uc7ac\ud568)"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://techblog.woowahan.com/6339/",children:"Store\uc5d0\uc11c \ube44\ub3d9\uae30 \ud1b5\uc2e0 \ubd84\ub9ac\ud558\uae30 (feat. React Query)"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"redux-vs-reactquery",children:"Redux vs ReactQuery"}),"\n",(0,s.jsx)(n.p,{children:"\ud300 \ub0b4 \ub3c4\uba54\uc778\ub4e4\uc774 \uc11c\ubc84\uc640 \uc720\uae30\uc801\uc73c\ub85c \uc5bd\ud600\uc788\uc73c\uba74\uc11c \ube44\ub3d9\uae30 \ud638\ucd9c \uc804\ub7b5\uc774 \uc694\uad6c\ub418\ubbc0\ub85c ReactQuery\uac00 \uc801\ud569\ud558\ub2e4."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"API \ud638\ucd9c \ucf54\ub4dc\ub85c \ube44\ub300\ud574\uc9c4 Store\ub97c \ubaa9\uc801\uc5d0 \ub9de\uac8c \ubd84\ub9ac\ud568"}),"\n",(0,s.jsx)(n.li,{children:"\ub9ac\uc5d1\ud2b8 \ud6c5\uacfc \ube44\uc2b7\ud55c \uc9c1\uad00\uc801\uc778 \uc0ac\uc6a9\uc131"}),"\n",(0,s.jsx)(n.li,{children:"\uc5ec\ub7ec \uc778\ud130\ud398\uc774\uc2a4&\uc635\uc158\uc744 \uc81c\uacf5\ud574 \uc801\uc740 \ucf54\ub4dc\ub85c \uac15\ub825\ud558\uac8c \ub3d9\uc791"}),"\n",(0,s.jsx)(n.li,{children:"\uc790\uccb4 \uac1c\ubc1c\ub3c4\uad6c \uc81c\uacf5"}),"\n"]}),"\n",(0,s.jsx)("h3",{children:"1. API\ud638\ucd9c\ucf54\ub4dc\uc5d0 Polling\uc744 \uad6c\ud604\ud560 \ub54c"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Redux"}),(0,s.jsx)(n.th,{children:"ReactQuery"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"1. Action \uc120\uc5b8"}),(0,s.jsx)(n.td,{children:"1. Query \uc120\uc5b8 + \uc635\uc158"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"2. State \ucd94\uac00"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"3. Reducer \ub300\uc751"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"4. saga \ud3f4\ub9c1 \uad6c\ud604"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"5. \ucef4\ud3ec\ub10c\ud2b8 \uc5f0\uacb0"}),(0,s.jsx)(n.td,{})]})]})]}),"\n",(0,s.jsx)("h3",{children:"2. API \ud638\ucd9c \uc0c1\ud0dc \ud655\uc778"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"center"},children:"Redux"}),(0,s.jsx)(n.th,{style:{textAlign:"center"},children:"ReactQuery"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:"1. State \ucd94\uac00"}),(0,s.jsx)(n.td,{style:{textAlign:"center"},children:"1. Query\uc5d0\uc11c \uc81c\uacf5"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:"2. Reducer \ub300\uc751"}),(0,s.jsx)(n.td,{style:{textAlign:"center"}})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:"3. \ucef4\ud3ec\ub10c\ud2b8 \uc5f0\uacb0"}),(0,s.jsx)(n.td,{style:{textAlign:"center"}})]})]})]}),"\n",(0,s.jsx)(n.h2,{id:"redux-vs-zustand",children:"Redux vs Zustand"}),"\n",(0,s.jsxs)(n.p,{children:["\uc678\ubd80 \uc0c1\ud0dc\uad00\ub9ac \ub3c4\uad6c\uc758 \uc758\uc874\ub3c4\uac00 \ub0ae\uc740 \ud300 \ub0b4 \ucf54\ub4dc\uc640",(0,s.jsx)(n.br,{}),"\n","\uc804\uc5ed \uc0c1\ud0dc\ub97c \ucd5c\uc18c\ud654\ud558\ub294 \ud300 \ubc29\ud5a5\uc131\uc5d0 \uc801\ud569"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"\ucef4\ud3ec\ub10c\ud2b8 \ubc16\uc5d0\uc11c\ub3c4 \uc0c1\ud0dc\ubcc0\uacbd \uac00\ub2a5"}),"\n",(0,s.jsx)(n.li,{children:"\uc0ac\uc6a9\uc131\uc774 \ub2e8\uc21c\ud568"}),"\n",(0,s.jsx)(n.li,{children:"\uc0c1\ud0dc\uad00\ub9ac\uc5d0 \ud544\uc694\ud55c \ucf54\ub4dc\uac00 \uc801\uc74c"}),"\n",(0,s.jsx)(n.li,{children:"Redux Devtools \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8 \ud65c\uc6a9\uac00\ub2a5"}),"\n"]}),"\n",(0,s.jsx)("h3",{children:"1. Store \uad6c\ud604"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Redux"}),(0,s.jsx)(n.th,{children:"Zustand"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"1. \uc2a4\ud1a0\uc5b4 \ubc0f \uc0c1\ud0dc \uc120\uc5b8"}),(0,s.jsx)(n.td,{children:"1. \uc2a4\ud1a0\uc5b4\uc5d0 \ubaa8\ub450 \uad6c\ud604"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"2. Action \uc120\uc5b8"}),(0,s.jsx)(n.td,{children:"2. \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ud638\ucd9c"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"3. Reducer \uad6c\ud604"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"4. Provider \uc5f0\uacb0"}),(0,s.jsx)(n.td,{})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"5. \ucef4\ud3ec\ub10c\ud2b8 \uc5f0\uacb0"}),(0,s.jsx)(n.td,{})]})]})]}),"\n",(0,s.jsx)(n.h2,{id:"\ud45c\uc900-\uac1c\ubc1c-\ud658\uacbd-\uc124\uc815-\ubc0f-\ud65c\uc6a9",children:"\ud45c\uc900 \uac1c\ubc1c \ud658\uacbd \uc124\uc815 \ubc0f \ud65c\uc6a9"}),"\n",(0,s.jsx)(n.p,{children:"\ub808\uc774\uc5b4\ub97c 5\uac1c\ub85c \uad6c\ubd84\ud558\uc5ec \uad00\ub9ac"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Page Layer"}),"\n",(0,s.jsx)(n.li,{children:"Component Layer"}),"\n",(0,s.jsx)(n.li,{children:"Business Layer (Hooks, Services)"}),"\n",(0,s.jsx)(n.li,{children:"Store Layer (Queries, Stores)"}),"\n",(0,s.jsx)(n.li,{children:"Utility Layer"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"queries-\uc640-stores-\ud65c\uc6a9",children:"queries \uc640 stores \ud65c\uc6a9"}),"\n",(0,s.jsx)(n.h3,{id:"1-component-layer",children:"1. Component Layer"}),"\n",(0,s.jsx)(n.p,{children:"\ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc5d0\uc11c hooks, store, services\ub97c \ud638\ucd9c\ud568"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="PocketListContainer.tsx"',children:"const PocketListContainer = () => {\n //...\n\n //zustand\n const { handler } = useBaeminpayModuleStore();\n const { selectedPocket, onSelectPocket } = usePayMethodStore();\n\n //hooks\n const { pocketList } = usePocketListViewModel();\n\n const handleSelectPocket = async (pocket: PocketItemViewModel) => {\n //services\n sendPocketSelectLog();\n };\n\n //...\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"2-business-layerhooks",children:"2. Business Layer/hooks"}),"\n",(0,s.jsxs)(n.p,{children:["pocketList\ub97c \ub9ac\ud134\ud558\uae30 \uc704\ud574 4\uac1c\uc758 \ucffc\ub9ac \ud638\ucd9c, store\ub97c \ud638\ucd9c\ud558\uace0 covertViewModel\uc744 \ud1b5\ud574 \ub370\uc774\ud130 \uac00\uacf5",(0,s.jsx)(n.br,{}),"\n","\ucef4\ud3ec\ub10c\ud2b8\ub2e8\uc5d0\uc11c \ucffc\ub9ac \ud638\ucd9c\uc744 \ud588\ub2e4\uba74 \uac00\ub3c5\uc131\uc774 \uc800\ud558\ub428"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="usePocketListViewModel.ts"',children:"const usePocketListViewModel = () => {\n // queries\n const { data: baeminpayPocketListData } = useFetchBaeminpayPocketListQuery();\n const { data: baeminpayMemberInfoData } = useFetchBaeminpayMemberInfoQuery();\n const { data: baeminpayMoneyInfoData } = useFetchBaeminpayMoneyInfoQuery();\n const { data: baeminpayMoneyAMLStatusData } = useFetchBaeminpayMoneyAMLStatusQuery();\n\n // store\n const { config } = useBaeminpayModuleStore();\n\n const convertPocketList = useMemo(() => {\n //...\n return convertPocketListViewModel({\n // \ub370\uc774\ud130 \uac00\uacf5\n });\n }, []);\n\n //...\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"3-store-layerqueries",children:"3. Store Layer/queries"}),"\n",(0,s.jsxs)(n.p,{children:["API \ud638\ucd9c\uc2dc global state\ub97c \ucc38\uc870\ud558\ub294 \uacbd\uc6b0\ub3c4 \uc788\uae30\ub9c8\ub828",(0,s.jsx)(n.br,{}),"\n","\ub530\ub77c\uc11c \ucffc\ub9ac\ub0b4\ubd80\uc5d0\uc11c\ub3c4 store\ub97c \ud638\ucd9c\ud558\ub294 \uacbd\uc6b0 \uc874\uc7ac \uc678\ubd80\uc5d0\uc11c \ubc1b\ub294\uacbd\uc6b0\ub3c4 \uc788\uace0 store\uc5d0\uc11c \ubc1b\uc744 \uc218\ub3c4 \uc788\uc74c",(0,s.jsx)(n.br,{}),"\n","\ubcf8\uc778\uc774 \uc9c0\ud5a5\ud558\ub294 \ubc14\uc5d0\ub530\ub77c \uacb0\uc815"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="useFetchBaeminpayPocketListQuery.ts"',children:"const baeminpayQueryKey = createQueryKey('baeminpay', {\n pocketList: (params: FetchBaeminpayPocketListRequest) => [params],\n});\n\nexport const useFetchBaeminpayPocketListQuery = (options?: { enabled: boolean }) => {\n // store\n const { user } = useBaeminpayModuleStore();\n\n return useQuery({\n context: queryContext,\n //...\n });\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"4-store-layerstores",children:"4. Store Layer/stores"}),"\n",(0,s.jsx)(n.p,{children:"\uc77c\ubc18\uc801\uc778 store\uc758 \ud615\ud0dc"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="useBaeminpayModuleStore.ts"',children:"export const useBaeminpayModuleStore = create(() => ({\n initialized: false,\n //...\n}));\n\nexport const initializeBaeminpayModule = (moduleData: ModuleData) => {\n useBaeminpayModuleStore.setState({\n ...moduleData,\n initialized: true,\n });\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"\uc544\ud0a4\ud14d\uccd0-layer\uc758-\ubcf8\uc9c8",children:"\uc544\ud0a4\ud14d\uccd0 Layer\uc758 \ubcf8\uc9c8"}),"\n",(0,s.jsxs)(n.p,{children:["\uac04\ub2e8\ud55c \ud398\uc774\uc9c0\uc77c \uacbd\uc6b0 \uc704\uc640 \uac19\uc740 \uacfc\uc815\uc740 \ubd88\ud544\uc694\ud558\ub2e4 \ud615\uc2dd\uc5d0 \uc9d1\uc911\ud558\uc9c0 \ub9d0\uace0 \ubcf8\uc9c8\uc744 \ubc14\ub77c\ubcf4\uc790",(0,s.jsx)(n.br,{}),"\n","\uc704\uc640 \uac19\uc740 Layer \uad6c\uc870\ub97c \uc120\ud0dd\ud55c \uc774\uc720\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc9d1\uc911\ub41c \ub85c\uc9c1\uc744 \uc801\uc808\ud788 \ubd84\ubc30\ud558\uace0 \uac00\ub3c5\uc131/\uac1c\ubc1c\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\uae30 \uc704\ud55c \uac83",(0,s.jsx)(n.br,{}),"\n","Class\uc758 \ub2e8\uc77c\ucc45\uc784\uc6d0\uce59\uae4c\uc9c0\ub294 \uc5b4\ub835\uc9c0\ub9cc \uc5ed\ud560\uc744 \uc801\uc808\ud788 \ubd84\uc0b0\uc2dc\ucf1c \uc720\uc9c0\ubcf4\uc218\uc5d0 \uc6a9\uc774\ud558\ub2e4."]}),"\n",(0,s.jsx)(n.h2,{id:"\uc601\uc0c1-\ud55c\uc904-\ud3c9",children:"\uc601\uc0c1 \ud55c\uc904 \ud3c9"}),"\n",(0,s.jsx)(n.p,{children:"\uc6d0\ub798 \uc801\uc808\ud788\uac00 \uc81c\uc77c \uc5b4\ub824\uc6c0"})]})}function h(e={}){const{wrapper:n}={...(0,r.M)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>d,M:()=>l});var s=t(1504);const r={},i=s.createContext(r);function l(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/419b793c.968b6a33.js b/assets/js/419b793c.968b6a33.js new file mode 100644 index 0000000..d6a9ae7 --- /dev/null +++ b/assets/js/419b793c.968b6a33.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[9232],{4772:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=t(7624),s=t(2172);const r={sidebar_position:1},i="\uba54\ubaa8",c={id:"OS/memo",title:"\uba54\ubaa8",description:"VSCode\uc5d0\uc11c C/C++ \ucef4\ud30c\uc77c \uba85\ub839\uc5b4(MAC OS)",source:"@site/docs/OS/memo.md",sourceDirName:"OS",slug:"/OS/memo",permalink:"/docs/OS/memo",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/OS/memo.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"WikiSidebar",previous:{title:"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand",permalink:"/docs/Frontend/woowa-state-manage"},next:{title:"WSL2 + VSCode \uae30\ubc18 \ub9ac\ub205\uc2a4 \uac1c\ubc1c\ud658\uacbd \uc124\uc815",permalink:"/docs/OS/install_wsl"}},d={},l=[{value:"VSCode\uc5d0\uc11c C/C++ \ucef4\ud30c\uc77c \uba85\ub839\uc5b4(MAC OS)",id:"vscode\uc5d0\uc11c-cc-\ucef4\ud30c\uc77c-\uba85\ub839\uc5b4mac-os",level:2},{value:"\ucee4\ub110",id:"\ucee4\ub110",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",li:"li",pre:"pre",ul:"ul",...(0,s.M)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"\uba54\ubaa8",children:"\uba54\ubaa8"}),"\n",(0,o.jsx)(n.h2,{id:"vscode\uc5d0\uc11c-cc-\ucef4\ud30c\uc77c-\uba85\ub839\uc5b4mac-os",children:"VSCode\uc5d0\uc11c C/C++ \ucef4\ud30c\uc77c \uba85\ub839\uc5b4(MAC OS)"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\uc54c\uace0\ub9ac\uc998\uc6a9/",(0,o.jsx)(n.code,{children:""})]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-powershell",children:"// \ucef4\ud30c\uc77c\ng++ -std=c++14 -Wall { FileName }.cpp -o test.out\n\n// \uc2e4\ud589\n./test.out\n"})}),"\n",(0,o.jsx)(n.h2,{id:"\ucee4\ub110",children:"\ucee4\ub110"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"\uc6b4\uc601\uccb4\uc81c\uc758 \ud575\uc2ec\uc73c\ub85c \ucef4\ud4e8\ud130 \uc790\uc6d0\ub4e4\uc744 \uad00\ub9ac\ud558\ub294 \uc5ed\ud560"}),"\n"]})]})}function u(e={}){const{wrapper:n}={...(0,s.M)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>c,M:()=>i});var o=t(1504);const s={},r=o.createContext(s);function i(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/419b793c.ca2f7994.js b/assets/js/419b793c.ca2f7994.js deleted file mode 100644 index 49dc8c3..0000000 --- a/assets/js/419b793c.ca2f7994.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[9232],{4772:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=t(7624),s=t(2172);const r={sidebar_position:1},i="\uba54\ubaa8",c={id:"OS/memo",title:"\uba54\ubaa8",description:"VSCode\uc5d0\uc11c C/C++ \ucef4\ud30c\uc77c \uba85\ub839\uc5b4(MAC OS)",source:"@site/docs/OS/memo.md",sourceDirName:"OS",slug:"/OS/memo",permalink:"/docs/OS/memo",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/OS/memo.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"WikiSidebar",previous:{title:"@actions/toolkit",permalink:"/docs/Frontend/actions-core"},next:{title:"WSL2 + VSCode \uae30\ubc18 \ub9ac\ub205\uc2a4 \uac1c\ubc1c\ud658\uacbd \uc124\uc815",permalink:"/docs/OS/install_wsl"}},d={},l=[{value:"VSCode\uc5d0\uc11c C/C++ \ucef4\ud30c\uc77c \uba85\ub839\uc5b4(MAC OS)",id:"vscode\uc5d0\uc11c-cc-\ucef4\ud30c\uc77c-\uba85\ub839\uc5b4mac-os",level:2},{value:"\ucee4\ub110",id:"\ucee4\ub110",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",li:"li",pre:"pre",ul:"ul",...(0,s.M)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"\uba54\ubaa8",children:"\uba54\ubaa8"}),"\n",(0,o.jsx)(n.h2,{id:"vscode\uc5d0\uc11c-cc-\ucef4\ud30c\uc77c-\uba85\ub839\uc5b4mac-os",children:"VSCode\uc5d0\uc11c C/C++ \ucef4\ud30c\uc77c \uba85\ub839\uc5b4(MAC OS)"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\uc54c\uace0\ub9ac\uc998\uc6a9/",(0,o.jsx)(n.code,{children:""})]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-powershell",children:"// \ucef4\ud30c\uc77c\ng++ -std=c++14 -Wall { FileName }.cpp -o test.out\n\n// \uc2e4\ud589\n./test.out\n"})}),"\n",(0,o.jsx)(n.h2,{id:"\ucee4\ub110",children:"\ucee4\ub110"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"\uc6b4\uc601\uccb4\uc81c\uc758 \ud575\uc2ec\uc73c\ub85c \ucef4\ud4e8\ud130 \uc790\uc6d0\ub4e4\uc744 \uad00\ub9ac\ud558\ub294 \uc5ed\ud560"}),"\n"]})]})}function u(e={}){const{wrapper:n}={...(0,s.M)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>c,M:()=>i});var o=t(1504);const s={},r=o.createContext(s);function i(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ba496fb.8c976fc1.js b/assets/js/5ba496fb.ab7c9f3f.js similarity index 98% rename from assets/js/5ba496fb.8c976fc1.js rename to assets/js/5ba496fb.ab7c9f3f.js index b157819..ba9437a 100644 --- a/assets/js/5ba496fb.8c976fc1.js +++ b/assets/js/5ba496fb.ab7c9f3f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[384],{1140:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>d});var r=t(7624),s=t(2172);const o={sidebar_position:3},l="Next.js 14",i={id:"Frontend/next-14",title:"Next.js 14",description:"- Introduction Next.js \uacf5\uc2dd\ubb38\uc11c",source:"@site/docs/Frontend/next-14.md",sourceDirName:"Frontend",slug:"/Frontend/next-14",permalink:"/docs/Frontend/next-14",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/Frontend/next-14.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"WikiSidebar",previous:{title:"Javascript\uc758 null check",permalink:"/docs/Frontend/js-type"},next:{title:"FrontEnd\uc758 modal\uad00\ub9ac",permalink:"/docs/Frontend/popover"}},c={},d=[{value:"App Router",id:"app-router",level:2},{value:"Route Groups",id:"route-groups",level:2},{value:"Parallel Routes",id:"parallel-routes",level:2},{value:"Intercepting Routes",id:"intercepting-routes",level:2},{value:"Convention",id:"convention",level:3},{value:"API References",id:"api-references",level:2},{value:"Functions",id:"functions",level:3}];function a(e){const n={a:"a",admonition:"admonition",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,s.M)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"nextjs-14",children:"Next.js 14"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.a,{href:"https://nextjs.org/docs",children:"Introduction"})," Next.js \uacf5\uc2dd\ubb38\uc11c"]}),"\n",(0,r.jsx)(n.li,{children:"\ucc38\uace0\uc6a9\uc73c\ub85c\ub9cc \uc815\ub9ac \uc21c\uc11cX"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"app-router",children:"App Router"}),"\n",(0,r.jsxs)(n.p,{children:["\uc0c8\ub85c\uc6b4 App Router \ub4f1\uc7a5",(0,r.jsx)(n.br,{}),"\n","The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming.",(0,r.jsx)(n.br,{}),"\n","\uae30\uc874\uc758 pages router\ubb38\uc11c\ub3c4 \ub0a8\uc544\uc788\uc73c\ub2c8 \uc120\ud0dd\ud558\uc5ec \ubcfc \uc218 \uc788\uc74c."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"pages router"}),"\uc640\ub294 \ub2ec\ub9ac \ud2b9\uc218\ud30c\uc77c\uc778 ",(0,r.jsx)(n.code,{children:"page.js"}),"\uac00 index\uc5ed\ud560\uc744 \ud568"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="app/page.tsx"',children:"// `app/page.tsx` is the UI for the `/` URL\nexport default function Page() {\n return

Hello, Home page!

;\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"route-groups",children:"Route Groups"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.a,{href:"https://nextjs.org/docs/app/building-your-application/routing/route-groups",children:"Route Groups"}),(0,r.jsx)(n.br,{}),"\n","\uae30\ubcf8\uc801\uc73c\ub85c ",(0,r.jsx)(n.code,{children:"app"}),"\uc548\uc5d0 \uc788\ub294 \ud3f4\ub354\ub4e4\uc740 url\uacbd\ub85c\uc5d0 \ud45c\uc2dc\ub418\uc9c0\ub9cc url\uacbd\ub85c\uc5d0 \ud3ec\ud568\ub418\uc9c0 \uc54a\uc73c\uba74\uc11c \uadf8\ub8f9\uc73c\ub85c \ubb36\uc744 \uc218 \uc788\uc74c",(0,r.jsx)(n.br,{}),"\n","\uad04\ud638\ub85c \ubb36\uc5b4 \uc0dd\uc131(folderName) \uc5ec\ub7ec\uac1c\uc758 \ub3c5\ub9bd\uc801\uc778 \ub808\uc774\uc544\uc6c3\uc744 \uac00\uc838\uc57c \ud558\uac70\ub098 \ud2b9\uc815 \ud398\uc774\uc9c0\ub9cc \ub808\uc774\uc544\uc6c3\uc744 \uac00\uc9c8 \ub54c",(0,r.jsx)(n.br,{}),"\n","\uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4."]}),"\n"]}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Route Groups\uc790\uccb4\ub294 \uc870\uc9c1\uc744 \uc704\ud55c\uac83 \uc678\uc5d0\ub294 \ud070 \uc758\ubbf8\uac00 \uc788\uc9c0 \uc54a\uc74c."}),"\n",(0,r.jsxs)(n.li,{children:["Route Groups\ub97c \uc0ac\uc6a9\ud560\ub54c \ub3d9\uc77c\ud55c \uacbd\ub85c\ub97c \uc0ac\uc6a9\ud558\uba74 \uc548\ub428. ",(0,r.jsx)(n.code,{children:"(shop)/about/page.js"})," / ",(0,r.jsx)(n.code,{children:"(marketing)/about/page.js"})]}),"\n",(0,r.jsx)(n.li,{children:"\ucd5c\uc0c1\uc704 layout\ud30c\uc77c\uc774 \uc5c6\uc774 \uc5ec\ub7ec\uac1c\uc758 RootLayout\uc744 \uc0ac\uc6a9\ud558\ub294\uacbd\uc6b0 RouteGroup \uc548\uc5d0 \uc815\uc758\ud574\uc57c\ud568"}),"\n",(0,r.jsx)(n.li,{children:"\uc5ec\ub7ec\uac1c\uc758 RootLayout\uc744 \ud0d0\uc0c9\ud560 \uacbd\uc6b0 \uc804\uccb4 \ud398\uc774\uc9c0\uac00 \ub85c\ub4dc\ub428."}),"\n"]})}),"\n",(0,r.jsx)(n.h2,{id:"parallel-routes",children:"Parallel Routes"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments",children:"Parallel Routes"})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["\ub3d9\uc77c\ud55c \ub808\uc774\uc544\uc6c3 \ub0b4\uc5d0\uc11c \ud55c\uac1c \uc774\uc0c1\uc758 \ud398\uc774\uc9c0\ub97c \ub3d9\uc2dc \ud639\uc740 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 \uac00\ub2a5.",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.code,{children:"Parallel Route"}),"\ub294 ",(0,r.jsx)(n.code,{children:"Slots"}),"\uc73c\ub85c \uc815\uc758 ",(0,r.jsx)(n.code,{children:"@foldername"}),"\uc640 \uac19\uc774 \uc0dd\uc131",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.code,{children:"Slot"}),"\uc740 \uc0c1\uc704 \ub808\uc774\uc544\uc6c3\uc5d0 Props\ub85c \uc804\ub2ec\ud558\uc5ec \uc0ac\uc6a9\ud568 \uc774\ub294 url\uacbd\ub85c\uc5d0 \uc601\ud5a5\uc744 \uc8fc\uc9c0\uc54a\uc74c."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="app/layout.tsx"',children:"export default function Layout({\n children,\n team,\n analytics,\n}: {\n children: React.ReactNode;\n analytics: React.ReactNode;\n team: React.ReactNode;\n}) {\n return (\n <>\n {children}\n {team}\n {analytics}\n \n );\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"intercepting-routes",children:"Intercepting Routes"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes",children:"Intercepting Routes"})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["url\uc744 intercept\ud558\uc5ec \uc11c\ub85c\ub2e4\ub978 url\uc744 \ub3d9\uc2dc\uc5d0 \ud654\uba74\uc5d0 \ub744\uc6b8\uc218\uc788\uc74c.",(0,r.jsx)(n.br,{}),"\n","\uc608\ub97c\ub4e4\uc5b4 \ud53c\ub4dc\uc5d0\uc11c \uc0ac\uc9c4\uc744 \ud074\ub9ad",(0,r.jsx)(n.code,{children:"photo/123"})," \ud560\ub54c \uc758 \uacbd\ub85c\ub97c \uac00\ub85c\ucc44 url\uc744 \uac00\ub9ac\uace0 \uc624\ubc84\ub808\uc774\ub85c \uc804\ud658 ",(0,r.jsx)(n.code,{children:"/feed"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.h3,{id:"convention",children:"Convention"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"(..)"}),"\uc640 \uac19\uc740 \uaddc\uce59\uc744 \ub530\ub984 \ud3f4\ub354 \uc0c1\ub300\uacbd\ub85c \uaddc\uce59",(0,r.jsx)(n.code,{children:"../"}),"\uacfc \uc720\uc0ac\ud568",(0,r.jsx)(n.br,{}),"\n","\uc774\ub97c \ud65c\uc6a9\ud558\uc5ec \ubaa8\ub2ec\uc744 \ub9cc\ub4e4\ub54c \uc720\uc6a9\ud568"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"url\uc744 \ud1b5\ud574 \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \ubaa8\ub2ec \uc0dd\uc131"}),"\n",(0,r.jsx)(n.li,{children:"\ubaa8\ub2ec\uc744 \ub2eb\ub294\ub300\uc2e0 \ud398\uc774\uc9c0\ub97c \uc0c8\ub85c\uace0\uce60 \ub54c \ucee8\ud14d\uc2a4\ud2b8 \uc720\uc9c0"}),"\n",(0,r.jsx)(n.li,{children:"\uc774\uc804 \uacbd\ub85c\ub85c \uc774\ub3d9\ud558\ub294 \ub300\uc2e0 \ubaa8\ub2ec\uc744 \ub2eb\uc744 \uc218 \uc788\uc74c"}),"\n",(0,r.jsx)(n.li,{children:"\uc55e\uc73c\ub85c \uc774\ub3d9\uc2dc \ubaa8\ub2ec \uc0dd\uc131"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"api-references",children:"API References"}),"\n",(0,r.jsx)(n.p,{children:"The Next.js API reference"}),"\n",(0,r.jsx)(n.h3,{id:"functions",children:"Functions"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"useSelectedLayoutSegment"}),"\n"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\ud638\ucd9c\ub41c \ub808\uc774\uc544\uc6c3\uc758 ",(0,r.jsx)(n.code,{children:"1 depth"}),"\uc544\ub798\uc758 active route\ub97c \uc77d\uc744 \uc218 \uc788\ub294 client component hook"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="app/example-client-component.tsx"',children:"'use client';\n\nimport { useSelectedLayoutSegment } from 'next/navigation';\n\nexport default function ExampleClientComponent() {\n const segment = useSelectedLayoutSegment();\n\n return

Active segment: {segment}

;\n}\n\n// app/layout.js ->\t/dashboard ->\treturn 'dashboard'\n// app/dashboard/layout.js ->\t/dashboard -> return\tnull\n// app/dashboard/layout.js ->\t/dashboard/analytics/monthly ->\treturn 'analytics'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\uc120\ud0dd\uc801\uc73c\ub85c ",(0,r.jsx)(n.code,{children:"parallelRoutesKey"}),"\ub97c \uc77d\uc744 \uc218 \uc788\uc74c"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)\n"})})]})}function u(e={}){const{wrapper:n}={...(0,s.M)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>i,M:()=>l});var r=t(1504);const s={},o=r.createContext(s);function l(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[384],{1140:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>d});var r=t(7624),s=t(2172);const o={sidebar_position:4},l="Next.js 14",i={id:"Frontend/next-14",title:"Next.js 14",description:"- Introduction Next.js \uacf5\uc2dd\ubb38\uc11c",source:"@site/docs/Frontend/next-14.md",sourceDirName:"Frontend",slug:"/Frontend/next-14",permalink:"/docs/Frontend/next-14",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/Frontend/next-14.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"WikiSidebar",previous:{title:"Javascript\uc758 null check",permalink:"/docs/Frontend/js-type"},next:{title:"FrontEnd\uc758 modal\uad00\ub9ac",permalink:"/docs/Frontend/popover"}},c={},d=[{value:"App Router",id:"app-router",level:2},{value:"Route Groups",id:"route-groups",level:2},{value:"Parallel Routes",id:"parallel-routes",level:2},{value:"Intercepting Routes",id:"intercepting-routes",level:2},{value:"Convention",id:"convention",level:3},{value:"API References",id:"api-references",level:2},{value:"Functions",id:"functions",level:3}];function a(e){const n={a:"a",admonition:"admonition",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,s.M)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"nextjs-14",children:"Next.js 14"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.a,{href:"https://nextjs.org/docs",children:"Introduction"})," Next.js \uacf5\uc2dd\ubb38\uc11c"]}),"\n",(0,r.jsx)(n.li,{children:"\ucc38\uace0\uc6a9\uc73c\ub85c\ub9cc \uc815\ub9ac \uc21c\uc11cX"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"app-router",children:"App Router"}),"\n",(0,r.jsxs)(n.p,{children:["\uc0c8\ub85c\uc6b4 App Router \ub4f1\uc7a5",(0,r.jsx)(n.br,{}),"\n","The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming.",(0,r.jsx)(n.br,{}),"\n","\uae30\uc874\uc758 pages router\ubb38\uc11c\ub3c4 \ub0a8\uc544\uc788\uc73c\ub2c8 \uc120\ud0dd\ud558\uc5ec \ubcfc \uc218 \uc788\uc74c."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"pages router"}),"\uc640\ub294 \ub2ec\ub9ac \ud2b9\uc218\ud30c\uc77c\uc778 ",(0,r.jsx)(n.code,{children:"page.js"}),"\uac00 index\uc5ed\ud560\uc744 \ud568"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="app/page.tsx"',children:"// `app/page.tsx` is the UI for the `/` URL\nexport default function Page() {\n return

Hello, Home page!

;\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"route-groups",children:"Route Groups"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.a,{href:"https://nextjs.org/docs/app/building-your-application/routing/route-groups",children:"Route Groups"}),(0,r.jsx)(n.br,{}),"\n","\uae30\ubcf8\uc801\uc73c\ub85c ",(0,r.jsx)(n.code,{children:"app"}),"\uc548\uc5d0 \uc788\ub294 \ud3f4\ub354\ub4e4\uc740 url\uacbd\ub85c\uc5d0 \ud45c\uc2dc\ub418\uc9c0\ub9cc url\uacbd\ub85c\uc5d0 \ud3ec\ud568\ub418\uc9c0 \uc54a\uc73c\uba74\uc11c \uadf8\ub8f9\uc73c\ub85c \ubb36\uc744 \uc218 \uc788\uc74c",(0,r.jsx)(n.br,{}),"\n","\uad04\ud638\ub85c \ubb36\uc5b4 \uc0dd\uc131(folderName) \uc5ec\ub7ec\uac1c\uc758 \ub3c5\ub9bd\uc801\uc778 \ub808\uc774\uc544\uc6c3\uc744 \uac00\uc838\uc57c \ud558\uac70\ub098 \ud2b9\uc815 \ud398\uc774\uc9c0\ub9cc \ub808\uc774\uc544\uc6c3\uc744 \uac00\uc9c8 \ub54c",(0,r.jsx)(n.br,{}),"\n","\uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4."]}),"\n"]}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Route Groups\uc790\uccb4\ub294 \uc870\uc9c1\uc744 \uc704\ud55c\uac83 \uc678\uc5d0\ub294 \ud070 \uc758\ubbf8\uac00 \uc788\uc9c0 \uc54a\uc74c."}),"\n",(0,r.jsxs)(n.li,{children:["Route Groups\ub97c \uc0ac\uc6a9\ud560\ub54c \ub3d9\uc77c\ud55c \uacbd\ub85c\ub97c \uc0ac\uc6a9\ud558\uba74 \uc548\ub428. ",(0,r.jsx)(n.code,{children:"(shop)/about/page.js"})," / ",(0,r.jsx)(n.code,{children:"(marketing)/about/page.js"})]}),"\n",(0,r.jsx)(n.li,{children:"\ucd5c\uc0c1\uc704 layout\ud30c\uc77c\uc774 \uc5c6\uc774 \uc5ec\ub7ec\uac1c\uc758 RootLayout\uc744 \uc0ac\uc6a9\ud558\ub294\uacbd\uc6b0 RouteGroup \uc548\uc5d0 \uc815\uc758\ud574\uc57c\ud568"}),"\n",(0,r.jsx)(n.li,{children:"\uc5ec\ub7ec\uac1c\uc758 RootLayout\uc744 \ud0d0\uc0c9\ud560 \uacbd\uc6b0 \uc804\uccb4 \ud398\uc774\uc9c0\uac00 \ub85c\ub4dc\ub428."}),"\n"]})}),"\n",(0,r.jsx)(n.h2,{id:"parallel-routes",children:"Parallel Routes"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments",children:"Parallel Routes"})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["\ub3d9\uc77c\ud55c \ub808\uc774\uc544\uc6c3 \ub0b4\uc5d0\uc11c \ud55c\uac1c \uc774\uc0c1\uc758 \ud398\uc774\uc9c0\ub97c \ub3d9\uc2dc \ud639\uc740 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 \uac00\ub2a5.",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.code,{children:"Parallel Route"}),"\ub294 ",(0,r.jsx)(n.code,{children:"Slots"}),"\uc73c\ub85c \uc815\uc758 ",(0,r.jsx)(n.code,{children:"@foldername"}),"\uc640 \uac19\uc774 \uc0dd\uc131",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.code,{children:"Slot"}),"\uc740 \uc0c1\uc704 \ub808\uc774\uc544\uc6c3\uc5d0 Props\ub85c \uc804\ub2ec\ud558\uc5ec \uc0ac\uc6a9\ud568 \uc774\ub294 url\uacbd\ub85c\uc5d0 \uc601\ud5a5\uc744 \uc8fc\uc9c0\uc54a\uc74c."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="app/layout.tsx"',children:"export default function Layout({\n children,\n team,\n analytics,\n}: {\n children: React.ReactNode;\n analytics: React.ReactNode;\n team: React.ReactNode;\n}) {\n return (\n <>\n {children}\n {team}\n {analytics}\n \n );\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"intercepting-routes",children:"Intercepting Routes"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes",children:"Intercepting Routes"})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["url\uc744 intercept\ud558\uc5ec \uc11c\ub85c\ub2e4\ub978 url\uc744 \ub3d9\uc2dc\uc5d0 \ud654\uba74\uc5d0 \ub744\uc6b8\uc218\uc788\uc74c.",(0,r.jsx)(n.br,{}),"\n","\uc608\ub97c\ub4e4\uc5b4 \ud53c\ub4dc\uc5d0\uc11c \uc0ac\uc9c4\uc744 \ud074\ub9ad",(0,r.jsx)(n.code,{children:"photo/123"})," \ud560\ub54c \uc758 \uacbd\ub85c\ub97c \uac00\ub85c\ucc44 url\uc744 \uac00\ub9ac\uace0 \uc624\ubc84\ub808\uc774\ub85c \uc804\ud658 ",(0,r.jsx)(n.code,{children:"/feed"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.h3,{id:"convention",children:"Convention"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"(..)"}),"\uc640 \uac19\uc740 \uaddc\uce59\uc744 \ub530\ub984 \ud3f4\ub354 \uc0c1\ub300\uacbd\ub85c \uaddc\uce59",(0,r.jsx)(n.code,{children:"../"}),"\uacfc \uc720\uc0ac\ud568",(0,r.jsx)(n.br,{}),"\n","\uc774\ub97c \ud65c\uc6a9\ud558\uc5ec \ubaa8\ub2ec\uc744 \ub9cc\ub4e4\ub54c \uc720\uc6a9\ud568"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"url\uc744 \ud1b5\ud574 \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \ubaa8\ub2ec \uc0dd\uc131"}),"\n",(0,r.jsx)(n.li,{children:"\ubaa8\ub2ec\uc744 \ub2eb\ub294\ub300\uc2e0 \ud398\uc774\uc9c0\ub97c \uc0c8\ub85c\uace0\uce60 \ub54c \ucee8\ud14d\uc2a4\ud2b8 \uc720\uc9c0"}),"\n",(0,r.jsx)(n.li,{children:"\uc774\uc804 \uacbd\ub85c\ub85c \uc774\ub3d9\ud558\ub294 \ub300\uc2e0 \ubaa8\ub2ec\uc744 \ub2eb\uc744 \uc218 \uc788\uc74c"}),"\n",(0,r.jsx)(n.li,{children:"\uc55e\uc73c\ub85c \uc774\ub3d9\uc2dc \ubaa8\ub2ec \uc0dd\uc131"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"api-references",children:"API References"}),"\n",(0,r.jsx)(n.p,{children:"The Next.js API reference"}),"\n",(0,r.jsx)(n.h3,{id:"functions",children:"Functions"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"useSelectedLayoutSegment"}),"\n"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\ud638\ucd9c\ub41c \ub808\uc774\uc544\uc6c3\uc758 ",(0,r.jsx)(n.code,{children:"1 depth"}),"\uc544\ub798\uc758 active route\ub97c \uc77d\uc744 \uc218 \uc788\ub294 client component hook"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="app/example-client-component.tsx"',children:"'use client';\n\nimport { useSelectedLayoutSegment } from 'next/navigation';\n\nexport default function ExampleClientComponent() {\n const segment = useSelectedLayoutSegment();\n\n return

Active segment: {segment}

;\n}\n\n// app/layout.js ->\t/dashboard ->\treturn 'dashboard'\n// app/dashboard/layout.js ->\t/dashboard -> return\tnull\n// app/dashboard/layout.js ->\t/dashboard/analytics/monthly ->\treturn 'analytics'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\uc120\ud0dd\uc801\uc73c\ub85c ",(0,r.jsx)(n.code,{children:"parallelRoutesKey"}),"\ub97c \uc77d\uc744 \uc218 \uc788\uc74c"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)\n"})})]})}function u(e={}){const{wrapper:n}={...(0,s.M)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>i,M:()=>l});var r=t(1504);const s={},o=r.createContext(s);function l(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8ecb78bc.36ce2ff3.js b/assets/js/8ecb78bc.37410902.js similarity index 97% rename from assets/js/8ecb78bc.36ce2ff3.js rename to assets/js/8ecb78bc.37410902.js index 0bab2fb..f3cfd5e 100644 --- a/assets/js/8ecb78bc.36ce2ff3.js +++ b/assets/js/8ecb78bc.37410902.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[324],{8772:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>c,contentTitle:()=>s,default:()=>a,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var t=o(7624),r=o(2172);const d={sidebar_position:4},s="FrontEnd\uc758 modal\uad00\ub9ac",i={id:"Frontend/popover",title:"FrontEnd\uc758 modal\uad00\ub9ac",description:"1. slice(Redux)\ud558\ub098\ub85c \uad00\ub9ac",source:"@site/docs/Frontend/popover.md",sourceDirName:"Frontend",slug:"/Frontend/popover",permalink:"/docs/Frontend/popover",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/Frontend/popover.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"WikiSidebar",previous:{title:"Next.js 14",permalink:"/docs/Frontend/next-14"},next:{title:"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand",permalink:"/docs/Frontend/woowa-state-manage"}},c={},l=[{value:"Popover",id:"popover",level:2}];function p(e){const n={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,r.M)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"frontend\uc758-modal\uad00\ub9ac",children:"FrontEnd\uc758 modal\uad00\ub9ac"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"slice(Redux)\ud558\ub098\ub85c \uad00\ub9ac"}),"\n",(0,t.jsx)(n.li,{children:"React-portal"}),"\n",(0,t.jsx)(n.li,{children:"html popover"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"popover",children:"Popover"}),"\n",(0,t.jsx)(n.p,{children:"\ucd5c\uc2e0 HTML api \uc2a4\ud399\uc5d0 \ucd94\uac00\ub41c Popover \uc18d\uc131\uc73c\ub85c \ubaa8\ub2ec\uc744 \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.\n5\uc6d4\uc5d0 \uc2e4\ud5d8\ub2e8\uacc4\uc600\ub294\ub370 \ud604\uc7ac\ub294 \ucd9c\uc2dc\ub41c \uc0c1\ud0dc."}),"\n",(0,t.jsxs)(n.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,t.jsx)(n.code,{children:"display:none"}),"\uc18d\uc131",(0,t.jsx)(n.br,{}),"\n",(0,t.jsx)(n.code,{children:"\n\n
My Popover
\n'})}),"\n",(0,t.jsx)(n.p,{children:"2023/10/23 \uae30\uc900 React\uc5d0\ub294 \uc9c0\uc6d0\uc774 \ub418\uc5b4\uc788\uc9c0 \uc54a\uace0 React\uc758 \ud604\uc7ac \uc5f4\ub824\uc788\ub294 \uc774\uc288\uc5d0 \uc758\ud558\uba74,\n\uace7 \ucd94\uac00\ub420 \uc608\uc815\uc774\ub77c\uace0 \ud55c\ub2e4."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://github.com/facebook/react/compare/dddfe688206dafa5646550d351eb9a8e9c53654a...3578155879917d837d8a2cd7112ba6e5386dd52b",children:"Add Popover API support"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Popover_API",children:"Popover API"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://hidde.blog/popover-semantics/",children:"Semantics and the popover attribute: what to use when?"})}),"\n"]}),"\n"]})]})}function a(e={}){const{wrapper:n}={...(0,r.M)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},2172:(e,n,o)=>{o.d(n,{I:()=>i,M:()=>s});var t=o(1504);const r={},d=t.createContext(r);function s(e){const n=t.useContext(d);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),t.createElement(d.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[324],{8772:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>c,contentTitle:()=>s,default:()=>a,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var t=o(7624),r=o(2172);const d={sidebar_position:5},s="FrontEnd\uc758 modal\uad00\ub9ac",i={id:"Frontend/popover",title:"FrontEnd\uc758 modal\uad00\ub9ac",description:"1. slice(Redux)\ud558\ub098\ub85c \uad00\ub9ac",source:"@site/docs/Frontend/popover.md",sourceDirName:"Frontend",slug:"/Frontend/popover",permalink:"/docs/Frontend/popover",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/Frontend/popover.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"WikiSidebar",previous:{title:"Next.js 14",permalink:"/docs/Frontend/next-14"},next:{title:"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand",permalink:"/docs/Frontend/woowa-state-manage"}},c={},l=[{value:"Popover",id:"popover",level:2}];function p(e){const n={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,r.M)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"frontend\uc758-modal\uad00\ub9ac",children:"FrontEnd\uc758 modal\uad00\ub9ac"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"slice(Redux)\ud558\ub098\ub85c \uad00\ub9ac"}),"\n",(0,t.jsx)(n.li,{children:"React-portal"}),"\n",(0,t.jsx)(n.li,{children:"html popover"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"popover",children:"Popover"}),"\n",(0,t.jsx)(n.p,{children:"\ucd5c\uc2e0 HTML api \uc2a4\ud399\uc5d0 \ucd94\uac00\ub41c Popover \uc18d\uc131\uc73c\ub85c \ubaa8\ub2ec\uc744 \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.\n5\uc6d4\uc5d0 \uc2e4\ud5d8\ub2e8\uacc4\uc600\ub294\ub370 \ud604\uc7ac\ub294 \ucd9c\uc2dc\ub41c \uc0c1\ud0dc."}),"\n",(0,t.jsxs)(n.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,t.jsx)(n.code,{children:"display:none"}),"\uc18d\uc131",(0,t.jsx)(n.br,{}),"\n",(0,t.jsx)(n.code,{children:"\n\n
My Popover
\n'})}),"\n",(0,t.jsx)(n.p,{children:"2023/10/23 \uae30\uc900 React\uc5d0\ub294 \uc9c0\uc6d0\uc774 \ub418\uc5b4\uc788\uc9c0 \uc54a\uace0 React\uc758 \ud604\uc7ac \uc5f4\ub824\uc788\ub294 \uc774\uc288\uc5d0 \uc758\ud558\uba74,\n\uace7 \ucd94\uac00\ub420 \uc608\uc815\uc774\ub77c\uace0 \ud55c\ub2e4."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://github.com/facebook/react/compare/dddfe688206dafa5646550d351eb9a8e9c53654a...3578155879917d837d8a2cd7112ba6e5386dd52b",children:"Add Popover API support"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Popover_API",children:"Popover API"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://hidde.blog/popover-semantics/",children:"Semantics and the popover attribute: what to use when?"})}),"\n"]}),"\n"]})]})}function a(e={}){const{wrapper:n}={...(0,r.M)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},2172:(e,n,o)=>{o.d(n,{I:()=>i,M:()=>s});var t=o(1504);const r={},d=t.createContext(r);function s(e){const n=t.useContext(d);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),t.createElement(d.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/935f2afb.75d218e3.js b/assets/js/935f2afb.78b5c1e9.js similarity index 85% rename from assets/js/935f2afb.75d218e3.js rename to assets/js/935f2afb.78b5c1e9.js index 6d8395f..761ea2d 100644 --- a/assets/js/935f2afb.75d218e3.js +++ b/assets/js/935f2afb.78b5c1e9.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[5696],{5988:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"WikiSidebar":[{"type":"category","label":"2024","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"07","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"2024-07-15","href":"/docs/2024/07/07-15","docId":"2024/07/07-15","unlisted":false},{"type":"link","label":"2024-07-16","href":"/docs/2024/07/07-16","docId":"2024/07/07-16","unlisted":false},{"type":"link","label":"2024-07-17","href":"/docs/2024/07/07-17","docId":"2024/07/07-17","unlisted":false}]}]},{"type":"category","label":"Frontend","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?","href":"/docs/Frontend/fe-conf-import","docId":"Frontend/fe-conf-import","unlisted":false},{"type":"link","label":"Javascript\uc758 null check","href":"/docs/Frontend/js-type","docId":"Frontend/js-type","unlisted":false},{"type":"link","label":"Next.js 14","href":"/docs/Frontend/next-14","docId":"Frontend/next-14","unlisted":false},{"type":"link","label":"FrontEnd\uc758 modal\uad00\ub9ac","href":"/docs/Frontend/popover","docId":"Frontend/popover","unlisted":false},{"type":"link","label":"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand","href":"/docs/Frontend/woowa-state-manage","docId":"Frontend/woowa-state-manage","unlisted":false},{"type":"link","label":"@actions/toolkit","href":"/docs/Frontend/actions-core","docId":"Frontend/actions-core","unlisted":false}]},{"type":"category","label":"OS","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"\uba54\ubaa8","href":"/docs/OS/memo","docId":"OS/memo","unlisted":false},{"type":"link","label":"WSL2 + VSCode \uae30\ubc18 \ub9ac\ub205\uc2a4 \uac1c\ubc1c\ud658\uacbd \uc124\uc815","href":"/docs/OS/install_wsl","docId":"OS/install_wsl","unlisted":false}]},{"type":"category","label":"PL","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"\ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub780?","href":"/docs/PL/intro-programming-language","docId":"PL/intro-programming-language","unlisted":false}]},{"type":"category","label":"Tips","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Git Alias\ub85c \uba85\ub839\uc5b4 \uc9c0\uc815","href":"/docs/Tips/git-alias","docId":"Tips/git-alias","unlisted":false},{"type":"link","label":"Github Advanced Search \ud301","href":"/docs/Tips/advanced-search","docId":"Tips/advanced-search","unlisted":false},{"type":"link","label":"pets","href":"/docs/Tips/pets","docId":"Tips/pets","unlisted":false},{"type":"link","label":"How To Speak","href":"/docs/Tips/how-to-speak","docId":"Tips/how-to-speak","unlisted":false},{"type":"link","label":"tree \uba85\ub839\uc5b4 \uc0ac\uc6a9\ud301","href":"/docs/Tips/command-tree","docId":"Tips/command-tree","unlisted":false}]}]},"docs":{"2024/07/07-15":{"id":"2024/07/07-15","title":"2024-07-15","description":"Chrome extension content-script react","sidebar":"WikiSidebar"},"2024/07/07-16":{"id":"2024/07/07-16","title":"2024-07-16","description":"serviceworker to typescript","sidebar":"WikiSidebar"},"2024/07/07-17":{"id":"2024/07/07-17","title":"2024-07-17","description":"execute contentscript","sidebar":"WikiSidebar"},"Frontend/actions-core":{"id":"Frontend/actions-core","title":"@actions/toolkit","description":"github action\uc744 \uac1c\ubc1c\ud558\uae30\uc704\ud55c \ud328\ud0a4\uc9c0 @actions/toolkit\uc758 \ub0b4\ubd80\uad6c\uc870","sidebar":"WikiSidebar"},"Frontend/fe-conf-import":{"id":"Frontend/fe-conf-import","title":"[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?","description":"- FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?","sidebar":"WikiSidebar"},"Frontend/js-type":{"id":"Frontend/js-type","title":"Javascript\uc758 null check","description":"javascript \uc5d0\uc11c\uc758 null\uc740 falsy\ud55c \uc6d0\uc2dc \uac12\uc774\uc9c0\ub9cc \ud0c0\uc785\uc740 object\uc778 \ud2b9\ubcc4\ud55c \uc874\uc7ac.","sidebar":"WikiSidebar"},"Frontend/next-14":{"id":"Frontend/next-14","title":"Next.js 14","description":"- Introduction Next.js \uacf5\uc2dd\ubb38\uc11c","sidebar":"WikiSidebar"},"Frontend/popover":{"id":"Frontend/popover","title":"FrontEnd\uc758 modal\uad00\ub9ac","description":"1. slice(Redux)\ud558\ub098\ub85c \uad00\ub9ac","sidebar":"WikiSidebar"},"Frontend/woowa-state-manage":{"id":"Frontend/woowa-state-manage","title":"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand","description":"\uc608\uc81c\ucf54\ub4dc\ub294 \uc81c\uc678\ud588\uc2b5\ub2c8\ub2e4","sidebar":"WikiSidebar"},"OS/install_wsl":{"id":"OS/install_wsl","title":"WSL2 + VSCode \uae30\ubc18 \ub9ac\ub205\uc2a4 \uac1c\ubc1c\ud658\uacbd \uc124\uc815","description":"1. \uc124\uc815 > \uc2dc\uc2a4\ud15c > \uc815\ubcf4\uc5d0\uc11c \ud655\uc778","sidebar":"WikiSidebar"},"OS/memo":{"id":"OS/memo","title":"\uba54\ubaa8","description":"VSCode\uc5d0\uc11c C/C++ \ucef4\ud30c\uc77c \uba85\ub839\uc5b4(MAC OS)","sidebar":"WikiSidebar"},"PL/intro-programming-language":{"id":"PL/intro-programming-language","title":"\ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub780?","description":"- \uc778\uac04\uc774 \ucef4\ud4e8\ud130\ub85c \uc218\ud589\ud558\uace0\uc790 \ud558\ub294 \ubc14\ub97c \ucef4\ud4e8\ud130\uc5d0\uac8c \uc804\ub2ec\ud558\uae30 \uc704\ud55c \ud45c\ud604\ubc95?","sidebar":"WikiSidebar"},"Tips/advanced-search":{"id":"Tips/advanced-search","title":"Github Advanced Search \ud301","description":"- Advanced search","sidebar":"WikiSidebar"},"Tips/command-tree":{"id":"Tips/command-tree","title":"tree \uba85\ub839\uc5b4 \uc0ac\uc6a9\ud301","description":"\ud3f4\ub354\uc758 \ud558\uc704 \uad6c\uc870\ub97c \uacc4\uce35\uc801\uc73c\ub85c \ud45c\uc2dc\ud560 \ub54c \uc0ac\uc6a9","sidebar":"WikiSidebar"},"Tips/git-alias":{"id":"Tips/git-alias","title":"Git Alias\ub85c \uba85\ub839\uc5b4 \uc9c0\uc815","description":"1. \ucd94\uac00","sidebar":"WikiSidebar"},"Tips/how-to-speak":{"id":"Tips/how-to-speak","title":"How To Speak","description":"2024.06.30 ~ing","sidebar":"WikiSidebar"},"Tips/pets":{"id":"Tips/pets","title":"pets","description":"\uc694\uc998 \uc624\ud508\uc18c\uc2a4\ub4e4 \ucee4\ubba4\ub2c8\ud2f0\uc5d0 \ucc38\uc5ec\ud558\ub824\uace0 \ub514\uc2a4\ucf54\ub4dc \ucc44\ub110\uc5d0\uc11c \ud1a0\ub860\ud558\ub294\uac70 \uad6c\uacbd\ud558\ub294\ub370","sidebar":"WikiSidebar"}}}')}}]); \ No newline at end of file +"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[5696],{5988:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"WikiSidebar":[{"type":"category","label":"2024","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"07","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"2024-07-15","href":"/docs/2024/07/07-15","docId":"2024/07/07-15","unlisted":false},{"type":"link","label":"2024-07-16","href":"/docs/2024/07/07-16","docId":"2024/07/07-16","unlisted":false},{"type":"link","label":"2024-07-17","href":"/docs/2024/07/07-17","docId":"2024/07/07-17","unlisted":false}]}]},{"type":"category","label":"Frontend","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"@actions/toolkit","href":"/docs/Frontend/actions-core","docId":"Frontend/actions-core","unlisted":false},{"type":"link","label":"[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?","href":"/docs/Frontend/fe-conf-import","docId":"Frontend/fe-conf-import","unlisted":false},{"type":"link","label":"Javascript\uc758 null check","href":"/docs/Frontend/js-type","docId":"Frontend/js-type","unlisted":false},{"type":"link","label":"Next.js 14","href":"/docs/Frontend/next-14","docId":"Frontend/next-14","unlisted":false},{"type":"link","label":"FrontEnd\uc758 modal\uad00\ub9ac","href":"/docs/Frontend/popover","docId":"Frontend/popover","unlisted":false},{"type":"link","label":"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand","href":"/docs/Frontend/woowa-state-manage","docId":"Frontend/woowa-state-manage","unlisted":false}]},{"type":"category","label":"OS","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"\uba54\ubaa8","href":"/docs/OS/memo","docId":"OS/memo","unlisted":false},{"type":"link","label":"WSL2 + VSCode \uae30\ubc18 \ub9ac\ub205\uc2a4 \uac1c\ubc1c\ud658\uacbd \uc124\uc815","href":"/docs/OS/install_wsl","docId":"OS/install_wsl","unlisted":false}]},{"type":"category","label":"PL","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"\ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub780?","href":"/docs/PL/intro-programming-language","docId":"PL/intro-programming-language","unlisted":false}]},{"type":"category","label":"Tips","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Git Alias\ub85c \uba85\ub839\uc5b4 \uc9c0\uc815","href":"/docs/Tips/git-alias","docId":"Tips/git-alias","unlisted":false},{"type":"link","label":"Github Advanced Search \ud301","href":"/docs/Tips/advanced-search","docId":"Tips/advanced-search","unlisted":false},{"type":"link","label":"pets","href":"/docs/Tips/pets","docId":"Tips/pets","unlisted":false},{"type":"link","label":"How To Speak","href":"/docs/Tips/how-to-speak","docId":"Tips/how-to-speak","unlisted":false},{"type":"link","label":"tree \uba85\ub839\uc5b4 \uc0ac\uc6a9\ud301","href":"/docs/Tips/command-tree","docId":"Tips/command-tree","unlisted":false}]}]},"docs":{"2024/07/07-15":{"id":"2024/07/07-15","title":"2024-07-15","description":"Chrome extension content-script react","sidebar":"WikiSidebar"},"2024/07/07-16":{"id":"2024/07/07-16","title":"2024-07-16","description":"serviceworker to typescript","sidebar":"WikiSidebar"},"2024/07/07-17":{"id":"2024/07/07-17","title":"2024-07-17","description":"execute contentscript","sidebar":"WikiSidebar"},"Frontend/actions-core":{"id":"Frontend/actions-core","title":"@actions/toolkit","description":"github action\uc744 \uac1c\ubc1c\ud558\uae30\uc704\ud55c \ud328\ud0a4\uc9c0 @actions/toolkit\uc758 \ub0b4\ubd80\uad6c\uc870","sidebar":"WikiSidebar"},"Frontend/fe-conf-import":{"id":"Frontend/fe-conf-import","title":"[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?","description":"- FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?","sidebar":"WikiSidebar"},"Frontend/js-type":{"id":"Frontend/js-type","title":"Javascript\uc758 null check","description":"javascript \uc5d0\uc11c\uc758 null\uc740 falsy\ud55c \uc6d0\uc2dc \uac12\uc774\uc9c0\ub9cc \ud0c0\uc785\uc740 object\uc778 \ud2b9\ubcc4\ud55c \uc874\uc7ac.","sidebar":"WikiSidebar"},"Frontend/next-14":{"id":"Frontend/next-14","title":"Next.js 14","description":"- Introduction Next.js \uacf5\uc2dd\ubb38\uc11c","sidebar":"WikiSidebar"},"Frontend/popover":{"id":"Frontend/popover","title":"FrontEnd\uc758 modal\uad00\ub9ac","description":"1. slice(Redux)\ud558\ub098\ub85c \uad00\ub9ac","sidebar":"WikiSidebar"},"Frontend/woowa-state-manage":{"id":"Frontend/woowa-state-manage","title":"[WOOWACON 2023] \ud504\ub860\ud2b8\uc5d4\ub4dc \uc0c1\ud0dc\uad00\ub9ac \uc2e4\uc804 \ud3b8 with React Query & Zustand","description":"\uc608\uc81c\ucf54\ub4dc\ub294 \uc81c\uc678\ud588\uc2b5\ub2c8\ub2e4","sidebar":"WikiSidebar"},"OS/install_wsl":{"id":"OS/install_wsl","title":"WSL2 + VSCode \uae30\ubc18 \ub9ac\ub205\uc2a4 \uac1c\ubc1c\ud658\uacbd \uc124\uc815","description":"1. \uc124\uc815 > \uc2dc\uc2a4\ud15c > \uc815\ubcf4\uc5d0\uc11c \ud655\uc778","sidebar":"WikiSidebar"},"OS/memo":{"id":"OS/memo","title":"\uba54\ubaa8","description":"VSCode\uc5d0\uc11c C/C++ \ucef4\ud30c\uc77c \uba85\ub839\uc5b4(MAC OS)","sidebar":"WikiSidebar"},"PL/intro-programming-language":{"id":"PL/intro-programming-language","title":"\ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub780?","description":"- \uc778\uac04\uc774 \ucef4\ud4e8\ud130\ub85c \uc218\ud589\ud558\uace0\uc790 \ud558\ub294 \ubc14\ub97c \ucef4\ud4e8\ud130\uc5d0\uac8c \uc804\ub2ec\ud558\uae30 \uc704\ud55c \ud45c\ud604\ubc95?","sidebar":"WikiSidebar"},"Tips/advanced-search":{"id":"Tips/advanced-search","title":"Github Advanced Search \ud301","description":"- Advanced search","sidebar":"WikiSidebar"},"Tips/command-tree":{"id":"Tips/command-tree","title":"tree \uba85\ub839\uc5b4 \uc0ac\uc6a9\ud301","description":"\ud3f4\ub354\uc758 \ud558\uc704 \uad6c\uc870\ub97c \uacc4\uce35\uc801\uc73c\ub85c \ud45c\uc2dc\ud560 \ub54c \uc0ac\uc6a9","sidebar":"WikiSidebar"},"Tips/git-alias":{"id":"Tips/git-alias","title":"Git Alias\ub85c \uba85\ub839\uc5b4 \uc9c0\uc815","description":"1. \ucd94\uac00","sidebar":"WikiSidebar"},"Tips/how-to-speak":{"id":"Tips/how-to-speak","title":"How To Speak","description":"2024.06.30 ~ing","sidebar":"WikiSidebar"},"Tips/pets":{"id":"Tips/pets","title":"pets","description":"\uc694\uc998 \uc624\ud508\uc18c\uc2a4\ub4e4 \ucee4\ubba4\ub2c8\ud2f0\uc5d0 \ucc38\uc5ec\ud558\ub824\uace0 \ub514\uc2a4\ucf54\ub4dc \ucc44\ub110\uc5d0\uc11c \ud1a0\ub860\ud558\ub294\uac70 \uad6c\uacbd\ud558\ub294\ub370","sidebar":"WikiSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/b90aaeac.dc7fef22.js b/assets/js/b90aaeac.dc7fef22.js deleted file mode 100644 index 3d0ae87..0000000 --- a/assets/js/b90aaeac.dc7fef22.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwanderedtola_blog=self.webpackChunkwanderedtola_blog||[]).push([[3176],{2124:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>j,frontMatter:()=>l,metadata:()=>c,toc:()=>t});var s=r(7624),i=r(2172);const l={sidebar_position:1},o="[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?",c={id:"Frontend/fe-conf-import",title:"[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?",description:"- FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?",source:"@site/docs/Frontend/fe-conf-import.md",sourceDirName:"Frontend",slug:"/Frontend/fe-conf-import",permalink:"/docs/Frontend/fe-conf-import",draft:!1,unlisted:!1,editUrl:"https://github.com/WanderedToLa/wanderedtola.blog/tree/master/docs/Frontend/fe-conf-import.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"WikiSidebar",previous:{title:"2024-07-17",permalink:"/docs/2024/07/07-17"},next:{title:"Javascript\uc758 null check",permalink:"/docs/Frontend/js-type"}},d={},t=[{value:"\ubc30\uacbd",id:"\ubc30\uacbd",level:2},{value:"Common JS",id:"common-js",level:2},{value:"\ube44\ubc00\uc740 TS/Babel\uc758 \ud2b8\ub79c\uc2a4\ud30c\uc77c\ub9c1",id:"\ube44\ubc00\uc740-tsbabel\uc758-\ud2b8\ub79c\uc2a4\ud30c\uc77c\ub9c1",level:2},{value:"\ubb38\uc81c\uc810\uc740 \uc5c6\ub098?",id:"\ubb38\uc81c\uc810\uc740-\uc5c6\ub098",level:2},{value:"1.\uc815\uc801 \ubd84\uc11d\uc774 \uc5b4\ub835\ub2e4.",id:"1\uc815\uc801-\ubd84\uc11d\uc774-\uc5b4\ub835\ub2e4",level:3},{value:"2.\ube44\ub3d9\uae30 \ubaa8\ub4c8 \uc815\uc758 \ubd88\uac00\ub2a5",id:"2\ube44\ub3d9\uae30-\ubaa8\ub4c8-\uc815\uc758-\ubd88\uac00\ub2a5",level:3},{value:"3.require \ud568\uc218 \uc7ac\uc815\uc758",id:"3require-\ud568\uc218-\uc7ac\uc815\uc758",level:3},{value:"ECMAScript Modules\ub4f1\uc7a5",id:"ecmascript-modules\ub4f1\uc7a5",level:2},{value:"Node.js \uc5d0\uc11c\uc758 ESM \uaddc\uce59",id:"nodejs-\uc5d0\uc11c\uc758-esm-\uaddc\uce59",level:2},{value:".cjs/.mjs",id:"cjsmjs",level:3},{value:"\ud558\uc9c0\ub9cc \uc5b4\ub835\ub2e4",id:"\ud558\uc9c0\ub9cc-\uc5b4\ub835\ub2e4",level:2},{value:"ESM\uc73c\ub85c \uc62e\uaca8\ub3c4 \ub418\ub294 \uc0c1\ud669",id:"esm\uc73c\ub85c-\uc62e\uaca8\ub3c4-\ub418\ub294-\uc0c1\ud669",level:2},{value:"\ub0b4 \uc11c\ube44\uc2a4\ub97c ESM\uc73c\ub85c \uc62e\uae30\uae30",id:"\ub0b4-\uc11c\ube44\uc2a4\ub97c-esm\uc73c\ub85c-\uc62e\uae30\uae30",level:2},{value:"1.\ud328\ud0a4\uc9c0\ub97c ESM\uc73c\ub85c",id:"1\ud328\ud0a4\uc9c0\ub97c-esm\uc73c\ub85c",level:3},{value:"2.\ud30c\uc77c \ud655\uc7a5\uc790 \ucd94\uac00",id:"2\ud30c\uc77c-\ud655\uc7a5\uc790-\ucd94\uac00",level:3},{value:"3. require() \ud638\ucd9c \uc0ad\uc81c",id:"3-require-\ud638\ucd9c-\uc0ad\uc81c",level:3}];function a(e){const n={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.M)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"feconf-2022-\ub0b4-import-\ubb38\uc774-\uadf8\ub807\uac8c-\uc774\uc0c1\ud588\ub098\uc694",children:"[FECONF 2022] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.youtube.com/watch?v=mee1QbvaO10",children:"FECONF 2022 [B4] \ub0b4 import \ubb38\uc774 \uadf8\ub807\uac8c \uc774\uc0c1\ud588\ub098\uc694?"})}),"\n",(0,s.jsx)(n.li,{children:"\ud1a0\uc2a4 FrontEnd \ubc15\uc11c\uc9c4\ub2d8"}),"\n",(0,s.jsxs)(n.li,{children:["Github ",(0,s.jsx)(n.a,{href:"https://github.com/raon0211",children:"raon0211"})]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"\ubc30\uacbd",children:"\ubc30\uacbd"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-javascript",children:"// 1\nSyntaxError: Unexpected token import\n\n// 2\nError [ERR_REQUIRE_ESM]: require() of ES Module\n"})}),"\n",(0,s.jsxs)(n.p,{children:["\ub300\ud45c\uc801\uc73c\ub85c \uc704\uc640 \uac19\uc740 \uc5d0\ub7ec\ub294 \uc6b0\ub9ac\uc758 \uc774\uc0c1\ud55c import \ubb38 \ub54c\ubb38\uc5d0 \ubc1c\uc0dd\ud558\ub294 \uc5d0\ub7ec",(0,s.jsx)(n.br,{}),"\n","\uc62c\ubc14\ub978 \uc9c4\uc9dc import \ubb38\uc73c\ub85c \ubcc0\uacbd\ud558\uba74 \ud574\uacb0\uac00\ub2a5"]}),"\n",(0,s.jsx)(n.h2,{id:"common-js",children:"Common JS"}),"\n",(0,s.jsxs)(n.p,{children:["javascript\uac00 browser\uc5d0\ub9cc \uc0ac\uc6a9\ub418\ub358 \uc2dc\uc808\uc5d0 module\uc774\ub780 \uac1c\ub150\uc740 \uc874\uc7ac \ud558\uc9c0\uc54a\uc558\uace0",(0,s.jsx)(n.br,{}),"\n",(0,s.jsx)(n.code,{children:"script"})," \ud0dc\uadf8\ub97c \ud1b5\ud574 \uc804\uc5ed\uc801\uc73c\ub85c \uc815\uc758\ub41c \ubcc0\uc218\ub97c \ud1b5\ud574 \uc0ac\uc6a9\ud588\ub2e4."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'\x3c!-- \uc804\uc5ed jquery \uac1d\uccb4 --\x3e\n + diff --git a/blog/docusaurus-plugin.html b/blog/docusaurus-plugin.html index 05e6891..3f32b2a 100644 --- a/blog/docusaurus-plugin.html +++ b/blog/docusaurus-plugin.html @@ -5,7 +5,7 @@ docusaurus custom plugin 만들기 • Wandered2LA - + diff --git a/blog/frontend-observability.html b/blog/frontend-observability.html index d2608be..d56ac20 100644 --- a/blog/frontend-observability.html +++ b/blog/frontend-observability.html @@ -5,7 +5,7 @@ 안전한 프론트엔드 서비스란? • Wandered2LA - + diff --git a/blog/tags.html b/blog/tags.html index 3bf54b2..0b265c5 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 5dc37df..1a68d01 100644 --- a/blog/tags/custom.html +++ b/blog/tags/custom.html @@ -5,7 +5,7 @@ One post tagged with "custom" • Wandered2LA - + diff --git a/blog/tags/docusaurus.html b/blog/tags/docusaurus.html index 5351405..7cdc95b 100644 --- a/blog/tags/docusaurus.html +++ b/blog/tags/docusaurus.html @@ -5,7 +5,7 @@ One post tagged with "docusaurus" • Wandered2LA - + diff --git a/blog/tags/frontend.html b/blog/tags/frontend.html index 03d9162..95b09a9 100644 Binary files a/blog/tags/frontend.html and b/blog/tags/frontend.html differ diff --git a/blog/tags/observability.html b/blog/tags/observability.html index c859b85..c50ce6b 100644 Binary files a/blog/tags/observability.html and b/blog/tags/observability.html differ diff --git a/blog/tags/plugin.html b/blog/tags/plugin.html index 75e77a1..7b88978 100644 --- a/blog/tags/plugin.html +++ b/blog/tags/plugin.html @@ -5,7 +5,7 @@ One post tagged with "plugin" • Wandered2LA - + diff --git a/docs/2024/07/07-15.html b/docs/2024/07/07-15.html index 55057ce..5aad881 100644 --- a/docs/2024/07/07-15.html +++ b/docs/2024/07/07-15.html @@ -5,11 +5,11 @@ 2024-07-15 • Wandered2LA - + -

2024-07-15

+

2024-07-15

Chrome extension content-script react​

Copyright © 2024 WanderedToLa All rights reserved.
\ No newline at end of file diff --git a/docs/Frontend/woowa-state-manage.html b/docs/Frontend/woowa-state-manage.html index 03b1ef3..586fb46 100644 --- a/docs/Frontend/woowa-state-manage.html +++ b/docs/Frontend/woowa-state-manage.html @@ -5,11 +5,11 @@ [WOOWACON 2023] 프론트엔드 상태관리 실전 편 with React Query & Zustand • Wandered2LA - + -

[WOOWACON 2023] 프론트엔드 상태관리 실전 편 with React Query & Zustand

+

[WOOWACON 2023] 프론트엔드 상태관리 실전 편 with React Query & Zustand

예제코드는 제외했습니다

  • 프론트엔드 상태관리 실전 편 with React Query & Zustand
    • @@ -93,6 +93,6 @@

    위와 같은 Layer 구조를 선택한 이유는 컴포넌트에 집중된 로직을 적절히 분배하고 가독성/개발자 경험을 향상시키기 위한 것
    Class의 단일책임원칙까지는 어렵지만 역할을 적절히 분산시켜 유지보수에 용이하다.

    영상 한줄 평​

    -

    원래 적절히가 제일 어려움

Copyright © 2024 WanderedToLa All rights reserved.
+

원래 적절히가 제일 어려움

Copyright © 2024 WanderedToLa All rights reserved.
\ No newline at end of file diff --git a/docs/OS/install_wsl.html b/docs/OS/install_wsl.html index 3169a9c..acb349b 100644 --- a/docs/OS/install_wsl.html +++ b/docs/OS/install_wsl.html @@ -5,11 +5,11 @@ WSL2 + VSCode 기반 리눅스 개발환경 설정 • Wandered2LA - + -

WSL2 + VSCode 기반 리눅스 개발환경 설정

+

WSL2 + VSCode 기반 리눅스 개발환경 설정

  1. 설정 > 시스템 > 정보에서 확인

    diff --git a/docs/OS/memo.html b/docs/OS/memo.html index 06c16a2..c0815f2 100644 --- a/docs/OS/memo.html +++ b/docs/OS/memo.html @@ -5,11 +5,11 @@ 메모 • Wandered2LA - + -

    메모

    +

    메모

    VSCode에서 C/C++ 컴파일 명령어(MAC OS)​

    • 알고리즘용/<bits/stdc++.h>
      • @@ -18,6 +18,6 @@

      커널​

      • 운영체제의 핵심으로 컴퓨터 자원들을 관리하는 역할
        • -
    Copyright © 2024 WanderedToLa All rights reserved.
    +
    Copyright © 2024 WanderedToLa All rights reserved.
    \ No newline at end of file diff --git a/docs/PL/intro-programming-language.html b/docs/PL/intro-programming-language.html index 9a07fd3..806d4eb 100644 --- a/docs/PL/intro-programming-language.html +++ b/docs/PL/intro-programming-language.html @@ -5,11 +5,11 @@ 프로그래밍 언어란? • Wandered2LA - + -

    프로그래밍 언어란?

    +

    프로그래밍 언어란?

    • 인간이 컴퓨터로 수행하고자 하는 바를 컴퓨터에게 전달하기 위한 표현법?

      @@ -86,7 +86,7 @@

      Process abstraction (제어 추상화)​

      +

      Process abstraction (제어 추상화)​

      1. 기계어 명령들 여러개를 구조화 시킴

        diff --git a/docs/Tips/advanced-search.html b/docs/Tips/advanced-search.html index ff105de..0eacaef 100644 --- a/docs/Tips/advanced-search.html +++ b/docs/Tips/advanced-search.html @@ -5,11 +5,11 @@ Github Advanced Search 팁 • Wandered2LA - + -

        Github Advanced Search 팁

        +

        Github Advanced Search 팁

        • Advanced search
        • 원하는 이슈 label 찾기 stars옵션은 repo에만적용 good first issue와 repo의 star갯수는 &&안됨
          • diff --git a/docs/Tips/command-tree.html b/docs/Tips/command-tree.html index 98a8d57..1705c8d 100644 --- a/docs/Tips/command-tree.html +++ b/docs/Tips/command-tree.html @@ -5,11 +5,11 @@ tree 명령어 사용팁 • Wandered2LA - + -

          tree 명령어 사용팁

          +

          tree 명령어 사용팁

          폴더의 하위 구조를 계층적으로 표시할 때 사용

          1. 표시할 depth제한
            2. diff --git a/docs/Tips/git-alias.html b/docs/Tips/git-alias.html index fa25da9..0427162 100644 --- a/docs/Tips/git-alias.html +++ b/docs/Tips/git-alias.html @@ -5,11 +5,11 @@ Git Alias로 명령어 지정 • Wandered2LA - + -

            Git Alias로 명령어 지정

            +

            Git Alias로 명령어 지정

            1. 추가
            @@ -18,7 +18,7 @@
          2. 삭제
          git config --global --unset alias.pl
          -

          참고​

          +

          참고​

          Copyright © 2024 WanderedToLa All rights reserved.
          diff --git a/docs/Tips/how-to-speak.html b/docs/Tips/how-to-speak.html index c50008e..814e642 100644 --- a/docs/Tips/how-to-speak.html +++ b/docs/Tips/how-to-speak.html @@ -5,17 +5,17 @@ How To Speak • Wandered2LA - + -

          How To Speak

          +

          How To Speak

          2024.06.30 ~ing

          -

          사회에서의 성공은 말하기, 글쓰기, 가진 아이디어의 퀄리티 순서로 결정된다.
          +

          사회에서의 성공은 말하기, 글쓰기, 가진 아이디어의 퀄리티 순서로 결정된다.
          이 세가지 능력은 다음 공식에 따른다.

          Quailty = F(K, P, T);

          맨처음으로 많이아는 것 Knowledge, 두번째로는 연습 Practice, 세번째는 재능이다 Talent
          @@ -49,7 +49,7 @@

          The Tools
          Edit this page

          Copyright © 2024 WanderedToLa All rights reserved.
          \ No newline at end of file diff --git a/docs/Tips/pets.html b/docs/Tips/pets.html index 0f947a6..fa285f2 100644 --- a/docs/Tips/pets.html +++ b/docs/Tips/pets.html @@ -5,11 +5,11 @@ pets • Wandered2LA - + -

          pets

          +

          pets

          요즘 오픈소스들 커뮤니티에 참여하려고 디스코드 채널에서 토론하는거 구경하는데
          react 커뮤니티인 Reactiflux 디스코드에 반려동물 얘기하는 탭이 있다 ㅋㅋ.
          반려동물 사랑은 똑같은듯

          diff --git a/index.html b/index.html index 899d35b..b0885be 100644 Binary files a/index.html and b/index.html differ