1"use strict";(self.webpackChunkdocusaurus_blog=self.webpackChunkdocusaurus_blog||[]).push([["2683"],{259(e,n,s){s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>x,frontMatter:()=>c,metadata:()=>l,toc:()=>h});var l=s(4553),i=s(4934),r=s(1137);let c={slug:"1\uB144\uC5EC\uAC04\uC758-\uC81C\uD488-\uAC1C\uC120-\uACBD\uD5D8",title:"1\uB144\uC5EC\uAC04\uC758 \uC81C\uD488 \uAC1C\uC120 \uACBD\uD5D8",tags:["vue","react","node.js","ux/ui","linux"]},d,a={authorsImageUrls:[]},h=[{value:"\uAC1C\uC120 \uB0B4\uC6A9",id:"\uAC1C\uC120-\uB0B4\uC6A9",level:2},{value:"\uCD5C\uC801\uD654",id:"\uCD5C\uC801\uD654",level:2},{value:"\uBC30\uD3EC",id:"\uBC30\uD3EC",level:2},{value:"\uD30C\uC77C \uC5C5\uB85C\uB4DC\uB294 SFTP\uB85C",id:"\uD30C\uC77C-\uC5C5\uB85C\uB4DC\uB294-sftp\uB85C",level:3},{value:"SSH \uC811\uC18D\uD574\uC11C root \uB514\uB809\uD1A0\uB9AC\uB85C \uC62E\uACA8\uC8FC\uAE30",id:"ssh-\uC811\uC18D\uD574\uC11C-root-\uB514\uB809\uD1A0\uB9AC\uB85C-\uC62E\uACA8\uC8FC\uAE30",level:3},{value:"\uC544\uC9C1 \uD574\uACB0\uD558\uC9C0 \uBABB\uD55C \uBB38\uC81C\uB4E4",id:"\uC544\uC9C1-\uD574\uACB0\uD558\uC9C0-\uBABB\uD55C-\uBB38\uC81C\uB4E4",level:2},{value:"PrimeReact \uB300\uC2E0 Tailwind CSS\uB97C \uB354 \uC798 \uD65C\uC6A9\uD560 \uC218 \uC788\uB294 UI \uCEF4\uD3EC\uB10C\uD2B8 \uB77C\uC774\uBE0C\uB7EC\uB9AC",id:"primereact-\uB300\uC2E0-tailwind-css\uB97C-\uB354-\uC798-\uD65C\uC6A9\uD560-\uC218-\uC788\uB294-ui-\uCEF4\uD3EC\uB10C\uD2B8-\uB77C\uC774\uBE0C\uB7EC\uB9AC",level:3},{value:"\uCC28\uD2B8 \uB77C\uC774\uBE0C\uB7EC\uB9AC",id:"\uCC28\uD2B8-\uB77C\uC774\uBE0C\uB7EC\uB9AC",level:3},{value:"\uD14C\uC2A4\uD2B8 \uCF54\uB4DC \uB3C4\uC785",id:"\uD14C\uC2A4\uD2B8-\uCF54\uB4DC-\uB3C4\uC785",level:3},{value:"\uC77C\uAD00\uC801\uC778 \uB514\uC790\uC778",id:"\uC77C\uAD00\uC801\uC778-\uB514\uC790\uC778",level:3},{value:"\uB9C8\uBB34\uB9AC",id:"\uB9C8\uBB34\uB9AC",level:3}];function t(e){let n={a:"a",code:"code",del:"del",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"\uC785\uC0AC\uD558\uACE0 6\uAC1C\uC6D4 \uC988\uC74C, Vue 2(Quasar Framework) \uAE30\uBC18\uC758 \uC81C\uD488\uC744 \uC678\uC8FC \uAC1C\uBC1C\uC790\uAC00 React\uB85C \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uD558\uB358 \uC911\uC5D0 \uACC4\uC57D\uC774 \uC885\uB8CC\uB418\uC5B4 \uC778\uACC4\uB97C \uBC1B\uAC8C \uB418\uC5C8\uB2E4. \uBBF8\uC644\uC131\uB41C React \uBC84\uC804 \uC81C\uD488\uC758 \uAE30\uB2A5\uC744 \uC6D0\uB798\uC758 \uC218\uC900 \uB610\uB294 \uADF8 \uC774\uC0C1\uC73C\uB85C \uB9CC\uB4E4\uAE30 \uC704\uD574 \uC5F4\uC2EC\uD788 \uB72F\uC5B4 \uACE0\uCE68\uACFC \uB3D9\uC2DC\uC5D0 \uAC1C\uBC1C \uD658\uACBD\uC744 \uAC1C\uC120\uD558\uAE30 \uC704\uD574 \uB9CE\uC740 \uC2DC\uB3C4\uB97C \uD588\uB2E4. (\uD604\uC7AC\uC9C4\uD589\uD615)"}),"\n","\n",(0,i.jsxs)(n.p,{children:["Vue.js 2 \uBC84\uC804\uACFC Quasar 1 \uBC84\uC804 \uAE30\uBC18\uC758 \uAE30\uC874 \uC81C\uD488 \uCF54\uB4DC\uB97C \uCC38\uACE0\uD558\uBA70 React \uB9C8\uC774\uADF8\uB808\uC774\uC158\uC744 \uD574\uC57C \uD588\uB2E4. Node.js LTS \uBC84\uC804\uC774 18\uC774\uB358 \uADF8\uB54C \uB2F9\uC2DC\uC758 \uC81C\uD488 \uC2A4\uD399\uC740 Node.js v14\uC640 Vue.js v2 + Quasar Framework v1\uC73C\uB85C \uC0C1\uB2F9\uD788 \uC624\uB79C \uAE30\uAC04 \uB77C\uC774\uBE0C\uB7EC\uB9AC/\uD328\uD0A4\uC9C0 \uBC84\uC804\uC744 \uC2E0\uACBD\uC4F0\uC9C0 \uC54A\uC740 \uC0C1\uD0DC\uC600\uACE0, Node.js \uBC84\uC804\uC5D0 \uD638\uD658\uB418\uC9C0 \uC54A\uB358 \uAE30\uC874 \uC81C\uD488 \uB355\uBD84\uC5D0 \uD55C\uB3D9\uC548\uC740 ",(0,i.jsx)(n.code,{children:"nvm"}),"\uC73C\uB85C \uBC84\uC804\uC744 \uBCC0\uACBD\uD574\uAC00\uBA70 \uC791\uC5C5\uD558\uB290\uB77C \uC0C1\uB2F9\uD788 \uBC88\uAC70\uB85C\uC6B4 \uAE30\uAC04\uC774 \uC788\uC5C8\uB2E4."]}),"\n",(0,i.jsxs)(n.p,{children:["\uC791\uC5C5\uD558\uBA70 \uC774\uB530\uAE08 \uC0B4\uD3B4\uBD24\uB358 ",(0,i.jsx)(n.a,{href:"https://v1.quasar.dev",children:"Quasar v1"}),"\uB3C4 \uC0C1\uB2F9\uD788 \uC88B\uC740 \uD504\uB808\uC784\uC6CC\uD06C\uC778 \uAC83 \uAC19\uC740\uB370, TypeScript\uB97C \uC798 \uC9C0\uC6D0\uD55C\uB2E4\uB294 Vue 3 \uBC84\uC804\uACFC ",(0,i.jsx)(n.a,{href:"https://quasar.dev",children:"Quasar v2"}),"\uC73C\uB85C \uC5C5\uADF8\uB808\uC774\uB4DC\uD558\uACE0 \uB9AC\uD329\uD1A0\uB9C1\uC744 \uC798 \uD574\uC8FC\uC5C8\uB2E4\uBA74 \uAD73\uC774 \uD070 \uBE44\uC6A9\uC744 \uB4E4\uC5EC\uAC00\uBA70 React\uB85C\uC758 \uB9C8\uC774\uADF8\uB808\uC774\uC158\uC774 \uD544\uC694\uD588\uC744\uAE4C? \uB77C\uB294 \uC0DD\uAC01\uB3C4 \uD588\uC5C8\uB2E4. ",(0,i.jsx)(n.del,{children:"\uB355\uBD84\uC5D0 React\uC5D0 \uC775\uC219\uD574\uC84C\uC5B4\uC694"})]}),"\n",(0,i.jsx)(n.h2,{id:"\uAC1C\uC120-\uB0B4\uC6A9",children:"\uAC1C\uC120 \uB0B4\uC6A9"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uD3EC\uB9F7\uD305\uC774 \uC801\uC6A9\uB418\uC9C0 \uC54A\uC740 \uCF54\uB4DC"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Prettier \uC801\uC6A9"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uAC00\uB3C5\uC131\uC774 \uC911\uC694\uD55C \uC81C\uD488\uC5D0 \uC801\uC808\uCE58 \uBABB\uD588\uB358 \uC6F9 \uD3F0\uD2B8 (ELAND_Choice_M.ttf)"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Pretendard Variable \u{1F44D}"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8\uB85C \uC791\uC131\uD588\uC73C\uB098 \uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8\uC758 \uC7A5\uC810\uC744 \uC0B4\uB9AC\uC9C0 \uC54A\uC740 \uCF54\uB4DC"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"types"})," \uB514\uB809\uD1A0\uB9AC \uCD94\uAC00\uD574\uC11C \uD398\uC774\uC9C0/\uAE30\uB2A5 \uB2E8\uC704\uB85C \uD0C0\uC785 \uC791\uC131\uD558\uACE0 \uB124\uC774\uBC0D \uC218\uC815"]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uCC9C \uC904\uC5D0 \uC721\uBC15\uD558\uAC70\uB098 \uB118\uC5B4\uAC00\uB294 \uCF54\uB4DC\uB4E4"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"\uC801\uC808\uD55C \uB2E8\uC704\uB098 \uAE30\uB2A5\uC73C\uB85C \uCEF4\uD3EC\uB10C\uD2B8\uD654"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uC5C4\uCCAD\uB098\uAC8C \uB9CE\uC558\uB358 \uC911\uBCF5 \uCF54\uB4DC \uC81C\uAC70"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"\uB2E4\uB978 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uC5D0\uC11C \uB3D9\uC77C\uD55C \uAE30\uB2A5\uC744 \uC81C\uACF5\uD558\uBA74 \uC81C\uAC70 (useInterval hook, classnames \uB4F1)"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uB124\uC774\uBC0D \uC218\uC815\uC774\uB098 \uCF54\uB4DC \uCD95\uC18C \uB4F1\uC73C\uB85C \uAC00\uB3C5\uC131 \uAC1C\uC120"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"onHide, handleHide \u2192 handle\uB85C \uD1B5\uC77C"}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"handleClickDownload"}),", ",(0,i.jsx)(n.code,{children:"onDownloadClick"})," \uB4F1\uC758 \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC\uC758 \uB124\uC774\uBC0D \uADDC\uCE59 \u2192 ",(0,i.jsx)(n.code,{children:"handleClickDownload"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"open"})," (\uBB58 \uC624\uD508\uD558\uACE0 \uC2F6\uC740\uAC8C\uB0D0) \u2192 ",(0,i.jsx)(n.code,{children:"visibleDialog"})]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"inline \uC2A4\uD0C0\uC77C\uC744 \uCD5C\uB300\uD55C \uC81C\uAC70"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Tailwind CSS & SCSS\uB85C \uB9CE\uC774 \uBCC0\uACBD"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"create-react-app & Webpack"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Vite \u2B50"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uD63C\uC6A9\uB418\uB358 \uD328\uD0A4\uC9C0 \uB9E4\uB2C8\uC800 (\uCF54\uB4DC\uC5D0 npm, yarn \uB458 \uB2E4 \uC788\uC5C8\uC74C\u2026)"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"npm \uAC77\uC5B4\uB0B4\uACE0 yarn berry(v4) \uB3C4\uC785"}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"pnpm \uBC29\uC2DD\uC758 nodeLinker \uC124\uC815"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:"package.json"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",children:'{\n ...\n "packageManager": "[email protected]"\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:".yarnrc.yml"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-yaml",children:"compressionLevel: mixed\n\nenableGlobalCache: false\n\nnodeLinker: pnpm\n\npackageExtensions:\n '@semantic-release/changelog@*':\n dependencies:\n semantic-release: ^23.0.0\n '@semantic-release/commit-analyzer@*':\n dependencies:\n semantic-release: ^23.0.0\n '@semantic-release/git@*':\n dependencies:\n semantic-release: ^23.0.0\n '@semantic-release/npm@*':\n dependencies:\n semantic-release: ^23.0.0\n '@semantic-release/release-notes-generator@*':\n dependencies:\n semantic-release: ^23.0.0\n '@testing-library/user-event@*':\n dependencies:\n '@testing-library/dom': ^9.3.4\n file-loader@*:\n dependencies:\n webpack: ^5.90.0\n react-loading@*:\n dependencies:\n prop-types: ^15.8.1\n url-loader@*:\n dependencies:\n webpack: ^5.90.0\n\nsupportedArchitectures:\n os:\n - linux\n - win32\n\nyarnPath: .yarn/releases/yarn-4.3.1.cjs\n"})}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://primereact.org",children:"PrimeReact"})," UI \uB77C\uC774\uBE0C\uB7EC\uB9AC\uC640 \uD568\uAED8 \uC0AC\uC6A9\uD558\uB358 ",(0,i.jsx)(n.a,{href:"https://primeflex.org",children:"PrimeFlex"}),"\uB77C\uB294 \uC774\uC0C1\uD55C Tailwind like \uB77C\uC774\uBE0C\uB7EC\uB9AC"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Tailwind\uB791 \uBE44\uC2B7\uD558\uBA74\uC11C \uB2EC\uB77C! \uB124\uC774\uBC0D\uB3C4 \uBBF8\uBB18\uD558\uAC8C \uB2E4\uB974\uACE0, \uBB34\uC5C7\uBCF4\uB2E4 \uAE30\uB2A5\uC774 \uB9CE\uC774 \uBAA8\uC790\uB77C! \u3160\u3160"}),"\n",(0,i.jsx)(n.li,{children:"\uC9C4\uC9DC real Tailwind CSS\uB85C \uAD50\uCCB4 (\uD074\uB798\uC2A4\uBA85 \uB2E4 \uBCC0\uACBD\uD558\uBA70 \uC77C\uC77C\uC774 \uD655\uC778\uD558\uB290\uB77C \uACE0\uC0DD)"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"semantic-release \uB77C\uC774\uBE0C\uB7EC\uB9AC \uCD94\uAC00 \uBC0F semver \uC801\uC6A9"}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"Git \uBE0C\uB79C\uCE58 \uADDC\uCE59 \uB3C4\uC785"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"develop \uBE0C\uB79C\uCE58\uC5D0\uC11C feature \uC0DD\uC131, alpha\uC5D0\uC11C \uD14C\uC2A4\uD2B8\uD558\uACE0 \uBC84\uC804 \uC5C5 \uD558\uBA74 main\uC5D0 merge"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uC790\uC720\uBD84\uBC29\uD558\uB358 Git commit \uADDC\uCE59 \uC815\uB9BD & husky \uB3C4\uC785\n\uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8 \uC5D0\uB7EC\uAC00 \uC788\uC73C\uBA74 commit \uD560 \uC218 \uC5C6\uB3C4\uB85D \uADDC\uCE59\uC744 \uB123\uC5B4\uC8FC\uC5C8\uB2E4."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"package.json"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",children:'{\n ...\n "scripts": {\n "preinstall": "npx only-allow y
1arn",\n "postinstall": "husky",\n "checkTs": "tsc",\n ...\n }\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:".husky/pre-commit"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"yarn checkTs\n"})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["before\n\uC815\uB9AC\uB418\uC9C0 \uC54A\uC740 \uBA54\uC2DC\uC9C0\uB4E4\uACFC \uB108\uBB34\uB098 \uB9CE\uC740 ",(0,i.jsx)(n.code,{children:"no message"}),"\n",(0,i.jsx)(n.img,{alt:"git-commit-before",src:s(976).A+"",width:"834",height:"583"})]}),"\n",(0,i.jsxs)(n.li,{children:["after\n\uC815\uB9AC\uAC00 \uB418\uBA74\uC11C \uB9C8\uC74C\uB3C4 \uD3B8-\uC548\uD574\uC84C\uB2E4.\n",(0,i.jsx)(n.img,{alt:"git-commit-after",src:s(7903).A+"",width:"834",height:"583"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"\uC218\uB9CE\uC740 \uB178\uB825\uC758 \uACB0\uACFC, \uAC1C\uBC1C \uC11C\uBC84\uB294 \uBE60\uB9BF\uD574\uC84C\uACE0, \uBE4C\uB4DC \uC2DC\uAC04\uC774 \uD68D\uAE30\uC801\uC73C\uB85C(?) \uC904\uC5C8\uB2E4."}),"\n",(0,i.jsx)(n.p,{children:"\uADF8 \uC678\uC5D0\uB3C4 \uBA87 \uAC00\uC9C0 \uB354 \uBD99\uC774\uC790\uBA74,"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["React-Hook-Form\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\uC2A4\uD0A4\uB9C8 \uAC80\uC99D \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB85C ",(0,i.jsx)(n.a,{href:"https://zod.dev",children:"Zod"})," resolver \uCD94\uAC00"]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\uC560\uB2C8\uBA54\uC774\uC158 \uB77C\uC774\uBE0C\uB7EC\uB9AC\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://www.framer.com/motion",children:"Framer Motion"})," \uCD94\uAC00"]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["404 \uD398\uC774\uC9C0\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Lottie\uB97C \uD65C\uC6A9\uD574\uC11C \uC81C\uC791\n",(0,i.jsx)(n.img,{alt:"404-not-found",src:s(4118).A+"",width:"650",height:"400"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"\uCD5C\uC801\uD654",children:"\uCD5C\uC801\uD654"}),"\n",(0,i.jsx)(n.p,{children:"\uC6B0\uB9AC \uD68C\uC0AC\uC758 \uC81C\uD488\uC740 CI/CD\uB85C \uBC30\uD3EC\uD574\uC11C \uC0C1\uC2DC \uC11C\uBE44\uC2A4\uD558\uB294 \uC81C\uD488\uC740 \uC544\uB2C8\uACE0 \uC7A5\uBE44\uC5D0 \uD504\uB85C\uADF8\uB7A8\uC744 \uD3EC\uD568\uD574\uC11C \uC81C\uACF5\uD558\uB294 \uC194\uB8E8\uC158 \uC81C\uD488\uC774\uB2E4. \uC774\uB7EC\uD55C \uC81C\uD488\uC758 \uD2B9\uC774\uC131\uC774 \uC788\uC5B4 \uC0AC\uC2E4 \uBE0C\uB77C\uC6B0\uC800\uC758 \uB80C\uB354\uB9C1 \uCD5C\uC801\uD654\uAC00 \uB35C \uC911\uC694\uD558\uB2E4\uACE0 \uC0DD\uAC01\uD558\uACE0 \uB118\uC5B4\uAC08 \uC218\uB3C4 \uC788\uACA0\uC9C0\uB9CC, \uADF8\uB7FC\uC5D0\uB3C4 \uBE0C\uB77C\uC6B0\uC800\uC5D0 \uC88B\uB2E4\uB294 \uAC74(?) \uCD5C\uB300\uD55C \uC801\uC6A9\uD574\uBCF4\uACE0 \uC2F6\uC5C8\uB2E4."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["lodash \u2192 lodash-es\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://yrnana.dev/post/2021-11-28-lodash-lodash-es",children:"\uCC38\uACE0 \uAE00"})}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\uCF54\uB4DC \uC2A4\uD50C\uB9AC\uD305\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"\uB77C\uC6B0\uD305 \uB85C\uC9C1\uC5D0\uC11C React.lazy, Suspense"}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"vite.config.ts"})," \uC5D0\uC11C build \uC124\uC815\nrollup-plugin-visualizer\uC5D0\uC11C \uBF51\uC544\uC8FC\uB294 report\uB97C \uCC38\uACE0\uD574\uC11C chunk\uB97C \uC801\uC808\uD558\uAC8C \uB098\uB220\uC8FC\uC5C8\uB2E4.\n(manualChunks \uC124\uC815 \uBD80\uBD84\uC744 \uB354 \uAC04\uACB0\uD558\uAC8C \uC791\uC131\uD558\uB294 \uBC95\uC744 \uBC30\uC6B0\uACE0 \uC2F6\uB2E4)\n",(0,i.jsx)(n.img,{alt:"manualChunks",src:s(9712).A+"",width:"1360",height:"894"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"\uBC30\uD3EC",children:"\uBC30\uD3EC"}),"\n",(0,i.jsxs)(n.p,{children:["\uD558\uC9C0\uB9CC \uC544\uC9C1 \uC81C\uB300\uB85C \uD574\uACB0\uD558\uC9C0 \uBABB\uD55C \uBB38\uC81C\uB294 \uBC30\uD3EC\uC758 \uC790\uB3D9\uD654\uC774\uB2E4. \uD604\uC7AC\uB294 \uBE4C\uB4DC \uACB0\uACFC\uBB3C\uC778 ",(0,i.jsx)(n.code,{children:"dist"})," \uB514\uB809\uD1A0\uB9AC \uB0B4\uC6A9\uBB3C\uC744 \uACE0\uAC1D\uC758 \uC11C\uBC84 \uB610\uB294 \uD3EC\uD130\uBE14 \uC7A5\uBE44\uC758 \uB9AC\uB205\uC2A4 OS \uC11C\uBC84 \uB0B4\uBD80\uC5D0 \uC9C1\uC811 \uD30C\uC77C\uC744 \uB123\uC5B4\uC8FC\uC5B4\uC57C \uD55C\uB2E4. \uADF8\uB9AC\uA
1CE0 \uB178\uC158\uC758 \uD504\uB860\uD2B8\uC5D4\uB4DC \uBC30\uD3EC \uD398\uC774\uC9C0\uC5D0 \uD568\uAED8 \uC5C5\uB85C\uB4DC\uD558\uBA70 \uAD00\uB9AC\uD558\uACE0 \uC788\uB2E4."]}),"\n",(0,i.jsx)(n.h3,{id:"\uD30C\uC77C-\uC5C5\uB85C\uB4DC\uB294-sftp\uB85C",children:"\uD30C\uC77C \uC5C5\uB85C\uB4DC\uB294 SFTP\uB85C"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uC811\uC18D"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"sftp [\uC6D0\uACA9 \uACC4\uC815\uBA85]@[\uC6D0\uACA9 IP \uC8FC\uC18C]\n# sftp [email protected]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\uD3EC\uD2B8\uB97C \uB123\uACE0 \uC2F6\uB2E4\uBA74 ",(0,i.jsx)(n.code,{children:"-P"})," \uD50C\uB798\uADF8 \uB4A4\uC5D0 \uD3EC\uD2B8 \uBC88\uD638\uB97C \uC785\uB825\uD574\uC57C \uD55C\uB2E4."]}),"\n",(0,i.jsxs)(n.p,{children:["ssh\uB791 \uB2EC\uB9AC ",(0,i.jsx)(n.code,{children:"-P"}),"\uB97C \uB300\uBB38\uC790\uB85C \uC785\uB825\uD574\uC57C \uD574\uC11C, \uCC98\uC74C\uC5D4 \uC18C\uBB38\uC790\uB85C \uC785\uB825\uD558\uACE4 \uC65C \uC548 \uB418\uC9C0? \uD558\uBA70 \uD63C\uB780\uC2A4\uB7EC\uC6CC \uD588\uC5C8\uB2E4."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"sftp -P [\uD3EC\uD2B8 \uBC88\uD638] [\uC6D0\uACA9 \uACC4\uC815\uBA85]@[\uC6D0\uACA9 IP \uC8FC\uC18C]\n# sftp -P 12345 [email protected]\n"})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uC811\uC18D \uD6C4 \uD30C\uC77C \uC5C5\uB85C\uB4DC"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"put [\uC5C5\uB85C\uB4DC\uD560 \uD30C\uC77C] [\uC5C5\uB85C\uB4DC\uD560 \uC704\uCE58 \uB610\uB294 \uC0DD\uB7B5(\uD604\uC7AC \uC704\uCE58)]\n# put sample.json\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\uB514\uB809\uD1A0\uB9AC\uB97C \uC5C5\uB85C\uB4DC \uC2DC, ",(0,i.jsx)(n.code,{children:"-r"})," \uD50C\uB798\uADF8 \uCD94\uAC00"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"put -r [\uC5C5\uB85C\uB4DC\uD560 \uB514\uB809\uD1A0\uB9AC] [\uC5C5\uB85C\uB4DC\uD560 \uC704\uCE58]\n# put -r dist static\n"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"ssh-\uC811\uC18D\uD574\uC11C-root-\uB514\uB809\uD1A0\uB9AC\uB85C-\uC62E\uACA8\uC8FC\uAE30",children:"SSH \uC811\uC18D\uD574\uC11C root \uB514\uB809\uD1A0\uB9AC\uB85C \uC62E\uACA8\uC8FC\uAE30"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uC811\uC18D"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"ssh [\uC6D0\uACA9 \uACC4\uC815\uBA85]@[\uC6D0\uACA9 IP \uC8FC\uC18C]\n# sftp [email protected]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\uD3EC\uD2B8 \uBC14\uAFD4\uC11C \uC811\uC18D\uD558\uB824\uBA74 ",(0,i.jsx)(n.code,{children:"-p"})," \uB4A4\uC5D0 \uD3EC\uD2B8 \uBC88\uD638\uB97C \uC785\uB825\uD55C\uB2E4."]}),"\n",(0,i.jsxs)(n.p,{children:["sftp\uC640 \uB2EC\uB9AC ",(0,i.jsx)(n.code,{children:"-p"})," \uD50C\uB798\uADF8\uB294 ",(0,i.jsx)(n.strong,{children:"\uC18C\uBB38\uC790"}),"\uB85C \uC785\uB825\uD574\uC57C \uD55C\uB2E4."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"ssh -p [\uD3EC\uD2B8 \uBC88\uD638] [\uC6D0\uACA9 \uACC4\uC815\uBA85]@[\uC6D0\uACA9 IP \uC8FC\uC18C]\n# ssh -p 12345 [email protected]\n"})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uAE30\uC874 \uB514\uB809\uD1A0\uB9AC \uC81C\uAC70 \uBC0F \uC5C5\uB85C\uB4DC\uB41C \uB514\uB809\uD1A0\uB9AC \uC62E\uACA8\uC8FC\uAE30"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"sudo rm -rf [\uC81C\uAC70\uD560 \uB514\uB809\uD1A0\uB9AC] && sudo mv [\uC5C5\uB85C\uB4DC\uD55C static \uB514\uB809\uD1A0\uB9AC] [\uC62E\uAE38 \uACBD\uB85C]\n"})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"\uBE0C\uB77C\uC6B0\uC800 \uAC15\uB825! \uC0C8\uB85C\uACE0\uCE68"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"\uC774\uB807\uAC8C \uC218\uB3D9\uC73C\uB85C \uBC30\uD3EC\uD558\uACE0 \uC788\uB294 \uACFC\uC815\uC744 \uC2A4\uD06C\uB9BD\uD2B8\uB85C \uB9CC\uB4E4\uC5B4 \uC790\uB3D9\uD654\uD560 \uC218 \uC788\uC73C\uBA74 \uC88B\uC744 \uAC83 \uAC19\uB2E4."}),"\n",(0,i.jsx)(n.h2,{id:"\uC544\uC9C1-\uD574\uACB0\uD558\uC9C0-\uBABB\uD55C-\uBB38\uC81C\uB4E4",children:"\uC544\uC9C1 \uD574\uACB0\uD558\uC9C0 \uBABB\uD55C \uBB38\uC81C\uB4E4"}),"\n",(0,i.jsx)(n.h3,{id:"primereact-\uB300\uC2E0-tailwind-css\uB97C-\uB354-\uC798-\uD65C\uC6A9\uD560-\uC218-\uC788\uB294-ui-\uCEF4\uD3EC\uB10C\uD2B8-\uB77C\uC774\uBE0C\uB7EC\uB9AC",children:"PrimeReact \uB300\uC2E0 Tailwind CSS\uB97C \uB354 \uC798 \uD65C\uC6A9\uD560 \uC218 \uC788\uB294 UI \uCEF4\uD3EC\uB10C\uD2B8 \uB77C\uC774\uBE0C\uB7EC\uB9AC"}),"\n",(0,i.jsx)(n.p,{children:"PrimeReact\uB97C \uAD50\uCCB4\uD558\uACE0 \uC2F6\uB2E4. \uB0B4\uAC00 \uC120\uD0DD\uD55C \uAC83\uC774 \uC544\uB2C8\uAE30\uB3C4 \uD558\uACE0, \uC0AC\uC6A9\uD574\uBCF4\uB2C8 \uBD88\uD3B8\uD55C \uC810\uC774 \uB9E4\uC6B0 \uB9CE\uB354\uB77C."}),"\n",(0,i.jsxs)(n.p,{children:["\uBC84\uC804 \uB118\uBC84\uB9C1 \uC911 \uAC00\uC7A5 \uC624\uB978\uCABD\uC5D0 \uC704\uCE58\uD55C \uD328\uCE58 \uB118\uBC84\uB9C1\uC774 \uC5C5\uB370\uC774\uD2B8\uB418\uAE30\uB9CC \uD574\uB3C4(",(0,i.jsx)(n.code,{children:"v10.6.3"})," \u2192 ",(0,i.jsx)(n.code,{children:"v10.6.5"}),") \uBC84\uADF8\uAC00 \uBC1C\uC0DD\uD558\uB294 \uACBD\uC6B0\uAC00 \uB108\uBB34 \uC7A6\uC558\uACE0, \uAC00\uC6B4\uB370 \uB9C8\uC774\uB108 \uB118\uBC84\uB9C1\uC774 \uC62C\uB77C\uAC04\uB2E4 \uD558\uBA74(",(0,i.jsx)(n.code,{children:"v10.6.5"})," \u2192 ",(0,i.jsx)(n.code,{children:"v10.7.0"}),") \uC571 \uC804\uCCB4 UI \uCF54\uB4DC\uB97C \uC190 \uBD10\uC57C \uD560 \uC815\uB3C4\uB85C \uCE58\uBA85\uC801\uC778 \uBC84\uADF8\uAC00 \uD130\uC9C4 \uACBD\uD5D8\uC774 \uB9CE\uC544\uC11C \uD328\uD0A4\uC9C0 \uBC84\uC804 \uC5C5\uB370\uC774\uD2B8\uB97C \uD560 \uB54C\uBA74 \uD56D\uC0C1 \uC81C\uD488 \uAD6C\uC11D\uAD6C\uC11D\uC744 \uD14C\uC2A4\uD2B8\uD558\uB294 \uC2B5\uAD00\uC744 \uB9CC\uB4E4\uC5B4\uC900 \uC88B\uC740(?) \uB140\uC11D\uC774\uAE30\uB3C4 \uD558\uB2E4."]}),"\n",(0,i.jsx)(n.p,{children:"\uCC98\uC74C \uC0AC\uC6A9\uD560 \uB54C\uC640 \uBE44\uAD50\uD558\uBA74 \uC9C0\uC18D\uC801\uC73C\uB85C \uBC84\uC804\uC774 \uC62C\uB77C\uAC00\uBA74\uC11C \uAE30\uB2A5\uC774 \uCD94\uAC00\uB418\uACE0 GitHub stars \uC22B\uC790\uB3C4 \uB9CE\uC774 \uC62C\uB77C\uAC14\uACE0 \uCEE4\uBBA4\uB2C8\uD2F0\uAC00 \uD65C\uBC1C\uD558\uAC8C \uB3CC\uC544\uAC00\uB294 \uAC74 \uB2E4\uD589\uC774\uC9C0\uB9CC, \uC0C1\uB300\uC801\uC73C\uB85C \uCEE4\uBBA4\uB2C8\uD2F0\uAC00 \uB354 \uD070 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB4E4\uACFC \uBE44\uAD50\uD558\uBA74 \uB9C8\uC774\uB108\uD55C \uB77C\uC774\uBE0C\uB7EC\uB9AC\uC778 \uC810(\uC785\uC0AC\uD558\uAE30 \uC804\uC5D0\uB294 \uC874\uC7AC\uB97C \uBAB0\uB790\uB2E4)\uC740 \uBD80\uC815\uD560 \uC218 \uC5C6\uACE0, GitHub\uC5D0 \uC62C\uB77C\uC628 issue\uC758 \uC218\uAC00 \uB108\uBB34 \uB9CE\uB2E4\uB294 \uAC74 \uADF8\uB9CC\uD07C \uBC84\uADF8\uAC00 \uB9CE\uACE0, \uC548\uC815\uC131\uC774 \uB5A8\uC5B4\uC9C4\uB2E4\uB294 \uC810\uC77C \uAC83\uC774\uB2E4."}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.img,{alt:"primereact-bugs",src:s(7164).A+"",width:"2000",height:"1324"}),"\n",(0,i.jsx)(n.del,{children:"\uC81C\uBCF4\uB41C \uC218\uB9CE\uC740 \uBC84\uADF8\uB4E4"})]}),"\n",(0,i.jsxs)(n.p,{children:["\uAC1C\uC778\uC801\uC73C\uB85C\uB294 \uAC00\uB2A5\uD558\uBA74 Headless \uACC4\uC5F4\uC758 ",(0,i.jsx)(n.a,{href:"https://ui.shadcn.com",children:"shadcn/ui"}),"\uC774\uB098, shadcn\uC758 \uBCA0\uC774\uC2A4\uC778 ",(0,i.jsx)(n.a,{href:"https://www.radix-ui.com/primitives",children:"Radix UI"}),"\uB85C \uAD50\uCCB4\uD558\uACE0 \uC2F6\uB2E4."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://daisyui.com",children:"daisyUI"}),"\uB098 ",(0,i.jsx)(n.a,{href:"https://mantine.dev",children:"Mantine"}),"\uB3C4 \uAD49\uC7A5\uD788 \uC798 \uB9CC\uB4E4\uC5B4\uC9C4 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uC778 \uB4EF \uD558\uC9C0\uB9CC, \uB0B4\uBD80 \uADDC\uCE59\uC774 \uAC15\uD574\uC11C \uC6B0\uB9AC \uD68C\uC0AC\uC758 \uC81C\uD488\uC744 \uAD6C\uD604\uD560 \uB54C \uAD49\uC7A5\uD788 \uB2E4\uC591\uD55C \uD615\uD0DC\uC758 UI\uB97C \uAD6C\uD604\uD558\uAE30\uC5D4 \uC790\uC720\uB85C\uC6B4 \uCEE4\uC2A4\uD130\uB9C8\uC774\uC9D5\uC774 \uAC00\uB2A5\uD55C headless\uAC00 \uB354 \uC801\uD569\uD558\uB2E4\uB294 \uC0DD\uAC01\uC774 \uB4E0\uB2E4."]}),"\n",(0,i.jsx)(n.p,{children:"\uC774\uB7F0 \uC800\uB7F0 \uC694\uB7F0 \uC774\uC720\uB4E4\uB85C \uB2E4\uB978 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB85C \uAC08\uC544\uD0C0\uB294 \uAC83\uC774 \uC88B\uACA0\uB2E4\uB294 \uC2EC\uC815\uC774\uC9C0\uB9CC, \uC81C\uD488\uC5D0\uC11C PrimeReact \uB0B4\uBD80\uC758 \uBA87\uBA87 \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uC758\uC874\uC131\uC774 \uAC15\uD574 \uC27D\uAC8C \uAD50\uCCB4\uD560 \uC218 \uC5C6\uB294 \uC0C1\uD669\uC774\uB2E4. (DataTable, Draggable dialog \uB4F1)"}),"\n",(0,i.jsxs)(n.p,{children:["\uC5EC\uB2F4\uC73C\uB85C \uC62C\uD574 3\uC6D4\uC5D0 \uAC1C\uD3B8\uB41C ",(0,i.jsx)(n.a,{href:"https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign",children:"Node.js \uC6F9\uC0AC\uC774\uD2B8\uC758 \uC7AC\uC124\uACC4 \uC0AC\uB840"}),"\uB97C \uBCF4\uBA74 \uB369\uCE58\uAC00 \uC5C4\uCCAD\uB098\uAC8C \uCEE4\uC9C4 \uC571\uC744 \uAC1C\uC120\uD558\uB294 \uAC83\uC774 \uC5BC\uB9C8\uB098 \uC5B4\uB824\uC6B4 \uC810\uC778\uC9C0 \uC798 \uBCF4\uC5EC\uC8FC\uB294 \uAC83 \uAC19\uB2E4."]}),"\n",(0,i.jsx)(n.h3,{id:"\uCC28\uD2B8-\uB77C\uC774\uBE0C\uB7EC\uB9AC",children:"\uCC28\uD2B8 \uB77C\uC774\uBE0C\uB7EC\uB9AC"}),"\n",(0,i.jsxs)(n.p,{children:["\uC81C\uD488\uC758 \uC8FC\uC694 \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC911 \uD
1558\uB098\uB85C ",(0,i.jsx)(n.a,{href:"https://echarts.apache.org/en/index.html",children:"Apache ECharts"}),"\uB97C \uC0AC\uC6A9\uD558\uACE0 \uC788\uB2E4. React\uC6A9 \uB7A9\uD551 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB85C ",(0,i.jsx)(n.a,{href:"https://github.com/hustcc/echarts-for-react",children:"echarts-for-react"}),"\uB3C4 \uD568\uAED8 \uC0AC\uC6A9\uD558\uACE0 \uC788\uB2E4."]}),"\n",(0,i.jsxs)(n.p,{children:["\uADFC\uB370 \uC880 \uBD88\uD3B8\uD558\uB2E4. ECharts\uB294 \uC790\uC720\uB3C4 \uB192\uC740 \uCEE4\uC2A4\uD130\uB9C8\uC774\uC9D5\uC5D0 \uBE44\uD558\uBA74 \uACF5\uC2DD \uBB38\uC11C\uAC00 \uCE5C\uC808\uD558\uAC8C \uC791\uC131\uB41C \uD3B8\uC774 \uC544\uB2C8\uACE0, echarts-for-react\uB294 \uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8\uB85C \uC791\uC131\uB418\uC5C8\uC74C\uC5D0\uB3C4 \uBD88\uAD6C\uD558\uACE0 \uD0C0\uC785\uC774 \uC798 \uC9C0\uC6D0\uB418\uC9C0 \uC54A\uC544\uC11C \uD0C0\uC785 \uC815\uC758 \uD30C\uC77C\uC744 \uC5F4\uC5B4\uBCF4\uBA74 ",(0,i.jsx)(n.code,{children:"any"})," \uD0C0\uC785\uC73C\uB85C \uB3FC\uC788\uB294 \uAC8C \uB108\uBB34 \uB9CE\uC558\uB2E4. ",(0,i.jsx)(n.del,{children:"\uC560\uB2C8 \uC2A4\uD06C\uB9BD\uD2B8"})]}),"\n",(0,i.jsx)(n.p,{children:"\uAC00\uC7A5 \uCF54\uC5B4\uD55C EChartsOption & EChartsInstance\uC758 \uD0C0\uC785\uC774 any\uB77C\uB2C8\u2026? \u{1F914}"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"echarts-for-react-types.d",src:s(9690).A+"",width:"667",height:"651"})}),"\n",(0,i.jsx)(n.p,{children:"\uC131\uB2A5 \uC774\uC288 \uB54C\uBB38\uC5D0 ECharts\uB85C \uB3C4\uC785\uC744 \uACB0\uC815\uD588\uB2E4\uACE0 \uD558\uB294\uB370, \uC544\uC27D\uB2E4. \uC900\uC218\uD55C \uC131\uB2A5\uC5D0 React + TypeScript\uC5D0 \uB354 \uC801\uD569\uD55C \uB77C\uC774\uBE0C\uB7EC\uB9AC\uAC00 \uBD84\uBA85 \uC788\uC744 \uD150\uB370."}),"\n",(0,i.jsx)(n.h3,{id:"\uD14C\uC2A4\uD2B8-\uCF54\uB4DC-\uB3C4\uC785",children:"\uD14C\uC2A4\uD2B8 \uCF54\uB4DC \uB3C4\uC785"}),"\n",(0,i.jsxs)(n.p,{children:["Jest\uB97C \uCD94\uAC00\uD558\uACE0 sample \uCF54\uB4DC\uB97C \uB9CC\uB4DC\uB294 \uAC83\uAE4C\uC9C0 \uC644\uB8CC\uD574\uB450\uC5C8\uC9C0\uB9CC, \uC544\uC9C1 \uC2E4\uC81C \uD14C\uC2A4\uD2B8\uB97C \uC791\uC131\uD558\uC9C0 \uBABB\uD55C \uC810\uC774 \uB108\uBB34 \uC544\uC27D\uB2E4. ",(0,i.jsx)(n.del,{children:"\uD14C\uC2A4\uD2B8 \uCF54\uB4DC\uB97C \uC548 \uB123\uB294 \uD68C\uC0AC\uAC00 \uC788\uB2E4?"})]}),"\n",(0,i.jsx)(n.p,{children:"\uD14C\uC2A4\uD2B8 \uCF54\uB4DC\uAC00 \uC775\uC219\uD558\uC9C0 \uC54A\uC740 \uC810, \uADF8\uB9AC\uACE0 \uD504\uB860\uD2B8\uC5D4\uB4DC \uAC1C\uBC1C\uC790\uAC00 \uBD80\uC871\uD558\uB2E4\uB294 \uAC83\uC774 \uC774\uC720(\uD551\uACC4)."}),"\n",(0,i.jsx)(n.h3,{id:"\uC77C\uAD00\uC801\uC778-\uB514\uC790\uC778",children:"\uC77C\uAD00\uC801\uC778 \uB514\uC790\uC778"}),"\n",(0,i.jsx)(n.p,{children:"\uD604\uC7AC \uD68C\uC0AC\uB294 UX/UI \uB514\uC790\uC774\uB108\uAC00 \uC5C6\uACE0, \uB450 \uBA85 \uBFD0\uC778 \uD504\uB860\uD2B8\uC5D4\uB4DC \uAC1C\uBC1C\uC790 \uAC01\uAC1C\uC804\uD22C\uB85C UI\uB97C \uB9CC\uB4E4\uACE0 \uC788\uB2E4."}),"\n",(0,i.jsx)(n.p,{children:"\uCF54\uB4DC \uC2A4\uD0C0\uC77C\uC740 Prettier + Tailwind CSS \uD50C\uB7EC\uADF8\uC778\uC73C\uB85C \uC5B4\uB290 \uC815\uB3C4 \uAC15\uC81C\uD560 \uC218 \uC788\uC9C0\uB9CC \uB514\uC790\uC778\uC5D0\uC11C\uB294 \uB9CE\uC774 \uC0AC\uC6A9\uD55C\uB2E4\uB294 Storybook\uC774\uB098 Figma\uB97C \uB2E4\uB8F0 \uC218 \uC788\uB294 \uC778\uB825\uC774 \uC5C6\uAE30 \uB54C\uBB38\uC5D0 \uCC38 \uC5B4\uB824\uC6B4 \uC810\uC774\uB77C\uACE0 \uC0D
1D\uAC01\uD55C\uB2E4."}),"\n",(0,i.jsx)(n.h3,{id:"\uB9C8\uBB34\uB9AC",children:"\uB9C8\uBB34\uB9AC"}),"\n",(0,i.jsx)(n.p,{children:"\uD504\uB860\uD2B8\uC5D4\uB4DC\uB77C\uB294 \uBD84\uC57C\uC5D0 \uD55C\uC815\uC9D3\uC9C0 \uC54A\uC544\uB3C4 \uAC1C\uBC1C\uC790\uB77C\uBA74 \uC54C\uC544\uC57C \uD560, \uB610\uB294 \uBC30\uC6B0\uBA74 \uC88B\uC740 \uAC83\uB4E4\uC774 \uB108\uBB34\uB098\uB3C4 \uB9CE\uB2E4\uB294 \uAC78 \uC0C8\uC0BC \uB290\uB080\uB2E4. \uBC30\uC6CC\uC11C \uC368\uBA39\uB294 \uAC74 \uD56D\uC0C1 \uC990\uAC81\uB2E4."}),"\n",(0,i.jsx)(n.p,{children:"\uB610\uD55C \uAE00\uC4F0\uAE30\uC758 \uC5B4\uB824\uC6C0\uC744 \uC624\uB79C\uB9CC\uC5D0 \uD3EC\uC2A4\uD305\uC744 \uC791\uC131\uD558\uBA70 \uB290\uAF08\uB2E4. \uC77C\uBAA9\uC694\uC5F0\uD558\uAC8C \uBB3C \uD750\uB974\uB4EF \uAE00\uC744 \uC4F0\uB294 \uAC8C \uC5BC\uB9C8\uB098 \uC5B4\uB824\uC6B4\uC9C0, \uAE00\uC4F0\uAE30\uB3C4 \uB9CE\uC774 \uD574\uBD10\uC57C\uACA0\uB2E4."}),"\n",(0,i.jsx)(n.p,{children:"\uB05D."})]})}function x(e={}){let{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(t,{...e})}):t(e)}},4118(e,n,s){s.d(n,{A:()=>l});let l=s.p+"assets/images/2024-07-12-404-not-found-fffa7e5495b8a6ddf383f384f814b25a.gif"},9690(e,n,s){s.d(n,{A:()=>l});let l=s.p+"assets/images/2024-07-12-echarts-for-react-types.d-a195064b162a2bd2a8159f0f29927ac8.png"},7903(e,n,s){s.d(n,{A:()=>l});let l=s.p+"assets/images/2024-07-12-git-commit-after-f3120a00efabc4c752b6332553f01b67.png"},976(e,n,s){s.d(n,{A:()=>l});let l=s.p+"assets/images/2024-07-12-git-commit-before-c0a40c58b968e121635c0ad85d6f9b86.png"},9712(e,n,s){s.d(n,{A:()=>l});let l=s.p+"assets/images/2024-07-12-manualChunks-0e0d6080ea90f9db13b58f28f8b7c325.png"},7164(e,n,s){s.d(n,{A:()=>l});let l=s.p+"assets/images/2024-07-12-primereact-bugs-766486d154855af2529b0d72fcf4a9e4.png"},1137(e,n,s){s.d(n,{R:()=>c,x:()=>d});var l=s(2086);let i={},r=l.createContext(i);function c(e){let n=l.useContext(r);return l.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(i):e.components||i:c(e.components),l.createElement(r.Provider,{value:n},e.children)}},4553(e){e.exports=JSON.parse('{"permalink":"/1\uB144\uC5EC\uAC04\uC758-\uC81C\uD488-\uAC1C\uC120-\uACBD\uD5D8","source":"@site/blog/development/2024-07-12-1\uB144\uC5EC\uAC04\uC758-\uC81C\uD488-\uAC1C\uC120-\uACBD\uD5D8.md","title":"1\uB144\uC5EC\uAC04\uC758 \uC81C\uD488 \uAC1C\uC120 \uACBD\uD5D8","description":"\uC785\uC0AC\uD558\uACE0 6\uAC1C\uC6D4 \uC988\uC74C, Vue 2(Quasar Framework) \uAE30\uBC18\uC758 \uC81C\uD488\uC744 \uC678\uC8FC \uAC1C\uBC1C\uC790\uAC00 React\uB85C \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uD558\uB358 \uC911\uC5D0 \uACC4\uC57D\uC774 \uC885\uB8CC\uB418\uC5B4 \uC778\uACC4\uB97C \uBC1B\uAC8C \uB418\uC5C8\uB2E4. \uBBF8\uC644\uC131\uB41C React \uBC84\uC804 \uC81C\uD488\uC758 \uAE30\uB2A5\uC744 \uC6D0\uB798\uC758 \uC218\uC900 \uB610\uB294 \uADF8 \uC774\uC0C1\uC73C\uB85C \uB9CC\uB4E4\uAE30 \uC704\uD574 \uC5F4\uC2EC\uD788 \uB72F\uC5B4 \uACE0\uCE68\uACFC \uB3D9\uC2DC\uC5D0 \uAC1C\uBC1C \uD658\uACBD\uC744 \uAC1C\uC120\uD558\uAE30 \uC704\uD574 \uB9CE\uC740 \uC2DC\uB3C4\uB97C \uD588\uB2E4. (\uD604\uC7AC\uC9C4\uD589\uD615)","date":"2024-07-12T00:00:00.000Z","tags":[{"inline":true,"label":"vue","permalink":"/tags/vue"},{"inline":true,"label":"react","permalink":"/tags/react"},{"inline":true,"label":"node.js","permalink":"/tags/node-js"},{"inline":true,"label":"ux/ui","permalink":"/tags/ux-ui"},{"inline":true,"label":"linux","permalink":"/tags/linux"}],"readingTime":6.72,"hasTruncateMarker":true,"authors":[],"frontMatter":{"slug":"1\uB144\uC5EC\uAC04\uC758-\uC81C\uD488-\uAC1C\uC120-\uACBD\uD5D8","title":"1\uB144\uC5EC\uAC04\uC758 \uC81C\uD488 \uAC1C\uC120 \uACBD\uD5D8","tags":["vue","react","node.js","ux/ui","linux"]},"unlisted":false,"prevItem":{"title":"React \uC22B\uC790 \uC785\uB825, \uAC80\uC99D\uC744 \uC5B4\uB514\uC5D0\uC11C \uD560 \uAC83\uC778\uAC00","permalink":"/react-\uC22B\uC790-\uC785\uB825-\uAC80\uC99D-\uC704\uCE58"},"nextItem":{"title":"CORS\uC5D0\uC11C\uB294 Axios\uAC00 \uC88B\uB2E4 (HTTP Client)","permalink":"/axios-cors"}}')}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.