diff --git a/404.html b/404.html index 0a4eec8..ea9aa1c 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -
Hewon Jeong

Not found

This page doesn’t exist (yet?)

\ No newline at end of file +
Hewon Jeong

Not found

This page doesn’t exist (yet?)

\ No newline at end of file diff --git a/_next/static/chunks/app/[slug]/layout-39f296ef600fa291.js b/_next/static/chunks/app/[slug]/layout-39f296ef600fa291.js new file mode 100644 index 0000000..4d46261 --- /dev/null +++ b/_next/static/chunks/app/[slug]/layout-39f296ef600fa291.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[64,160],{3521:function(){}},function(n){n.O(0,[971,69,744],function(){return n(n.s=3521)}),_N_E=n.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/app/[slug]/layout-762d834bb966fc64.js b/_next/static/chunks/app/[slug]/layout-762d834bb966fc64.js deleted file mode 100644 index cd53fe7..0000000 --- a/_next/static/chunks/app/[slug]/layout-762d834bb966fc64.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[64,160],{5081:function(n,e,u){Promise.resolve().then(u.t.bind(u,6754,23))},6754:function(){}},function(n){n.O(0,[971,69,744],function(){return n(n.s=5081)}),_N_E=n.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/app/layout-6115c3860241666a.js b/_next/static/chunks/app/layout-404cecc675210ad4.js similarity index 100% rename from _next/static/chunks/app/layout-6115c3860241666a.js rename to _next/static/chunks/app/layout-404cecc675210ad4.js diff --git a/_next/static/chunks/app/not-found-5ac800ec76891c76.js b/_next/static/chunks/app/not-found-5ac800ec76891c76.js deleted file mode 100644 index 1363cce..0000000 --- a/_next/static/chunks/app/not-found-5ac800ec76891c76.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[160,64],{5081:function(n,e,u){Promise.resolve().then(u.t.bind(u,6754,23))},6754:function(){}},function(n){n.O(0,[971,69,744],function(){return n(n.s=5081)}),_N_E=n.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/app/not-found-9dfe41e6fc37b90c.js b/_next/static/chunks/app/not-found-9dfe41e6fc37b90c.js new file mode 100644 index 0000000..093d9ae --- /dev/null +++ b/_next/static/chunks/app/not-found-9dfe41e6fc37b90c.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[160,64],{3521:function(){}},function(n){n.O(0,[971,69,744],function(){return n(n.s=3521)}),_N_E=n.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/webpack-1c6090e5bf13e5b7.js b/_next/static/chunks/webpack-1c6090e5bf13e5b7.js new file mode 100644 index 0000000..87cfaca --- /dev/null +++ b/_next/static/chunks/webpack-1c6090e5bf13e5b7.js @@ -0,0 +1 @@ +!function(){"use strict";var e,t,n,r,o,u,i,c,f,a={},l={};function s(e){var t=l[e];if(void 0!==t)return t.exports;var n=l[e]={exports:{}},r=!0;try{a[e](n,n.exports,s),r=!1}finally{r&&delete l[e]}return n.exports}s.m=a,e=[],s.O=function(t,n,r,o){if(n){o=o||0;for(var u=e.length;u>0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[n,r,o];return}for(var i=1/0,u=0;u=o&&Object.keys(s.O).every(function(e){return s.O[e](n[f])})?n.splice(f--,1):(c=!1,o0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[n,r,o];return}for(var i=1/0,u=0;u=o&&Object.keys(d.O).every(function(e){return d.O[e](n[c])})?n.splice(c--,1):(f=!1,o*+*{margin-top:1.5rem}.markdown a{border-bottom-width:1px;border-color:var(--text);color:var(--text)}.markdown a:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.markdown a:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}}.markdown hr{padding-top:2rem;opacity:.6}@media (prefers-color-scheme:dark){.markdown hr{opacity:.1}}h2,h3,h4{overflow-wrap:break-word;word-break:keep-all}.markdown h2{font-size:1.875rem;line-height:2.25rem;font-weight:700}.markdown :not(h2,h3,h4)+h2{margin-top:4rem}.markdown h3{font-size:1.5rem;line-height:2rem;font-weight:700}.markdown :not(h2,h3,h4)+h3{margin-top:3.5rem}.markdown h4{font-size:1.25rem;line-height:1.75rem;font-weight:700}.markdown :not(h2,h3,h4)+h4{margin-top:3rem}.markdown>h2+*{margin-top:1rem}.markdown>h3+*,.markdown>h4+*{margin-top:.75rem}.markdown h3+.markdown>p,.markdown h4+.markdown>p{margin-top:1rem}.markdown ol{list-style-type:decimal}.markdown ul{list-style-type:disc}.markdown ol,.markdown ul{padding-inline-start:1.25rem}.markdown ol li+li,.markdown ul li+li{margin-top:.75rem}.markdown ol ol,.markdown ol ul,.markdown ul ol,.markdown ul ul{padding-inline-start:.5rem}.markdown li p+p{margin-top:.25rem}.markdown p+ol,.markdown p+ul{margin-top:.75rem}.markdown ol ol,.markdown ol ul,.markdown ul ol,.markdown ul ul{margin-top:.5rem}pre[data-theme*=" "]{background-color:var(--shiki-light-bg)}:not(pre)>code[data-theme*=" "]{background-color:#ebebeb}code[data-theme*=" "] span{color:var(--shiki-light)}@media (prefers-color-scheme:dark){pre[data-theme*=" "]{background-color:var(--shiki-dark-bg)}:not(pre)>code[data-theme*=" "]{background-color:#101010}code[data-theme*=" "] span{color:var(--shiki-dark)}}.markdown :not(pre)>code{border-radius:.22em;padding:.2em .4em;font-size:85%;line-height:normal;white-space:normal}.markdown pre{margin-left:-1rem;margin-right:-1rem;margin-bottom:2rem;overflow-y:auto;padding:1rem;font-size:.875rem;line-height:1.25rem;-webkit-clip-path:var(--path);clip-path:var(--path);border-top-right-radius:var(--radius-top);border-top-left-radius:var(--radius-top);border-bottom-right-radius:var(--radius-bottom);border-bottom-left-radius:var(--radius-bottom);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.markdown pre code{width:auto}.markdown pre [data-highlighted-line]{margin-left:-1em;margin-right:-1em;padding-left:1em;padding-right:1em;background-color:#ebebeb}@media (prefers-color-scheme:dark){.markdown pre [data-highlighted-line]{background-color:#030303}}.markdown blockquote{margin-top:1rem;margin-bottom:1rem;border-left-width:4px;border-color:currentColor;padding-left:1rem;line-height:1.625}.markdown>blockquote{font-size:1.125rem;line-height:1.75rem}.markdown thead th{margin-top:1rem;margin-bottom:1rem}.markdown thead{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}@media (prefers-color-scheme:dark){.markdown thead{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity))}}.markdown thead th{padding-left:.5rem;padding-right:.5rem;padding-bottom:.5rem;vertical-align:bottom}.markdown thead th:first-child{padding-left:0}.markdown thead th:last-child{padding-right:0}.markdown tbody tr{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}@media (prefers-color-scheme:dark){.markdown tbody tr{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}}.markdown tbody tr:last-child{border-width:0}.markdown tbody td{vertical-align:baseline}.markdown tbody td,.markdown tfoot td{padding:.5rem}.markdown tbody td:first-child{padding-left:0}.markdown tbody td:last-child{padding-right:0}.markdown table{width:100%;table-layout:auto;text-align:left;font-size:.875rem;line-height:1.25rem}.markdown img{margin:auto;max-width:100%;border-radius:.5rem} \ No newline at end of file diff --git a/_next/static/css/5af8a0c92a4e4a9f.css b/_next/static/css/b56cb8ead7d0e754.css similarity index 75% rename from _next/static/css/5af8a0c92a4e4a9f.css rename to _next/static/css/b56cb8ead7d0e754.css index dc81eed..a06c226 100644 --- a/_next/static/css/5af8a0c92a4e4a9f.css +++ b/_next/static/css/b56cb8ead7d0e754.css @@ -1,3 +1,5 @@ +.markdown{line-height:28px;--path:none;--radius-top:12px;--radius-bottom:12px;--padding-top:1rem;--padding-bottom:1rem}.markdown>*+*{margin-top:1.5rem}.markdown a{border-bottom-width:1px;border-color:var(--text);color:var(--text)}.markdown a:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.markdown a:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}}.markdown hr{padding-top:2rem;opacity:.6}@media (prefers-color-scheme:dark){.markdown hr{opacity:.1}}h2,h3,h4{overflow-wrap:break-word;word-break:keep-all}.markdown h2{font-size:1.875rem;line-height:2.25rem;font-weight:700}.markdown :not(h2,h3,h4)+h2{margin-top:4rem}.markdown h3{font-size:1.5rem;line-height:2rem;font-weight:700}.markdown :not(h2,h3,h4)+h3{margin-top:3.5rem}.markdown h4{font-size:1.25rem;line-height:1.75rem;font-weight:700}.markdown :not(h2,h3,h4)+h4{margin-top:3rem}.markdown>h2+*{margin-top:1rem}.markdown>h3+*,.markdown>h4+*{margin-top:.75rem}.markdown h3+.markdown>p,.markdown h4+.markdown>p{margin-top:1rem}.markdown ol{list-style-type:decimal}.markdown ul{list-style-type:disc}.markdown ol,.markdown ul{padding-inline-start:1.25rem}.markdown ol li+li,.markdown ul li+li{margin-top:.75rem}.markdown ol ol,.markdown ol ul,.markdown ul ol,.markdown ul ul{padding-inline-start:.5rem}.markdown li p+p{margin-top:.25rem}.markdown p+ol,.markdown p+ul{margin-top:.75rem}.markdown ol ol,.markdown ol ul,.markdown ul ol,.markdown ul ul{margin-top:.5rem}pre[data-theme*=" "]{background-color:var(--shiki-light-bg)}:not(pre)>code[data-theme*=" "]{background-color:#ebebeb}code[data-theme*=" "] span{color:var(--shiki-light)}@media (prefers-color-scheme:dark){pre[data-theme*=" "]{background-color:var(--shiki-dark-bg)}:not(pre)>code[data-theme*=" "]{background-color:#101010}code[data-theme*=" "] span{color:var(--shiki-dark)}}.markdown :not(pre)>code{border-radius:.22em;padding:.2em .4em;font-size:85%;line-height:normal;white-space:normal}.markdown pre{margin-left:-1rem;margin-right:-1rem;margin-bottom:2rem;overflow-y:auto;padding:1rem;font-size:.875rem;line-height:1.25rem;-webkit-clip-path:var(--path);clip-path:var(--path);border-top-right-radius:var(--radius-top);border-top-left-radius:var(--radius-top);border-bottom-right-radius:var(--radius-bottom);border-bottom-left-radius:var(--radius-bottom);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.markdown pre code{width:auto}.markdown pre [data-highlighted-line]{margin-left:-1em;margin-right:-1em;padding-left:1em;padding-right:1em;background-color:#ebebeb}@media (prefers-color-scheme:dark){.markdown pre [data-highlighted-line]{background-color:#030303}}.markdown blockquote{margin-top:1rem;margin-bottom:1rem;border-left-width:4px;border-color:currentColor;padding-left:1rem;line-height:1.625}.markdown>blockquote{font-size:1.125rem;line-height:1.75rem}.markdown thead th{margin-top:1rem;margin-bottom:1rem}.markdown thead{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}@media (prefers-color-scheme:dark){.markdown thead{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity))}}.markdown thead th{padding-left:.5rem;padding-right:.5rem;padding-bottom:.5rem;vertical-align:bottom}.markdown thead th:first-child{padding-left:0}.markdown thead th:last-child{padding-right:0}.markdown tbody tr{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}@media (prefers-color-scheme:dark){.markdown tbody tr{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}}.markdown tbody tr:last-child{border-width:0}.markdown tbody td{vertical-align:baseline}.markdown tbody td,.markdown tfoot td{padding:.5rem}.markdown tbody td:first-child{padding-left:0}.markdown tbody td:last-child{padding-right:0}.markdown table{width:100%;table-layout:auto;text-align:left;font-size:.875rem;line-height:1.25rem}.markdown img{margin:auto;max-width:100%;border-radius:.5rem} + /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static}.relative{position:relative}.-top-\[10px\]{top:-10px}.mx-auto{margin-left:auto;margin-right:auto}.mb-14{margin-bottom:3.5rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.max-w-2xl{max-width:42rem}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.place-content-between{place-content:space-between}.gap-8{gap:2rem}.break-keep{word-break:keep-all}.bg-\[--bg\]{background-color:var(--bg)}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-4{padding-top:1rem;padding-bottom:1rem}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[13px\]{font-size:13px}.text-\[2\.5rem\]{font-size:2.5rem}.text-\[40px\]{font-size:40px}.font-black{font-weight:900}.font-bold{font-weight:700}.italic{font-style:italic}.leading-\[44px\]{line-height:44px}.leading-tight{line-height:1.25}.text-\[--lightLink\]{color:var(--lightLink)}.text-\[--text\]{color:var(--text)}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--text:#222;--bg:#fff}@media (prefers-color-scheme:dark){:root{--text:hsla(0,0%,100%,.88);--bg:#222}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (prefers-reduced-motion){*{transition:none!important;transform:none!important}}.hover\:scale-\[1\.005\]:hover{--tw-scale-x:1.005;--tw-scale-y:1.005}.hover\:scale-\[1\.005\]:hover,.hover\:scale-\[1\.02\]:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02}.active\:scale-100:active{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (prefers-color-scheme:dark){.dark\:text-\[--darkLink\]{color:var(--darkLink)}.dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/aec774cbe1963439-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/634216363f5c73c1-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/d83fe381bb17eb77-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/88325a2c1fede2f4-s.woff2) format("woff2");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/e1c529c04de64b40-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/aec774cbe1963439-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/634216363f5c73c1-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/d83fe381bb17eb77-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/88325a2c1fede2f4-s.woff2) format("woff2");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/e1c529c04de64b40-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:900;font-display:swap;src:url(/_next/static/media/aec774cbe1963439-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:900;font-display:swap;src:url(/_next/static/media/634216363f5c73c1-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:900;font-display:swap;src:url(/_next/static/media/d83fe381bb17eb77-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:900;font-display:swap;src:url(/_next/static/media/88325a2c1fede2f4-s.woff2) format("woff2");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:__Montserrat_71cf04;font-style:normal;font-weight:900;font-display:swap;src:url(/_next/static/media/e1c529c04de64b40-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:__Montserrat_Fallback_71cf04;src:local("Arial");ascent-override:84.95%;descent-override:22.03%;line-gap-override:0.00%;size-adjust:113.95%}.__className_71cf04{font-family:__Montserrat_71cf04,__Montserrat_Fallback_71cf04;font-style:normal} \ No newline at end of file diff --git a/_next/static/lIqbsHa6OwBUNoW2UeESg/_buildManifest.js b/_next/static/ijI2H4ht_ifEwJyVN3XqI/_buildManifest.js similarity index 100% rename from _next/static/lIqbsHa6OwBUNoW2UeESg/_buildManifest.js rename to _next/static/ijI2H4ht_ifEwJyVN3XqI/_buildManifest.js diff --git a/_next/static/lIqbsHa6OwBUNoW2UeESg/_ssgManifest.js b/_next/static/ijI2H4ht_ifEwJyVN3XqI/_ssgManifest.js similarity index 100% rename from _next/static/lIqbsHa6OwBUNoW2UeESg/_ssgManifest.js rename to _next/static/ijI2H4ht_ifEwJyVN3XqI/_ssgManifest.js diff --git a/cost-effective-tests.html b/cost-effective-tests.html index 848b5f2..5511af5 100644 --- a/cost-effective-tests.html +++ b/cost-effective-tests.html @@ -1,4 +1,4 @@ -비용 효율적인 테스트 디자인하기 — Hewon Jeong
Hewon Jeong

비용 효율적인 테스트 디자인하기

《루비로 배우는 객체지향 디자인》의 9장 ‘비용-효율적인 테스트 디자인하기’ 파트를 읽고 정리한 내용입니다.

+비용 효율적인 테스트 디자인하기 — Hewon Jeong
Hewon Jeong

비용 효율적인 테스트 디자인하기

《루비로 배우는 객체지향 디자인》의 9장 ‘비용-효율적인 테스트 디자인하기’ 파트를 읽고 정리한 내용입니다.

손쉽게 수정할 수 있는 코드 작성하려면?

  1. @@ -95,4 +95,4 @@

    Test Driven Development vs. Behavior Driven Development

    테스트 중인 객체의 가장자리를 따라 시선을 고정하고, 그 경계를 넘나드는 메시지만 테스트하는 것이 좋다. (내부나 작동 방식에 집중하면 프라이빗한 지식이 테스트를 침범하고, 결합이 강해진다.)

    Summary

    테스트는 꼭 필요하다. 잘 디자인된 애플리케이션은 매우 추상적이고, 계속 변경된다. 테스트가 없다면 이해할 수도 없고 안전하게 수정할 수도 없을 것이다. 최상의 테스트는 실제 코드와 느슨하게 결합되어야 한다. 그리고 모든 코드를 한번만, 제대로 된 장소에서 테스트해야 한다. 이런 테스트는 코드 작성 비용을 높이지 않으면서도 새로운 가치를 제공한다.

    -

    잘 디자인된 애플리케이션이 섬세하게 다듬어진 테스트 묶음을 가지고 있다면 이 애플리케이션을 바라보기만 해도 기쁘고 확장하는 작업도 즐겁다. 모든 새로운 상황에 적응할 수 있으며 예상치 못했던 그 어떤 요구사항에도 대처할 수 있다.


\ No newline at end of file +

잘 디자인된 애플리케이션이 섬세하게 다듬어진 테스트 묶음을 가지고 있다면 이 애플리케이션을 바라보기만 해도 기쁘고 확장하는 작업도 즐겁다. 모든 새로운 상황에 적응할 수 있으며 예상치 못했던 그 어떤 요구사항에도 대처할 수 있다.


\ No newline at end of file diff --git a/cost-effective-tests.txt b/cost-effective-tests.txt index 3631f8a..bbb65e4 100644 --- a/cost-effective-tests.txt +++ b/cost-effective-tests.txt @@ -1,8 +1,8 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","cost-effective-tests","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","cost-effective-tests","d"],{"children":["__PAGE__?{\"slug\":\"cost-effective-tests\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","cost-effective-tests","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","cost-effective-tests","d"],{"children":["__PAGE__?{\"slug\":\"cost-effective-tests\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","cost-effective-tests","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"비용 효율적인 테스트 디자인하기"}],["$","time",null,{"dateTime":"2023-03-20","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"March 20, 2023"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"비용 효율적인 테스트 디자인하기 — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"테스트의 진정한 목표는 코드 작성 비용을 줄이는 것이다. 왜, 무엇을, 언제, 그리고 어떻게 테스트 해야할까?"}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null diff --git a/deep-dive-how-do-react-hooks-really-work-ko.html b/deep-dive-how-do-react-hooks-really-work-ko.html index 64ab1c2..8913f20 100644 --- a/deep-dive-how-do-react-hooks-really-work-ko.html +++ b/deep-dive-how-do-react-hooks-really-work-ko.html @@ -1,4 +1,4 @@ -[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까? — Hewon Jeong
Hewon Jeong

[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?

Deep dive: How do React hooks really work?을 저자, Swyx의 허락을 받고 번역한 글입니다. 오타, 오역은 제보해주시면 수정하도록 하겠습니다.👍🏻

+[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까? — Hewon Jeong
Hewon Jeong

[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?

Deep dive: How do React hooks really work?을 저자, Swyx의 허락을 받고 번역한 글입니다. 오타, 오역은 제보해주시면 수정하도록 하겠습니다.👍🏻

클로저 다이어그램 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)의 조합이다. - MDN


@@ -259,4 +259,4 @@

Hook 규칙 도출하기

또한 두 번째 규칙인 “오직 React 함수 내에서 Hook을 호출해야 합니다.”는 우리가 구현한 코드에서는 필수적이지 않지만, 항상 코드의 어떤 부분이 상태 관련 로직에 의존하는지 명확하게 구분하는 것은 좋은 습관입니다. (긍정적인 부수효과로, 반복문과 조건문 내부에서 일반 JavaScript 함수처럼 이름 붙여진 상태 관련 함수를 호출하는 실수를 하지 않게 됩니다. 즉, 두 번째 규칙을 따르는 것이 첫 번째 규칙을 따르는 데 도움이 됩니다.)

결론

여기까지 이 글에서 학습해볼 내용은 다 다루었습니다. 이제 useRef를 한 줄로 구현해보거나 render 함수가 JSX를 받아 실제로 DOM에 마운트 하도록 해보거나 우리가 구현한 28줄의 React Hooks 복제본에서는 생략한 무수히 많은 세부 사항을 추가해볼 수도 있습니다. 아무쪼록 컨텍스트에서 클로저를 사용하는 경험과 React Hook이 동작하는 방식을 이해하는 유용한 멘탈 모델을 얻으셨기를 바랍니다.

-

이 글의 초안을 검토하고 값진 피드백으로 개선해 준 Dan AbramovDivya Sasidharan에게 감사의 말을 전합니다. 오류가 남아있다면 그건 제 탓입니다..


\ No newline at end of file +

이 글의 초안을 검토하고 값진 피드백으로 개선해 준 Dan AbramovDivya Sasidharan에게 감사의 말을 전합니다. 오류가 남아있다면 그건 제 탓입니다..


\ No newline at end of file diff --git a/deep-dive-how-do-react-hooks-really-work-ko.txt b/deep-dive-how-do-react-hooks-really-work-ko.txt index 929c398..779174f 100644 --- a/deep-dive-how-do-react-hooks-really-work-ko.txt +++ b/deep-dive-how-do-react-hooks-really-work-ko.txt @@ -1,8 +1,8 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","deep-dive-how-do-react-hooks-really-work-ko","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","deep-dive-how-do-react-hooks-really-work-ko","d"],{"children":["__PAGE__?{\"slug\":\"deep-dive-how-do-react-hooks-really-work-ko\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","deep-dive-how-do-react-hooks-really-work-ko","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","deep-dive-how-do-react-hooks-really-work-ko","d"],{"children":["__PAGE__?{\"slug\":\"deep-dive-how-do-react-hooks-really-work-ko\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","deep-dive-how-do-react-hooks-really-work-ko","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?"}],["$","time",null,{"dateTime":"2019-11-26","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"November 26, 2019"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까? — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"React Hook에 대해 이해하려면 JavaScript 클로저에 대해 잘 알아야합니다. React의 작은 복제본을 만들어보며 클로저와 hook의 동작 방식을 알아봅니다."}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null diff --git a/execution-context-in-javascript.html b/execution-context-in-javascript.html index 6519b76..6c9f422 100644 --- a/execution-context-in-javascript.html +++ b/execution-context-in-javascript.html @@ -1,4 +1,4 @@ -JavaScript의 실행 컨텍스트 (Execution Context) — Hewon Jeong
Hewon Jeong

JavaScript의 실행 컨텍스트 (Execution Context)

《코어 자바스크립트》의 ‘실행 컨텍스트’ 파트를 읽고 정리한 내용입니다.

+JavaScript의 실행 컨텍스트 (Execution Context) — Hewon Jeong
Hewon Jeong

JavaScript의 실행 컨텍스트 (Execution Context)

《코어 자바스크립트》의 ‘실행 컨텍스트’ 파트를 읽고 정리한 내용입니다.

Execution Context (실행 컨텍스트)

실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. JavaScript 엔진은 컨텍스트를 구성하여 이를 call stack에 쌓아 올렸다가, 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

Properties

@@ -51,4 +51,4 @@

📘 Learn More

  • Understanding Execution Context and Execution Stack in Javascript
  • 자바스크립트의 스코프와 클로저
  • ECMA-262-5 in detail. Chapter 3.2. Lexical environments: ECMAScript implementation
  • -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/execution-context-in-javascript.txt b/execution-context-in-javascript.txt index a31db19..df75488 100644 --- a/execution-context-in-javascript.txt +++ b/execution-context-in-javascript.txt @@ -1,8 +1,8 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","execution-context-in-javascript","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","execution-context-in-javascript","d"],{"children":["__PAGE__?{\"slug\":\"execution-context-in-javascript\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","execution-context-in-javascript","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","execution-context-in-javascript","d"],{"children":["__PAGE__?{\"slug\":\"execution-context-in-javascript\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","execution-context-in-javascript","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"JavaScript의 실행 컨텍스트 (Execution Context)"}],["$","time",null,{"dateTime":"2019-10-06","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"October 6, 2019"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"JavaScript의 실행 컨텍스트 (Execution Context) — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"실행 컨텍스트(Execution Context)란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다."}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null diff --git a/how-to-typescript-can-power-design-systems.html b/how-to-typescript-can-power-design-systems.html index 5f2b1be..4d587d0 100644 --- a/how-to-typescript-can-power-design-systems.html +++ b/how-to-typescript-can-power-design-systems.html @@ -1,4 +1,4 @@ -TypeScript로 디자인 시스템에 날개 달기 — Hewon Jeong
    Hewon Jeong

    TypeScript로 디자인 시스템에 날개 달기

    JSConf Korea 2019“How TypeScript Can Power Design System” 발표를 보고 정리한 내용입니다.

    +TypeScript로 디자인 시스템에 날개 달기 — Hewon Jeong
    Hewon Jeong

    TypeScript로 디자인 시스템에 날개 달기

    JSConf Korea 2019“How TypeScript Can Power Design System” 발표를 보고 정리한 내용입니다.

    발표자 소개

    Isha Kasliwal은 Twitch의 Design System 팀에 시니어 UI/UX Designer/Developer입니다. 이전에는 Salesforce의 Lightning Design System 팀에서 일했다고 합니다.

    @@ -209,4 +209,4 @@

    비지니스/사용자 측면에서의 장점

    강력한 타이핑을 통해 발생 가능한 버그를 사전에 줄이고, 프로젝트 관리 및 비즈니스 측면에 집중할 수 있습니다. 물론 버그가 적으니 사용성도 좋아질 것입니다.

    의도(intent)는 영향도(impact)를 따른다.

    -

    ‘형태(form)는 기능(function)을 따른다.‘는 말이 있습니다. 코드 작성에 적용해 보면 구조의 형태, 더 나아가 사용하기로 선택한 도구와 그것을 사용하는 방법 등은 기능에 의해 결정된다는 것 입니다. 웹 개발과 관련하여 우리가 하는 모든 작업의 목적은 보다 유용하고 안전한 웹 사이트, 앱을 만드는 것입니다. 개발자와 디자이너로써 우리가 만드는 모든 것의 의도는 사용자에게 미치는 영향을 따라야 합니다. 새로운 라이브러리, 프레임워크를 사용하는 것은 멋진 일이지만, 사용자 그리고 유지보수 할 동료에게 어떠한 긍정적인 영향을 줄 수 있는지 고려하는 것이 중요합니다. 프레임워크를 만드는 사람이라면, 안전과 유용성을 늘 염두 해야 합니다. 사용자가 구축하고 세상에 내놓는 소프트웨어의 의도는 생각보다 큰 영향을 끼칩니다. 따라서 모든 사람의 안전과 신뢰를 고려하는 도구를 사용하는 것이 중요합니다.


    \ No newline at end of file +

    ‘형태(form)는 기능(function)을 따른다.‘는 말이 있습니다. 코드 작성에 적용해 보면 구조의 형태, 더 나아가 사용하기로 선택한 도구와 그것을 사용하는 방법 등은 기능에 의해 결정된다는 것 입니다. 웹 개발과 관련하여 우리가 하는 모든 작업의 목적은 보다 유용하고 안전한 웹 사이트, 앱을 만드는 것입니다. 개발자와 디자이너로써 우리가 만드는 모든 것의 의도는 사용자에게 미치는 영향을 따라야 합니다. 새로운 라이브러리, 프레임워크를 사용하는 것은 멋진 일이지만, 사용자 그리고 유지보수 할 동료에게 어떠한 긍정적인 영향을 줄 수 있는지 고려하는 것이 중요합니다. 프레임워크를 만드는 사람이라면, 안전과 유용성을 늘 염두 해야 합니다. 사용자가 구축하고 세상에 내놓는 소프트웨어의 의도는 생각보다 큰 영향을 끼칩니다. 따라서 모든 사람의 안전과 신뢰를 고려하는 도구를 사용하는 것이 중요합니다.


    \ No newline at end of file diff --git a/how-to-typescript-can-power-design-systems.txt b/how-to-typescript-can-power-design-systems.txt index 565e4e6..8354df6 100644 --- a/how-to-typescript-can-power-design-systems.txt +++ b/how-to-typescript-can-power-design-systems.txt @@ -1,16 +1,16 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","how-to-typescript-can-power-design-systems","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","how-to-typescript-can-power-design-systems","d"],{"children":["__PAGE__?{\"slug\":\"how-to-typescript-can-power-design-systems\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","how-to-typescript-can-power-design-systems","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","how-to-typescript-can-power-design-systems","d"],{"children":["__PAGE__?{\"slug\":\"how-to-typescript-can-power-design-systems\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","how-to-typescript-can-power-design-systems","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"TypeScript로 디자인 시스템에 날개 달기"}],["$","time",null,{"dateTime":"2019-11-20","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"November 20, 2019"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"TypeScript로 디자인 시스템에 날개 달기 — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"디자인 시스템에 TypeScript를 적용하여 인터페이스 지향 개발, 정적 코드 분석을 통한 문서 자동화 등의 이점을 얻어보자"}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null 9:I[6906,["901","static/chunks/901-e0fa2c46d9ea48b7.js","749","static/chunks/749-fb88c0d37357d13f.js","42","static/chunks/app/%5Bslug%5D/page-571622d6f0bd4ea4.js"],""] 8:[["$","p",null,{"children":[["$","$L9",null,{"href":"https://2019.jsconfkorea.com/","children":"JSConf Korea 2019"}],"의 ",["$","$L9",null,{"href":"https://youtu.be/hbsIOHktvfo","children":"“How TypeScript Can Power Design System”"}]," 발표를 보고 정리한 내용입니다."]}],"\n",["$","p",null,{"children":"$La"}],"\n",["$","h2",null,{"children":"발표자 소개"}],"\n",["$","p",null,{"children":[["$","$L9",null,{"href":"https://twitter.com/ikasliwal","children":"Isha Kasliwal"}],"은 Twitch의 Design System 팀에 시니어 UI/UX Designer/Developer입니다. 이전에는 Salesforce의 ",["$","$L9",null,{"href":"https://www.lightningdesignsystem.com/","children":"Lightning Design System"}]," 팀에서 일했다고 합니다."]}],"\n",["$","h2",null,{"children":"디자인 시스템은 무엇인가?"}],"\n",["$","p",null,{"children":"확장 가능하고 반복 가능한 방식으로 제품을 개발할 수 있도록 **필요한 모든 엘리먼트를 그룹화해놓은 단일 정보 소스(the single source of the truth)**입니다."}],"\n",["$","p",null,{"children":"디자인 시스템은 실제 눈에 보이는 것과 그렇지 않은 것으로 구성됩니다. 가령,"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"눈에 보이는 컴포넌트, 재사용 가능한 리소스 등"}],"\n",["$","li",null,{"children":"추상적인 요소들 (brand values, UI/UX best practices 등)"}],"\n"]}],"\n",["$","h3",null,{"children":"디자인과 개발의 교차점"}],"\n",["$","p",null,{"children":"디자인 시스템은 디자인과 개발, 두 업무의 교차점이기도 합니다. UI/UX와 코드 동작을 규정하는 가이드라인, 팀이 동일한 환경과 방향 안에서 제품을 확장할 수 있는 규약과 원칙을 디자인과 코드로 구현한 것입니다."}],"\n",["$","h3",null,{"children":"디자인 시스템 ≠ 디자인 + 코드"}],"\n",["$","p",null,{"children":"디자인 시스템은 디자인과 코드 그 이상으로 방대합니다. 전체 서비스에서 재사용 할 수 있도록 컴포넌트를 만들고 제공하기 위해서는 다양한 요구사항을 반영 해야하며 많은 기술적 도전 과제가 수반됩니다. 다음과 같은 것들이 모두 포함될 수 있습니다."}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":"색상 팔레트, 디자인 패턴, 아이콘, 사용자 지원, 문서화, 컴포넌트, 애니메이션, 디자인 도구화, 일러스트레이션, 타이포그래피, 모션, 가이드라인, messaing, code 등"}],"\n"]}],"\n",["$","h3",null,{"children":"디자인 시스템을 사용하고 있는 회사들"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["$","$L9",null,{"href":"https://material.io/","children":"Google"}]}],"\n",["$","li",null,{"children":["$","$L9",null,{"href":"https://abduzeedo.com/amazon-web-services-design-system","children":"Amazon Web Service"}]}],"\n",["$","li",null,{"children":["$","$L9",null,{"href":"https://facebook.design/toolsandresources/","children":"Facebook"}]}],"\n",["$","li",null,{"children":["$","$L9",null,{"href":"https://www.carbondesignsystem.com/","children":"IBM"}]}],"\n",["$","li",null,{"children":["$","$L9",null,{"href":"https://airbnb.design/building-a-visual-language/","children":"Airbnb"}]}],"\n",["$","li",null,{"children":["$","$L9",null,{"href":"https://www.alexisgallisa.com/portfolio/twitch-design-system","children":"Twitch"}]}],"\n",["$","li",null,{"children":["$","$L9",null,{"href":"https://www.lightningdesignsystem.com/","children":"Salesforce"}]}],"\n",["$","li",null,{"children":["$","$L9",null,{"href":"https://polaris.shopify.com/","children":"Shopify"}]}],"\n"]}],"\n",["$","h3",null,{"children":"개발 프로세스 예시"}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"Ideation (관념화)"}]}],"\n",["$","p",null,{"children":["일반적으로 특정 컴포넌트가 필요한지 관념화하는 과정부터 시작합니다. 예시로 Twitch의 디자인 시스템 팀에서는 ",["$","em",null,{"children":"다른 엘리먼트와 함께 한 줄에 상태를 표시해 줄 수 있는 UI 엘리먼트"}],"가 필요하다는 것을 발견하였습니다. UX 리서치와 모범 사례들을 통해 알약처럼 생긴 UI가 가장 적합하다고 결론 내렸습니다."]}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"Design"}]}],"\n",["$","p",null,{"children":["관념화한 컴포넌트가 필요하다고 판단되면 디자인에 착수합니다. 아래는 Twitch에서 디자이너들이 사용하는 ",["$","$L9",null,{"href":"https://www.figma.com/","children":"Figma"}]," UI kit의 Pill 컴포넌트 예시입니다."]}],"\n",["$","p",null,{"children":"$Lb"}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"Code"}]}],"\n",["$","p",null,{"children":"많은 디자인 시스템 팀의 주된 목표는 view layer와 다른 엔지니어들이 손쉽게 사용 가능한 API를 제공하는 것입니다. 이를 위한 디자인에 관련된 많은 옵션, 규칙과 문서들을 React, JavaScript, TypeScript를 사용하여 관리할 수 있습니다."}],"\n",["$","p",null,{"children":["아래는 TypeScript로 작성한 코드와 문서의 예시입니다. 타입과 인터페이스를 기반으로 ",["$","span",null,{"data-rehype-pretty-code-figure":"","children":["$","code",null,{"data-language":"plaintext","data-theme":"light dark","style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"children":["$","span",null,{"data-line":"","children":["$","span",null,{"children":"props"}]}]}]}]," 관련 문서화를 손쉽게 할 수 있습니다."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","pre",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"tabIndex":"0","data-language":"tsx","data-theme":"light dark","children":["$","code",null,{"data-language":"tsx","data-theme":"light dark","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" enum"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" PillType"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Notification"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'tw-pill--notification'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Brand"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'tw-pill--brand'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Live"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'tw-pill--live'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Alert"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'tw-pill--alert'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Success"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'tw-pill--success'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Prime"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'tw-pill--prime'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Overlay"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'tw-pill--overlay'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Warn"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'tw-pill--warn'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" interface"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" PillProps"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" label"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" string"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" type"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" PillType"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" transform"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" TextTransform"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" const"}],["$","span",null,{"style":{"--shiki-light":"#DD4A68","--shiki-dark":"#EEEEEE"},"children":" Pill"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" React"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":"SFC"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"<"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":"PillProps"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"> "}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":"="}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" ("}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"},"children":"props"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":") "}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"=>"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" const"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" classes:"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" ClassValue"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'tw pill'"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#D1949E"},"children":" true"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" if"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" ("}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"props"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"type"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" classes"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":"["}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"props"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"type"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":"]"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#D1949E"},"children":" true"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" return"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" {"}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"props"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"label"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" )"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"Pill"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"defaultProps"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" transform"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" TextTransform"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"Uppercase"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"Pill"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":"displayName"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'Pill'"}]]}]]}]}]}],"\n",["$","p",null,{"children":"$Lc"}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"Production"}]}],"\n",["$","p",null,{"children":["웹 사이트, 모바일 웹 등 모든 타입의 웹앱 프로덕션에서 쓰일 수 있는 단계입니다. ",["$","span",null,{"data-rehype-pretty-code-figure":"","children":["$","code",null,{"data-language":"plaintext","data-theme":"light dark","style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"children":["$","span",null,{"data-line":"","children":["$","span",null,{"children":"Pill"}]}]}]}]," 컴포넌트를 동료 디자이너, 개발자들이 상태를 표현하기 위한 UI로 사용할 수 있게 되었습니다.👏🏻"]}],"\n",["$","p",null,{"children":"$Ld"}],"\n"]}],"\n"]}],"\n",["$","h2",null,{"children":"TypeScript는 무엇인가?"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"JavaScript로 컴파일되는, JavaScript의 타입이 있는 상위 집합 (typed superset)"}],"\n",["$","li",null,{"children":"Optional static typing, classes 그리고 interface를 제공"}],"\n"]}],"\n",["$","h3",null,{"children":"장점"}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":["스타일 별 ",["$","span",null,{"data-rehype-pretty-code-figure":"","children":["$","code",null,{"data-language":"plaintext","data-theme":"light dark","style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"children":["$","span",null,{"data-line":"","children":["$","span",null,{"children":"props"}]}]}]}]," 타이핑 하기"]}]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","pre",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"tabIndex":"0","data-language":"typescript","data-theme":"light dark","children":["$","code",null,{"data-language":"typescript","data-theme":"light dark","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" interface"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" CoreLinkProps"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" children"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" React"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":"ReactNode"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" className"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" string"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" type"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" CoreLinkType"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" to"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" history"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":"LocationDescriptor"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" underline"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" boolean"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" hoverUnderlineNone"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" boolean"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" hoverColorInherit"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" boolean"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}]]}]}]}],"\n",["$","p",null,{"children":"이를 통해 아래와 같은 장점이 있습니다."}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":"시각 요소들에 대한 일관성 확보"}],"\n",["$","li",null,{"children":"각 prop의 목적을 명확히 표현"}],"\n",["$","li",null,{"children":"변수들의 변이(mutations) 방지"}],"\n"]}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"IDE"}]}],"\n",["$","p",null,{"children":"자동완성, 스니펫 생성, 전체 코드베이스에 걸친 renaming, 에러 컴파일 등"}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"export 가능한 인터페이스"}]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","pre",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"tabIndex":"0","data-language":"tsx","data-theme":"light dark","children":["$","code",null,{"data-language":"tsx","data-theme":"light dark","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","data-highlighted-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" interface"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" CoreInteractivePublicProps"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" extends"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" CoreMouseHandlers"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" ariaLabel"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" string"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" autoFocus"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" boolean"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" blurAfterClick"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" boolean"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#708090","--shiki-dark":"#998066","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"},"children":" // ..."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#708090","--shiki-dark":"#998066","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"},"children":"// 위 interface를 extends 한다."}]}],"\n",["$","span",null,{"data-line":"","data-highlighted-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" interface"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" CoreLinkProps"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" extends"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" CoreInteractivePublicProps"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" children"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" React"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"."}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":"ReactNode"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" className"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" string"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" type"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" CoreLinkType"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#708090","--shiki-dark":"#998066","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"},"children":" // ..."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}]]}]}]}],"\n",["$","p",null,{"children":"인터페이스로 컴포넌트의 의도를 매끄럽게 표현할 수 있습니다. (내부 구현을 노출하지 않고 컴포넌트가 무엇을 필요로 하고, 행할 수 있는지를 나타낼 수 있기 때문)"}],"\n",["$","p",null,{"children":["또한 인터페이스를 export하여 비슷한 컴포넌트 끼리 같은 인터페이스를 공유하게 함으로써 일관성을 높일 수 있습니다. 위의 예제에서는 링크와 관련된 인터랙션 관심사를 ",["$","span",null,{"data-rehype-pretty-code-figure":"","children":["$","code",null,{"data-language":"plaintext","data-theme":"light dark","style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"children":["$","span",null,{"data-line":"","children":["$","span",null,{"children":"CoreInteractivePublicProps"}]}]}]}]," 로 분리 한 뒤, ",["$","span",null,{"data-rehype-pretty-code-figure":"","children":["$","code",null,{"data-language":"plaintext","data-theme":"light dark","style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"children":["$","span",null,{"data-line":"","children":["$","span",null,{"children":"Link"}]}]}]}]," 컴포넌트에서 확장(extends) 하였습니다."]}],"\n"]}],"\n"]}],"\n",["$","h3",null,{"children":"TypeScript & Design System"}],"\n",["$","p",null,{"children":"타입스크립트는 디자인과 개발 사이의 강력한 신뢰와 관계를 만드는데 도움이 됩니다."}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"디자이너는 디자인이 올바르게 구현되고 있음을 신뢰할 수 있습니다."}],"\n",["$","li",null,{"children":"개발자는 컴포넌트 사용 시 필요한 정보들에 대해 올바르게 접근하고 있는지 신뢰할 수 있습니다."}],"\n"]}],"\n",["$","h3",null,{"children":"개발자 측면에서의 장점"}],"\n",["$","p",null,{"children":"컴포넌트 props의 interface로 정적 코드 분석을 쉽게 활용하고 개발자와 디자이너에게 더 나은 도구들을 제공 할 수 있습니다."}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"인터페이스 지향 개발 (Interface Oriented Development)"}]}],"\n",["$","p",null,{"children":"타입스크립트는 컴포넌트를 가져다 쓰는 개발자가 내부 코드를 모두 알 필요 없이, 노출된 인터페이스만을 통하여 개발할 수 있도록 합니다. ⇒ 코드 베이스에 초기 정착 과정이 쉽고, 디자인 관련된 프론트엔드 코드들에 대해 자동 완성 기능이 뛰어납니다."}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"정적 코드 분석"}]}],"\n",["$","p",null,{"children":"타입스크립트로 작성된 컴포넌트의 interface를 읽어 각 컴포넌트의 props 정보를 문서화하여 다른 개발자들이 참조하기 쉽도록 제공할 수 있습니다."}],"\n",["$","p",null,{"children":"$Le"}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"기능성 테스트를 위한 Playground"}]}],"\n",["$","p",null,{"children":["playground 기능을 제공하여 개발자들이 ",["$","span",null,{"data-rehype-pretty-code-figure":"","children":["$","code",null,{"data-language":"plaintext","data-theme":"light dark","style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"children":["$","span",null,{"data-line":"","children":["$","span",null,{"children":"props"}]}]}]}],"를 실시간으로 바꾸어가며 곧바로 어떻게 바뀌는지 볼 수 있습니다."]}],"\n"]}],"\n"]}],"\n",["$","h3",null,{"children":"디자이너 측면에서의 장점"}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"표현할 UI의 형태들이 컴포넌트에 포함된다."}]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","pre",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#eeeeee","--shiki-light-bg":"#fafaf8","--shiki-dark-bg":"#1e1e1e"},"tabIndex":"0","data-language":"typescript","data-theme":"light dark","children":["$","code",null,{"data-language":"typescript","data-theme":"light dark","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" enum"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" ProgressBarSize"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Default"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" ''"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Small"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'sm'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" ExtraSmall"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'xs'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" enum"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" ProgressBarStatus"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Default"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'default'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Caution"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'caution'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Error"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'error'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Success"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'success'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" enum"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" ProgressBarAnimationDirection"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Up"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'up'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" Down"}],["$","span",null,{"style":{"--shiki-light":"#9A6E3A","--shiki-dark":"#F5B83D"},"children":" ="}],["$","span",null,{"style":{"--shiki-light":"#669900","--shiki-dark":"#BDE052"},"children":" 'down'"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":" interface"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" ProgressBarProps"}],["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" animationDuration"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" number"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" animationDirection"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" ProgressBarAnimationDirection"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" borderRadius"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" BorderRadius"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" size"}],["$","span",null,{"style":{"--shiki-light":"#0077AA","--shiki-dark":"#D1949E"},"children":"?"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" ProgressBarSize"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-light":"#990055","--shiki-dark":"#EEEEEE"},"children":" status"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":":"}],["$","span",null,{"style":{"--shiki-light":"#222222","--shiki-dark":"#EEEEEE"},"children":" ProgressBarStatus"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#708090","--shiki-dark":"#998066","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"},"children":" // ..."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-light":"#030712","--shiki-dark":"#EEEEEE"},"children":"}"}]}]]}]}]}],"\n",["$","p",null,{"children":"인터페이스와 enum의 조합으로 컴포넌트가 표현할 디자인 형태들을 포함시킬 수 있으므로, 특정 클래스 이름 등을 알고 있는 코드를 복사-붙여넣기 하지 않고도 UI를 구축할 수 있습니다. 디자이너는 시안에 모든 변경에 대해 일일이 수정할 필요가 없고, 개발자는 무엇이 어떻게 변할 지 정확히 예측할 수 있습니다."}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"정보의 원천을 디자인에서 관리"}]}],"\n",["$","p",null,{"children":"정보의 원천을 디자인에서 관리하도록 할 수 있습니다. 예를 들면, Figma UI 키트에 사용하는 타이포그래피, 색상, 텍스트 타입에 대해 변수 이름을 매핑할 수 있을 것입니다. 이렇게 지정한 이름과 값들이 컴포넌트에 prop으로 그대로 사용 되기 때문에, 코드 효율성과 디자인 일관성을 보장하는 시스템을 유지할 수 있습니다."}],"\n"]}],"\n"]}],"\n",["$","h3",null,{"children":"비지니스/사용자 측면에서의 장점"}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":["$","em",null,{"children":["TypeScript를 사용함으로써 약 15%의 버그를 사전에 막을 수 있다. - ",["$","$L9",null,{"href":"https://blog.acolyer.org/2017/09/19/to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/","children":"To type or not to type: quantifying detectable bugs in JavaScript"}]]}]}],"\n"]}],"\n",["$","p",null,{"children":"강력한 타이핑을 통해 발생 가능한 버그를 사전에 줄이고, 프로젝트 관리 및 비즈니스 측면에 집중할 수 있습니다. 물론 버그가 적으니 사용성도 좋아질 것입니다."}],"\n",["$","h2",null,{"children":"의도(intent)는 영향도(impact)를 따른다."}],"\n",["$","p",null,{"children":["‘형태(form)는 기능(function)을 따른다.‘는 말이 있습니다. 코드 작성에 적용해 보면 구조의 형태, 더 나아가 사용하기로 선택한 도구와 그것을 사용하는 방법 등은 기능에 의해 결정된다는 것 입니다. 웹 개발과 관련하여 우리가 하는 모든 작업의 목적은 보다 유용하고 안전한 웹 사이트, 앱을 만드는 것입니다. ",["$","strong",null,{"children":"개발자와 디자이너로써 우리가 만드는 모든 것의 의도는 사용자에게 미치는 영향을 따라야 합니다."}]," 새로운 라이브러리, 프레임워크를 사용하는 것은 멋진 일이지만, ",["$","strong",null,{"children":"사용자 그리고 유지보수 할 동료에게 어떠한 긍정적인 영향을 줄 수 있는지 고려하는 것이 중요합니다."}]," 프레임워크를 만드는 사람이라면, 안전과 유용성을 늘 염두 해야 합니다. 사용자가 구축하고 세상에 내놓는 소프트웨어의 의도는 생각보다 큰 영향을 끼칩니다. 따라서 모든 사람의 안전과 신뢰를 고려하는 도구를 사용하는 것이 중요합니다."]}]] f:I[1749,["901","static/chunks/901-e0fa2c46d9ea48b7.js","749","static/chunks/749-fb88c0d37357d13f.js","42","static/chunks/app/%5Bslug%5D/page-571622d6f0bd4ea4.js"],"Image"] -10:T97e,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAASCAIAAAC1qksFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGv0lEQVR4nE2PeVDadxrGv7LAkmlFg4kgVxVE8QcIcvxEwAMREbzAIxAE8a6oaCNeeFutpkbxHlcxYxqz0tjYNoba2qRpkia7GbPdSTpGJ5tsJ01N06RJOrlsNtV1J+vMzj7z+e+d9zPPA3xCYKw4BU5Uq/Zl6cx6jdkUqMmXVjfznUMCWzuZE4UDNJJPJAkrZfirojj6ELyGtjuesVdOxYmpb3Leksjpjf1Y26j3O9MhTUeNw9OdU9NTrimXveOoOK8QGwEoaoNruHRlznR/dfDFP/pWloecx6br7919Z/1+/dkVRnwmFZMoIFfA/g5dUtMnx480F7jklPfkQQ5RQAUbqwnJLmRfuA8+fgIWN1P/vtVya/OHre3t5y9eur/5Xd53GCgANzb281r28pHa21813LvU9uPa13OrVzNurO0bnpE1jhJ58XBAUQq7TysaDufK8lQCc3J+nmw+PWyspXJUK9BTk/Monttg5qddCy81F1+RZx+71zaerq3/3PrnX+m1gwgZgBOTxqyS80PFl92dBx22jVfbG9vbo6srlZ6l8KZBSni8mtP2ttqTmX7Yx8cPhyeKROpa03K/w91V154OWQN1pTjPT2D2eenxz95zD5cO9b9/rO/svOuBdfJXRMUAUgpIigz7yLijSOvpyW9vtp2/cGl7e/vLlVsDV69bnj1gpBr2xYxXlS2X248nKpMMallu0buHJy6WFpo1EqUerqPqbF4LD8HcS+2xy72TzoLREy3jE6cm+x5k9j0E+c4/RIGwFGPv1BSdy0+A2Xw+b3hs6sXzp1cv/tXKTW/45SFsq9ZlT/eMnLCWlzS2NHqOjy0MVTcdsOWaqwtzDpuULqrOBhae4j9+Vv7N4w73Zduwx3FoYbn3i8filp+BuQ8pBhxlmnNiIC5ZxYlOtegtOXrLnw72Tw4e6sLKRw3d5LgUc92JK9+tDjiHtFmGiZGuweaSantDQ4293n46L3mWqqsCC78FffrM+u2ThXsPz9xZX7+y+tgxs06pvAsM76NhsJsbzUzLZciTWgcOJafomeFie3GFCuLmKVLaugepYnXXxKlr166550/2dHeODPb0OUec/c7p6fG5ueWyHBdJawee35mLzw7c3DiztfXk5u0nS5cflUz+CIrugOxupAjg+HJaiiWx0GqvbyLQOIEcdrQ6jUSi1epziw25u8jM0YnZD90zfb29VbaK8fGxpcWTg/3Oc+cunPri7IG3e4i6BuDZlJ3fGLnyy80L1+8o2+4ahh4pu28D0z9BRidKCAgCGTkhe3+ZNU1vYfAF6jR5dVu1MVVlyTLsDY3YS6BZ6mbe7Z/t6BhSJaUbcwyfuocHO+xSUXRb54cmyyGirga9uKn+29axIx+cTtLNFBZ7cs2XNIW3gPEGSG/7owBAYkluqbHUbrZ3FLc3W5qrdAcd5uE2/f6y/TKtZg8hMKNsrKjrK2vnEpcnS1Kry8sKKksLrFk9NfmzmXI7QVeDP7NZvPKv8cX5oxX75vIKXAXGjyrzbgD9dZDaghKAkEiJxWaosO8323KKrFl1Dkthkc5erpbHhNM5oVgCTZNYa8p35Re7qDQBlcYJDomMECUezKg4IO9WQfoAbQ10bqvx+1fznyx+wJIusqJnYOVJgWENZH4LkhvQAgBFRhpKsqvK1UZTUle7qbXVWGfX1VdpzNlRlrxEXxJTAeVkylu10moWJElNyYXCohis6FZ1TrOshE9QELMbNKtbYw82v9/+99OVG38xNt9KcDzCl94EadeBthkJA1xQsDCSF8plhgm44jhhBMymcyEhzA4T8iCx0AdPE5JjBOQEHjGWx+DLRbKwAHKOSqHipXJ2w4Hot/bE6WOOXKr/6LO5pdNfzi14ynoWqCY3kE+AyAkgM+2CAJ0ezBdKIRY/mAExWXyhSCoSSfwJVPA6CB8fHF8Ay6JjFAplXGyCIl65g0Qik0XLsT6+FCJFFiURRYiC6Qw2m8fjwxwRDMtiZXIlnkx57QgNgUTCKBbEZUG8YFpwUCCNRKTicH5IJBqFwmAwb7AgHjOUHRbG4XIFBALJz8/f359AwBNJRKq3NxaH8+dyhWEQl8cTBtMZAQFkAoFEIJDIJKoP1heBQAECgRQeHsFksvB4IgqF2Snu5YVEItE7MBihoaGskBCISKQEBdGJRAoAyB28vJDe3r5sFo/BCPXz88dgsAAg/nvyAgCBQKCQSDQIDAxSqdRSaSwG8wYCgUKhMCgU5n92JBIdESFMSEiUSqP99viLxRKBAN4Zh0bv8vJC+vr6yeUKLpcPwOtOO+//L/kPnLVwEKXroiIAAAAASUVORK5CYII=d:["$","$Lf",null,{"src":"./how-to-typescript-can-power-design-systems/pill-on-production.jpg","alt":"","placeholder":"blur","blurDataURL":"$10","unoptimized":true,"width":1112,"height":628}] -11:T412,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAZCAIAAADfbbvGAAAACXBIWXMAAAsTAAALEwEAmpwYAAACr0lEQVR4nLWWPXPTMBjHVZauoc3HKlPnjt3KJ2HqyMZlZGaCK0OJG0LOOWOMRfDJzbm+IOPGcWRFKFKFOFuXXNqSl4byu5z8RNblr+dFjwIODw8PDp4Nh0OttZRSbYVeDkjTdDAYSCn1/wGEFQgh13Vt23YcB0Lo+75X4TiO67q9Xs/zPGOYle1224ye50EI8zxfKmDbXcuyms2mZVmt1kfHcczIFuCczw1jU0rnI2NsRQCAqJAzlFLGeLQQ6TvMEraYPbWQzLVZXSfw2ADGWK/XgxCWAZ2wjuVNuciyDMIAwm+UThib+BA63c/xVay1DoLAdV1T1pu4AqSUtKCUUillgrMARtc/cykFIQUhhckHISQbZpRSrTWlNM9zzvmmHix+mUd5cVL+W8JLD/JRuSNxG1ORcv7ralsBMiat1ichxP13xpXT09OTk+dGaYsuArrdbr2+v79X8rRWq557tVqtXq8DAI6Pj23bbjQaDyrNWx40Gg2wEq01xjiOY9MwgiAIwzAIgt4MhFBQ0e/3EUK+75tmEwRBFEXAtu2dnSf3P7u7uwCAo6OjOI7Pzs4syzo/P+90Ou12u9m0kiQhZJzneZZl+QxSYWwzTwhZf9DU7Z780FgBpZRYjlxZo8vEFuc38oBVaK1N7Sr1m5UHnClZdsbylFJqNkoIuVOQ6wU456hCKYUxHgwG+Yha750Pb7uDq7SgRXV5fBVCpGnqeV6aXj9M4D7loeQ3Uy5KJ9alZFMBObskpJScMyHFshK4I7lKwCz1v1y+fvWOFixJEs6nN0oNh0NCyIY7Wy9gX3x/+eINGU9w8mM0Wnr3biNgEHJaTEZKqSwbjzLCGIvjq7/2ri0FGPtlCoMW5Y1ECLFtO4qiMAzNX54wvEQIYYzDMMQY9/t9jDFCKI7jKIr+AMKmtM5iKkEfAAAAAElFTkSuQmCCc:["$","$Lf",null,{"src":"./how-to-typescript-can-power-design-systems/pill-document.jpg","alt":"","placeholder":"blur","blurDataURL":"$11","unoptimized":true,"width":1406,"height":1114}] -b:["$","$Lf",null,{"src":"./how-to-typescript-can-power-design-systems/pill-ui-kit.jpg","alt":"","placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAASCAIAAAC1qksFAAAACXBIWXMAAAsTAAALEwEAmpwYAAACkElEQVR4nLVUzWoUQRAeN+OyKom7y+IaxJsP4At48A18FW8KCj6AJ1mCICgigl495CIIGsWDngy6IVGyZLMGd3amZ7t7p3u6eqqkZ/bPkKhEU3yH6qG6vv6+6Wrv3OUrF249q5yu+L7vl8u+75d8v+TCK5VKCyXP971avVqrVxuNerVaazQay8vnm83m4tJiuVxUuh0n/ZJ3YqF5yrt09drF6yuVSuXs0plarebt7u4OpRJS8knEwzCOAy7CeBhGrM9Yn8UBi/s5gngYumQ4iMcI43gwQcBYELFYasM5Z4yF4cADAME5ItIskCgDSCzq6XIu+T2QRZHgfNrLM8Ywxqy1OAmLGmxChDud3quXb7Y2vyJmnPMkGSFmh8FmymYKMVUu9LSbp7UWQrjjTUQgGZspIvryeePhg6fv330gol7v+97eXqFiLGZeM7ljIaVIxpjUWjtToLU2xvxSSwYpzTdkk2YwaZkRQV6Q5XA5uaXbUhBwPpRSzgiEEP1+P4qiKW1RDdaANVIKgNQYoxJlEVSW6CxFBJtIO5IIKWSgARAh766JjNZaSjn1w0NEyGPOIigsWv/Uvr/yqLPdWX2+/vju2x9m0Np58mL4Otn6tnnzzsaN22JtbbUn7n3sjlJLZDJHACyPmYJ5c+YVIIGBVKkEwGid6kRnBEmhAFKQwikwSlkYAeR2FQogiiI+f4sOJ0hp7O++xBmdu1/8jDT/MoZF2N7u/KWCo8Ci7na7xbU8FgIkE4ZhMVjHQkAESqkoirTWx0RghBCMsels/X+LgiAIw4HW7qJbaw8kKKbmSMA0CII/WvQPBPkkK6Xco2ltu912k3wQwfzzMts8eXZmyb4asKrT6SilkiSJ47jVav0EfqA57PdDHhYAAAAASUVORK5CYII=","unoptimized":true,"width":2078,"height":1166}] e:["$","$Lf",null,{"src":"./how-to-typescript-can-power-design-systems/design-system-document.jpg","alt":"","placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAASCAIAAAC1qksFAAAACXBIWXMAAAsTAAALEwEAmpwYAAACdklEQVR4nKVUTU/cMBDNre2x6n/qT6haqb3233DjBgL1sj+AG4eq0iKxlP2ApUvLspDdqsGJE69nbRw7TpxN5aQbEAfI0qccRrbjN+/NjJ03Lz4ftk9EzI0xRQmllOd5GGOEkF8CY5ymafEsOI7z8ejgx2zmTqczrXVRFISQjY2Nzc3N7a2tnZ2d3d0vrVaLMVYURV5iXYJ3o8H1nGKMw+pnYwylFBawALmAGMCGlQ7f9xFCVR5rEAx7lyoRqb4zocrUmNwY84ysHxC877SHnvcbKPzPRY8RnPSukO9RSutVEhHGGET8+udNfKuiKAIAIQTGuEkSidLBzTz0KZ1zx3E+jAZugBEAVObU54zJM53nZm1Zy2WRm+VyaQOr4Kw/IfNAKVVtp2nW3j+bXgZaJ3U9hRAAIJWUMpZSCinq84/DKjhsn85mbqKSVeKm8+2XO/aXRV5XHoD5KPRRFNgP+yiUUq4aIX+CoNMeIt/z/njVNOV5nqZZorL7djHGQxxFEcE4JBGhlDLGAShjt4zFjxTGWtTtnJfOWcuKotA622sdfd074Zzft6i8dEHpXAjRxJw7Bf3vF2Hoc86rpSzLDvbPz46nKlE1gZSScy6EkFLaBgNgbAGweLKpLMFwMIlIUB9NddZtj5FHtdaxsCyl0ZlStsRSSq11ukIjBcPBxJ1e1QqU1IPOpAwSRgWHWOuMc84YUyWa+7Mi6F1GJHiQTlWPGpRSQkjVrPW72wT/5gCHqHvcdd1p1UWEEK11NboYYwBQSgEAsbBTDQCUWg+fJnjpvB0Nrsbji37/VPCH7VG/dFVgR/QeGil4/epT92hESLiuuQ3xFyOKVWHGrm9yAAAAAElFTkSuQmCC","unoptimized":true,"width":1484,"height":848}] +10:T412,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAZCAIAAADfbbvGAAAACXBIWXMAAAsTAAALEwEAmpwYAAACr0lEQVR4nLWWPXPTMBjHVZauoc3HKlPnjt3KJ2HqyMZlZGaCK0OJG0LOOWOMRfDJzbm+IOPGcWRFKFKFOFuXXNqSl4byu5z8RNblr+dFjwIODw8PDp4Nh0OttZRSbYVeDkjTdDAYSCn1/wGEFQgh13Vt23YcB0Lo+75X4TiO67q9Xs/zPGOYle1224ye50EI8zxfKmDbXcuyms2mZVmt1kfHcczIFuCczw1jU0rnI2NsRQCAqJAzlFLGeLQQ6TvMEraYPbWQzLVZXSfw2ADGWK/XgxCWAZ2wjuVNuciyDMIAwm+UThib+BA63c/xVay1DoLAdV1T1pu4AqSUtKCUUillgrMARtc/cykFIQUhhckHISQbZpRSrTWlNM9zzvmmHix+mUd5cVL+W8JLD/JRuSNxG1ORcv7ralsBMiat1ichxP13xpXT09OTk+dGaYsuArrdbr2+v79X8rRWq557tVqtXq8DAI6Pj23bbjQaDyrNWx40Gg2wEq01xjiOY9MwgiAIwzAIgt4MhFBQ0e/3EUK+75tmEwRBFEXAtu2dnSf3P7u7uwCAo6OjOI7Pzs4syzo/P+90Ou12u9m0kiQhZJzneZZl+QxSYWwzTwhZf9DU7Z780FgBpZRYjlxZo8vEFuc38oBVaK1N7Sr1m5UHnClZdsbylFJqNkoIuVOQ6wU456hCKYUxHgwG+Yha750Pb7uDq7SgRXV5fBVCpGnqeV6aXj9M4D7loeQ3Uy5KJ9alZFMBObskpJScMyHFshK4I7lKwCz1v1y+fvWOFixJEs6nN0oNh0NCyIY7Wy9gX3x/+eINGU9w8mM0Wnr3biNgEHJaTEZKqSwbjzLCGIvjq7/2ri0FGPtlCoMW5Y1ECLFtO4qiMAzNX54wvEQIYYzDMMQY9/t9jDFCKI7jKIr+AMKmtM5iKkEfAAAAAElFTkSuQmCCc:["$","$Lf",null,{"src":"./how-to-typescript-can-power-design-systems/pill-document.jpg","alt":"","placeholder":"blur","blurDataURL":"$10","unoptimized":true,"width":1406,"height":1114}] +11:T97e,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAASCAIAAAC1qksFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGv0lEQVR4nE2PeVDadxrGv7LAkmlFg4kgVxVE8QcIcvxEwAMREbzAIxAE8a6oaCNeeFutpkbxHlcxYxqz0tjYNoba2qRpkia7GbPdSTpGJ5tsJ01N06RJOrlsNtV1J+vMzj7z+e+d9zPPA3xCYKw4BU5Uq/Zl6cx6jdkUqMmXVjfznUMCWzuZE4UDNJJPJAkrZfirojj6ELyGtjuesVdOxYmpb3Leksjpjf1Y26j3O9MhTUeNw9OdU9NTrimXveOoOK8QGwEoaoNruHRlznR/dfDFP/pWloecx6br7919Z/1+/dkVRnwmFZMoIFfA/g5dUtMnx480F7jklPfkQQ5RQAUbqwnJLmRfuA8+fgIWN1P/vtVya/OHre3t5y9eur/5Xd53GCgANzb281r28pHa21813LvU9uPa13OrVzNurO0bnpE1jhJ58XBAUQq7TysaDufK8lQCc3J+nmw+PWyspXJUK9BTk/Monttg5qddCy81F1+RZx+71zaerq3/3PrnX+m1gwgZgBOTxqyS80PFl92dBx22jVfbG9vbo6srlZ6l8KZBSni8mtP2ttqTmX7Yx8cPhyeKROpa03K/w91V154OWQN1pTjPT2D2eenxz95zD5cO9b9/rO/svOuBdfJXRMUAUgpIigz7yLijSOvpyW9vtp2/cGl7e/vLlVsDV69bnj1gpBr2xYxXlS2X248nKpMMallu0buHJy6WFpo1EqUerqPqbF4LD8HcS+2xy72TzoLREy3jE6cm+x5k9j0E+c4/RIGwFGPv1BSdy0+A2Xw+b3hs6sXzp1cv/tXKTW/45SFsq9ZlT/eMnLCWlzS2NHqOjy0MVTcdsOWaqwtzDpuULqrOBhae4j9+Vv7N4w73Zduwx3FoYbn3i8filp+BuQ8pBhxlmnNiIC5ZxYlOtegtOXrLnw72Tw4e6sLKRw3d5LgUc92JK9+tDjiHtFmGiZGuweaSantDQ4293n46L3mWqqsCC78FffrM+u2ThXsPz9xZX7+y+tgxs06pvAsM76NhsJsbzUzLZciTWgcOJafomeFie3GFCuLmKVLaugepYnXXxKlr166550/2dHeODPb0OUec/c7p6fG5ueWyHBdJawee35mLzw7c3DiztfXk5u0nS5cflUz+CIrugOxupAjg+HJaiiWx0GqvbyLQOIEcdrQ6jUSi1epziw25u8jM0YnZD90zfb29VbaK8fGxpcWTg/3Oc+cunPri7IG3e4i6BuDZlJ3fGLnyy80L1+8o2+4ahh4pu28D0z9BRidKCAgCGTkhe3+ZNU1vYfAF6jR5dVu1MVVlyTLsDY3YS6BZ6mbe7Z/t6BhSJaUbcwyfuocHO+xSUXRb54cmyyGirga9uKn+29axIx+cTtLNFBZ7cs2XNIW3gPEGSG/7owBAYkluqbHUbrZ3FLc3W5qrdAcd5uE2/f6y/TKtZg8hMKNsrKjrK2vnEpcnS1Kry8sKKksLrFk9NfmzmXI7QVeDP7NZvPKv8cX5oxX75vIKXAXGjyrzbgD9dZDaghKAkEiJxWaosO8323KKrFl1Dkthkc5erpbHhNM5oVgCTZNYa8p35Re7qDQBlcYJDomMECUezKg4IO9WQfoAbQ10bqvx+1fznyx+wJIusqJnYOVJgWENZH4LkhvQAgBFRhpKsqvK1UZTUle7qbXVWGfX1VdpzNlRlrxEXxJTAeVkylu10moWJElNyYXCohis6FZ1TrOshE9QELMbNKtbYw82v9/+99OVG38xNt9KcDzCl94EadeBthkJA1xQsDCSF8plhgm44jhhBMymcyEhzA4T8iCx0AdPE5JjBOQEHjGWx+DLRbKwAHKOSqHipXJ2w4Hot/bE6WOOXKr/6LO5pdNfzi14ynoWqCY3kE+AyAkgM+2CAJ0ezBdKIRY/mAExWXyhSCoSSfwJVPA6CB8fHF8Ay6JjFAplXGyCIl65g0Qik0XLsT6+FCJFFiURRYiC6Qw2m8fjwxwRDMtiZXIlnkx57QgNgUTCKBbEZUG8YFpwUCCNRKTicH5IJBqFwmAwb7AgHjOUHRbG4XIFBALJz8/f359AwBNJRKq3NxaH8+dyhWEQl8cTBtMZAQFkAoFEIJDIJKoP1heBQAECgRQeHsFksvB4IgqF2Snu5YVEItE7MBihoaGskBCISKQEBdGJRAoAyB28vJDe3r5sFo/BCPXz88dgsAAg/nvyAgCBQKCQSDQIDAxSqdRSaSwG8wYCgUKhMCgU5n92JBIdESFMSEiUSqP99viLxRKBAN4Zh0bv8vJC+vr6yeUKLpcPwOtOO+//L/kPnLVwEKXroiIAAAAASUVORK5CYII=d:["$","$Lf",null,{"src":"./how-to-typescript-can-power-design-systems/pill-on-production.jpg","alt":"","placeholder":"blur","blurDataURL":"$11","unoptimized":true,"width":1112,"height":628}] +b:["$","$Lf",null,{"src":"./how-to-typescript-can-power-design-systems/pill-ui-kit.jpg","alt":"","placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAASCAIAAAC1qksFAAAACXBIWXMAAAsTAAALEwEAmpwYAAACkElEQVR4nLVUzWoUQRAeN+OyKom7y+IaxJsP4At48A18FW8KCj6AJ1mCICgigl495CIIGsWDngy6IVGyZLMGd3amZ7t7p3u6eqqkZ/bPkKhEU3yH6qG6vv6+6Wrv3OUrF249q5yu+L7vl8u+75d8v+TCK5VKCyXP971avVqrVxuNerVaazQay8vnm83m4tJiuVxUuh0n/ZJ3YqF5yrt09drF6yuVSuXs0plarebt7u4OpRJS8knEwzCOAy7CeBhGrM9Yn8UBi/s5gngYumQ4iMcI43gwQcBYELFYasM5Z4yF4cADAME5ItIskCgDSCzq6XIu+T2QRZHgfNrLM8Ywxqy1OAmLGmxChDud3quXb7Y2vyJmnPMkGSFmh8FmymYKMVUu9LSbp7UWQrjjTUQgGZspIvryeePhg6fv330gol7v+97eXqFiLGZeM7ljIaVIxpjUWjtToLU2xvxSSwYpzTdkk2YwaZkRQV6Q5XA5uaXbUhBwPpRSzgiEEP1+P4qiKW1RDdaANVIKgNQYoxJlEVSW6CxFBJtIO5IIKWSgARAh766JjNZaSjn1w0NEyGPOIigsWv/Uvr/yqLPdWX2+/vju2x9m0Np58mL4Otn6tnnzzsaN22JtbbUn7n3sjlJLZDJHACyPmYJ5c+YVIIGBVKkEwGid6kRnBEmhAFKQwikwSlkYAeR2FQogiiI+f4sOJ0hp7O++xBmdu1/8jDT/MoZF2N7u/KWCo8Ci7na7xbU8FgIkE4ZhMVjHQkAESqkoirTWx0RghBCMsels/X+LgiAIw4HW7qJbaw8kKKbmSMA0CII/WvQPBPkkK6Xco2ltu912k3wQwfzzMts8eXZmyb4asKrT6SilkiSJ47jVav0EfqA57PdDHhYAAAAASUVORK5CYII=","unoptimized":true,"width":2078,"height":1166}] 12:Tb06,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAVCAIAAACor3u9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAH5klEQVR4nDWU+1MTBwKAtzPndObmas+zWh+cj0PRAiqgHRWxii2PhDckIGIAE4iCQiFVeT8iEEEJlRACYYEISwiEvFiSDUnckCwbsiQmJAQC8iqKgHVand7c3C93c3Nznblvvn/h+wBQ2v1c3i8elUjVcqlaqsN0DlxXlp8xLhN9fLMEQ/yKO9SfPLa1OdsPjBQMHnQS5ku3ysQjiikUoabQYJl0e8mpk7brZR26ofbfbXvlMHsIM9TZZFRLgWawmSdq6xwUglJQKAElo5B3eqKnqdKCIu+2NvBxWCXimxC5XtYnFwleGF7gVltx8feEWffr60WDYnDRji3PTKnFIAwJlFC7ZqjbqIS2l906lSQtMaKFUwHMTKOzDmzWYZpzTi64LKtzLzcXXb9trWmFjXnkK+nfXekppqVEnodAnr2LA9LIygqm9UkJr6JIIREhGkV0LInGuHUzM52UGFffwAZ7wcSUxNYn9TYzkpORLBI0A6KGO9Mm5N3q7JbXvuV1fVif21hybqx4qiOCKABwbxeQfGRXH6/JYYAjjp8MOnQsMdCXcfpv8ReDaMlkQS8YHUtKSCBHRYaHfXOJcSc3t6gQ2AE8KLq7tepxT5sXXVYgNuJCVyvHgBGtEpUI7xKoMbTxyc9aWdpNJgD4AJ+FnLmcjI/J3bghj8naG5LxeURNdnaRCxvf9L7kg50nz5wODAkKCgk8d+F8UWVlbWsrs/ThhBHZcOKrOvkyqgZYRXchkG93uhHMgi+g6km7bVD8dlJvxdAS1v2k60y5ZPjntYXt1QXPlJHHLqstLpzSI+9fL/62tcrhsOmshzW9ULWwp5rXzm54VMqu7R6G/vPvf3idRCWVpmusBVwWdMllHVWB3d2P+oUNiKLj1+2VD9trHzeX38zblgh0e2X2jQvbmiferXoJjcRpVL5/veDFxt4vOSVKObu7B7FaZBjeKR+p4tTdKrg7LBX/659/N6hVTCpN/KgSYBXlv9DIJSJuSyMrLT28sYZJmHXlrHwGLbWMdQ/Tj33cXFKJWkzKvrdLMwP8egRqf7vgAJ+WOQwKBFHF0hkx2YyU3Nvpt3NjE2Mjo7599KiM38w2DvcLMqnjzXVAZkZyfzc/MzU2OPD40QOfsUuYvcLWvX/54xGffZ8AgKiT99pDNOQkgLWFc9MTDYz4rvI7s7iOk5Mw0lY3Y0FrH96reZDPbSh/9riK11glHQRxFF6eJd7OOyBOBQy2AsN9HZhhNC3lmt+h3aSwgB5ebZ+QB/yfhqrSzUW3Ta9ympDN5VnruNJhVK+4bYR+1DOFbiw4Pm6ufHjzas2NLtl1i3bES4y5sJE38xYbZuA11YwrxQCn+oEeljlwtVolUsq7DagUUQ9TUqJCgo9lZ1FgJfTLay+mVf40/9JmQtqe1ungEbNG5jAhJvUIJBKyy1mrc7ZZXOnG5W5c7sLldhTa9OLSfjDYb1/ZPQZw7dIZ4bMmdEIaw4iJyomLyYmLziaRGeQYBjkpL5HMIIFQk0HWt+q2IkPP6dR4xXNQKvxxWNgy0MFtrClNjSe5iQmnSTFPjM0TmnlC4zRJ1j0mHSyNCgvmNdYCV0ODEJmEL+Ds2X/iyLGwo8fDfP2+Oe4fHhAUeSo44phfcHR2zMqM5Zf1BXYhMz2JbNKqjMoBMyyZHBuGpdCDAqYdM+CafgzumVT3YnCPSdnhxuH1RZcDG19xWwGdcmh9wdXCZfscDvHzjzzh/93JU6TAkLjAc3FnQ1NPnrocfjN6wY65MF39w++p8dEgr6mbWy9qfdzHa+JxamjUBJfF6MY1c1PI3JR6bko9Y4aXZyZniAluQ0VPezOQdT1pdKi/vKHg07/u2Hl09y7fL/b47Nqzf+eXB3ft2//nP+0GYrMjXs1M2dAxblVJOeuu2aAxKcVmWIIqJeIBUQYl1kOYPRb1DCZ3mpVOs8KOShZsCKZVZaXFFdzOBkLPBfSDAgJVMYuz0nKpGbkUOp1KpyXRM5MYtET6DbK4s3HV41gkzCVZ1ynxkSNgG8R/OtDRLOls6XjKTiRHdLY06aQCOyq26iFC3z+pETpNUvwFcpd+vfVxNVDHysM1chdu8BiRJXxiyY47hvvMUKdNDjlHJRseh0LSnZtHcRiRquy0dEoMLB1AxKBB1qeTijTKoYToqxVF+XZ0hND329BBGyqx6rot2r5XMzYrjsm1OkAt6nySTmlJo2rLiwcf1657HR25N312fN5FTXpGJRPjSpNWXpyX/hLTjbQ0BB/6khR+MT3m2+zkaCr5WtTVC5GnTkyPj1q0kG6oTS/j62V87RDXCPcuEmYyqwpIuQ+cPXE07Uo4KSyiKTNVwm2woYjsST2dcac+ny7lVCJSyKgeceMoplVhYyNwZ6tM+AzXKKyoemzoOe+He6OCljWvA1WJYUgAQwK1uEsFtSMyaBY3nCElAiev/C/XY4cPnA0JOBscIO0HQf7TutrSYbA1qyCPy+M21ty/EPJVU10l6Vpo1vUkWCyqp8aWBPuXXjlfH/uttpe/vuiSivgJUWGp8RE3kqMyKOTUhMiHBfQpdCyXRtn5ye8/CPI/7ufr43Ngz7PHNdUlRXn0G7087kVSTGFxYUlBzuGDu2vLWKFnv8qhUdnlxaF7PqX5nmZ+HVpyPkAp4q/NO/icymMHd/r77vU7vPvEkb0+X/zh8tf+SghUPBdkUUj/BZfUXAesqYRvAAAAAElFTkSuQmCCa:["$","$Lf",null,{"src":"./how-to-typescript-can-power-design-systems/components.jpg","alt":"","placeholder":"blur","blurDataURL":"$12","unoptimized":true,"width":2250,"height":1500}] diff --git a/index.html b/index.html index 8fe13a5..c81c8c5 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -All Posts — Hewon Jeong
    Hewon Jeong

    개발자를 위한 ChatGPT 프롬프트 엔지니어링

    ChatGPT Prompt Engineering for Developers 강의 노트

    비용 효율적인 테스트 디자인하기

    테스트의 진정한 목표는 코드 작성 비용을 줄이는 것이다. 왜, 무엇을, 언제, 그리고 어떻게 테스트 해야할까?

    쉽게 풀이한 단순함 (Simple Made Easy)

    좋은 시스템은 단순하다. ‘단순하다’라는 것은 무엇일까?

    직교성 (Orthogonality)

    하나가 바뀌어도 나머지에 어떤 영향도 주지 않으면 서로 직교한다고 할 수 있다.

    [번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?

    React Hook에 대해 이해하려면 JavaScript 클로저에 대해 잘 알아야합니다. React의 작은 복제본을 만들어보며 클로저와 hook의 동작 방식을 알아봅니다.

    TypeScript로 디자인 시스템에 날개 달기

    디자인 시스템에 TypeScript를 적용하여 인터페이스 지향 개발, 정적 코드 분석을 통한 문서 자동화 등의 이점을 얻어보자

    역할, 책임, 협력

    객체지향의 세계에서 기능은 객체들 간의 상호 작용들 통해 구현된다. 그리고 그 상호작용은 객체 사이에 주고 받는 메시지로 표현된다.

    JavaScript의 실행 컨텍스트 (Execution Context)

    실행 컨텍스트(Execution Context)란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

    React In Depth: 프로그래밍 모델과 원리

    React는 어떻게 동작할까? 왜 그렇게 동작할까? 얼핏 들었던 내부 개념들에 대한 정리

    React 렌더 성능 최적화하기 (slow render vs. re-render)

    느린 렌더링을 먼저 수정하고, 여전히 필요하다면 불필요한 re-render를 처리

    객체 지향 설계란 무엇인가

    객체지향의 세계에서 기능은 객체들 간의 상호 작용들 통해 구현된다. 그리고 그 상호작용은 객체 사이에 주고 받는 메시지로 표현된다.

    \ No newline at end of file +All Posts — Hewon Jeong
    Hewon Jeong

    개발자를 위한 ChatGPT 프롬프트 엔지니어링

    ChatGPT Prompt Engineering for Developers 강의 노트

    비용 효율적인 테스트 디자인하기

    테스트의 진정한 목표는 코드 작성 비용을 줄이는 것이다. 왜, 무엇을, 언제, 그리고 어떻게 테스트 해야할까?

    쉽게 풀이한 단순함 (Simple Made Easy)

    좋은 시스템은 단순하다. ‘단순하다’라는 것은 무엇일까?

    직교성 (Orthogonality)

    하나가 바뀌어도 나머지에 어떤 영향도 주지 않으면 서로 직교한다고 할 수 있다.

    [번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?

    React Hook에 대해 이해하려면 JavaScript 클로저에 대해 잘 알아야합니다. React의 작은 복제본을 만들어보며 클로저와 hook의 동작 방식을 알아봅니다.

    TypeScript로 디자인 시스템에 날개 달기

    디자인 시스템에 TypeScript를 적용하여 인터페이스 지향 개발, 정적 코드 분석을 통한 문서 자동화 등의 이점을 얻어보자

    역할, 책임, 협력

    객체지향의 세계에서 기능은 객체들 간의 상호 작용들 통해 구현된다. 그리고 그 상호작용은 객체 사이에 주고 받는 메시지로 표현된다.

    JavaScript의 실행 컨텍스트 (Execution Context)

    실행 컨텍스트(Execution Context)란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

    React In Depth: 프로그래밍 모델과 원리

    React는 어떻게 동작할까? 왜 그렇게 동작할까? 얼핏 들었던 내부 개념들에 대한 정리

    React 렌더 성능 최적화하기 (slow render vs. re-render)

    느린 렌더링을 먼저 수정하고, 여전히 필요하다면 불필요한 re-render를 처리

    객체 지향 설계란 무엇인가

    객체지향의 세계에서 기능은 객체들 간의 상호 작용들 통해 구현된다. 그리고 그 상호작용은 객체 사이에 주고 받는 메시지로 표현된다.

    \ No newline at end of file diff --git a/index.txt b/index.txt index 35fa962..74aaf47 100644 --- a/index.txt +++ b/index.txt @@ -1,7 +1,7 @@ -3:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +3:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:I[5613,[],""] 5:I[1778,[],""] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L3",null,{}]}],["$","main",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L6"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L3",null,{}]}],["$","main",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L6"]]]] 6:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"All Posts — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"A personal blog by Hewon Jeong"}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null 7:I[6906,["901","static/chunks/901-e0fa2c46d9ea48b7.js","931","static/chunks/app/page-ded41cdfd0f913ee.js"],""] diff --git a/optimizing-performance-of-react-slow-render-vs-re-render.html b/optimizing-performance-of-react-slow-render-vs-re-render.html index 28f057b..0099ca3 100644 --- a/optimizing-performance-of-react-slow-render-vs-re-render.html +++ b/optimizing-performance-of-react-slow-render-vs-re-render.html @@ -1,4 +1,4 @@ -React 렌더 성능 최적화하기 (slow render vs. re-render) — Hewon Jeong
    Hewon Jeong

    React 렌더 성능 최적화하기 (slow render vs. re-render)

    Kent C. DoddsFix the slow render before you fix the re-render를 읽으면서 정리한 내용입니다.

    +React 렌더 성능 최적화하기 (slow render vs. re-render) — Hewon Jeong
    Hewon Jeong

    React 렌더 성능 최적화하기 (slow render vs. re-render)

    Kent C. DoddsFix the slow render before you fix the re-render를 읽으면서 정리한 내용입니다.

    Re-render?

    React가 처음 나왔을 때 가장 주목받은 부분은 기존 UI 라이브러리와 구분되는 “Virtual DOM”을 통한 성능 개선이었습니다.

    기존DOM을 여러번 업데이트하는 방식 (element.appendChild(childElement) 호출 등)은 여러번 업데이트 하게 되면서 성능 문제가 가중됩니다.

    @@ -54,4 +54,4 @@

    Render 개선하기

    브라우저의 profililing tools ⇒ start profiling ⇒ 인터랙션을 하고 ⇒ stop profiling (예제 보기)

    어느 부분 (또는 의존성)이 가장 오래 걸리는 지 파악하고, 문제를 해결 한 후 프로파일러로 개선 되었는지 관찰하세요. 그리고 React DevTools profiler도 굉장히 훌륭하니 참고하세요!

    결론

    -

    렌더링이 반드시 필요한지 여부는 중요하지 않습니다. 렌더링이 느리면 결국 사용자에게 나쁜 경험을 제공합니다. 깜빡일 때마다 스스로 얼굴을 때리지 마세요. 느린 렌더링을 먼저 수정하세요. 그런 다음 (여전히 필요하다면) “불필요한 re-render”을 처리하세요.


    \ No newline at end of file +

    렌더링이 반드시 필요한지 여부는 중요하지 않습니다. 렌더링이 느리면 결국 사용자에게 나쁜 경험을 제공합니다. 깜빡일 때마다 스스로 얼굴을 때리지 마세요. 느린 렌더링을 먼저 수정하세요. 그런 다음 (여전히 필요하다면) “불필요한 re-render”을 처리하세요.


    \ No newline at end of file diff --git a/optimizing-performance-of-react-slow-render-vs-re-render.txt b/optimizing-performance-of-react-slow-render-vs-re-render.txt index 4b033c0..4f15bce 100644 --- a/optimizing-performance-of-react-slow-render-vs-re-render.txt +++ b/optimizing-performance-of-react-slow-render-vs-re-render.txt @@ -1,8 +1,8 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","optimizing-performance-of-react-slow-render-vs-re-render","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","optimizing-performance-of-react-slow-render-vs-re-render","d"],{"children":["__PAGE__?{\"slug\":\"optimizing-performance-of-react-slow-render-vs-re-render\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","optimizing-performance-of-react-slow-render-vs-re-render","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","optimizing-performance-of-react-slow-render-vs-re-render","d"],{"children":["__PAGE__?{\"slug\":\"optimizing-performance-of-react-slow-render-vs-re-render\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","optimizing-performance-of-react-slow-render-vs-re-render","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"React 렌더 성능 최적화하기 (slow render vs. re-render)"}],["$","time",null,{"dateTime":"2019-09-13","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"September 13, 2019"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"React 렌더 성능 최적화하기 (slow render vs. re-render) — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"느린 렌더링을 먼저 수정하고, 여전히 필요하다면 불필요한 re-render를 처리"}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null diff --git a/orthogonality.html b/orthogonality.html index 4ac2038..624cee3 100644 --- a/orthogonality.html +++ b/orthogonality.html @@ -1,4 +1,4 @@ -직교성 (Orthogonality) — Hewon Jeong
    Hewon Jeong

    직교성 (Orthogonality)

    《실용주의 프로그래머》 2장 ‘실용주의 접근법’의 ‘직교성’ 파트를 읽고 정리한 내용입니다.

    +직교성 (Orthogonality) — Hewon Jeong
    Hewon Jeong

    직교성 (Orthogonality)

    《실용주의 프로그래머》 2장 ‘실용주의 접근법’의 ‘직교성’ 파트를 읽고 정리한 내용입니다.

    왜 직교성에 대해 알아야 할까?

    직교성의 개념은 우리가 배우는 여러 다른 방법론과 기법에 잠재되어 있다. 직교성의 원칙을 적용하는 걸 직접 배우게 되면 우리가 만드는 시스템의 질을 즉각 개선할 수 있다.

    직교성(Orthogonality)이란?

    @@ -37,4 +37,4 @@

    Coding

    직교적으로 살아가기

    직교성은 DRY 원리와도 밀접한 관계가 있다. DRY 원리는 시스템 내부의 중복을 최소화시키고, 직교성은 시스템 컴포넌트 간의 상호의존도를 줄인다. DRY 원리로 무장하고 직교성 원리를 충실히 사용한다면 개발하고 있는 시스템이 더 유연하고, 이해하기 쉽고 또한 디버그, 테스트, 유지도 쉬워질 것이다.

    -

    만약 무언가 하나를 변경하기 위해 많은 일을 하는 혹은 하나를 변경할 때마다 다른 네 개의 무언가가 이상해진다면 그 프로젝트는 아마도 직교적으로 설계되거나 코딩되지 않았을 것이다. (리팩터링을 할 시간이다.)


    \ No newline at end of file +

    만약 무언가 하나를 변경하기 위해 많은 일을 하는 혹은 하나를 변경할 때마다 다른 네 개의 무언가가 이상해진다면 그 프로젝트는 아마도 직교적으로 설계되거나 코딩되지 않았을 것이다. (리팩터링을 할 시간이다.)


    \ No newline at end of file diff --git a/orthogonality.txt b/orthogonality.txt index 9d20014..8b36df5 100644 --- a/orthogonality.txt +++ b/orthogonality.txt @@ -1,13 +1,13 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","orthogonality","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","orthogonality","d"],{"children":["__PAGE__?{\"slug\":\"orthogonality\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","orthogonality","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","orthogonality","d"],{"children":["__PAGE__?{\"slug\":\"orthogonality\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","orthogonality","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"직교성 (Orthogonality)"}],["$","time",null,{"dateTime":"2021-12-20","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"December 20, 2021"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] -7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"직교성 (Orthogonality) — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"하나가 바뀌어도 나머지에 어떤 영향도 주지 않으면 서로 직교한다고 할 수 있다."}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] -1:null 9:I[6906,["901","static/chunks/901-e0fa2c46d9ea48b7.js","749","static/chunks/749-fb88c0d37357d13f.js","42","static/chunks/app/%5Bslug%5D/page-571622d6f0bd4ea4.js"],""] 8:[["$","p",null,{"children":[["$","$L9",null,{"href":"http://book.naver.com/bookdb/book_detail.naver?bid=7467119","children":"《실용주의 프로그래머》"}]," 2장 ‘실용주의 접근법’의 ‘직교성’ 파트를 읽고 정리한 내용입니다."]}],"\n",["$","h3",null,{"children":"왜 직교성에 대해 알아야 할까?"}],"\n",["$","p",null,{"children":"직교성의 개념은 우리가 배우는 여러 다른 방법론과 기법에 잠재되어 있다. 직교성의 원칙을 적용하는 걸 직접 배우게 되면 우리가 만드는 시스템의 질을 즉각 개선할 수 있다."}],"\n",["$","h2",null,{"children":"직교성(Orthogonality)이란?"}],"\n",["$","p",null,{"children":"$La"}],"\n",["$","p",null,{"children":"‘직교성’은 기하학에서 빌려온 용어이다. 위 그래프의 축과 같이 두 직선이 직각으로 만나는 경우 직교한다고 말한다. 벡터의 입장에서 보면, 두 개의 선은 ‘독립적’이다. x축 방향으로 움직여도, y축에서의 위치는 변하지 않는다."}],"\n",["$","p",null,{"children":"컴퓨팅에서는 일종의 독립성(independence)이나, 결합도 줄이기(decoupling)를 의미한다. 하나가 바뀌어도 나머지에 어떤 영향도 주지 않으면 서로 직교한다고 할 수 있다. (e.g. 데이터베이스 코드와 UI 코드)"}],"\n",["$","h2",null,{"children":"직교성의 장점"}],"\n",["$","p",null,{"children":"비직교적인 시스템은 본질적으로 변화와 조정하기가 복잡하다. 시스템의 컴포넌트들이 고도로 상호의존적인 경우, 특정 부분만 수정하는 방법이 없다."}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":"관련 없는 것들 간에 서로 영향이 없도록 하라."}],"\n"]}],"\n",["$","p",null,{"children":"우리는 자족적(self-contained)인 컴포넌트를 설계하기 원한다. 독립적이며, 단일하고 잘 정의된 목적을 가진 컴포넌트. 컴포넌트들이 각기 격리(isolated)되어 있으면 어느 하나를 바꿀 때 나머지 것들을 걱정하지 않아도 된다. 외부 인터페이스를 바꾸지 않는 한, 전체 시스템으로 퍼져 문제를 일으키지는 않으리라고 안심할 수 있다."}],"\n",["$","h3",null,{"children":"생산성 향상"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"변화가 국소화되서 개발 시간과 테스트 시간이 줄어든다. 상대적으로 작고, 자족적인 컴포넌트를 작성하는 것이 하나의 커다란 코드 덩어리를 만드는 것보다 더 쉽다. 새로운 코드를 추가할 때마다 기존의 코드를 계속 바꾸어야할 필요가 없다."}],"\n",["$","li",null,{"children":"직교적인 접근법은 재사용을 촉진한다. 컴포넌트들에 명확하고 잘 정의된 책임이 할당되어 있다면 초기엔 생각하지 못했던 방식으로 새롭게 결합할 수도 있다. 느슨하게 결합(coupling)되어 있을수록 재설정(reconfigure)하고 리엔지니어링하기 쉽다."}],"\n"]}],"\n",["$","h3",null,{"children":"리스크 감소"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"감염된 코드가 격리된다. 어떤 모듈의 문제가 시스템의 나머지 부분으로 전파될 확률이 낮다. 게다가 새롭고 건강한 것으로 이식하기도 쉽다."}],"\n",["$","li",null,{"children":"시스템이 잘 깨어지지 않는다. 어떤 부분을 골라 약간만 바꾸고 수리해도 거기서 생기는 문제점들은 그 부분에만 한정될 것이다."}],"\n",["$","li",null,{"children":"해당 컴포넌트들에 대해 테스트를 설계하고 실행하기 훨씬 쉽다. → 더 많은 테스트를 하게 된다."}],"\n",["$","li",null,{"children":"써드파티에 연결되는 인터페이스들이 전체 개발의 작은 부분에 한정된다. → 특정 벤더, 플랫폼에 덜 종속된다."}],"\n"]}],"\n",["$","h2",null,{"children":"설계 (Design)"}],"\n",["$","p",null,{"children":"시스템은 협력하는 모듈들의 집합으로 구성되어야 하고, 각 모듈은 다른 부분과 독립적인 기능으로 구현해야 한다. 때로는 이런 컴포넌트들이 레이어로 조직되기도 하는데, 각 레이어는 하나의 추상화 층을 이루게 된다."}],"\n",["$","p",null,{"children":"각 레이어는 자기 밑에 있는 레이어들이 제공하는 추상화만을 사용하기 때문에, 코드에 영향을 끼치지 않으면서 아래에 있는 다른 구현들을 바꾸는 높은 유연성을 얻을 수 있다. (아래 도식처럼 전형적인 레이어의 예를 참고)"}],"\n",["$","p",null,{"children":"$Lb"}],"\n",["$","p",null,{"children":"직교적인 설계를 테스트하는 손쉬운 방법은 ‘특정 기능에 대한 요구사항을 극적으로 변경 했을 경우, 몇 개의 모듈이 영향을 받는가?’ 질문해보는 것이다. 직교적인 시스템에서는 답이 ‘하나’여야 한다. GUI 버튼을 옮기는 것 때문에 데이터베이스의 스키마, 빌링 서브 시스템을 바꾸어선 안된다."}],"\n",["$","p",null,{"children":"또한 현실 세계의 변화와 설계 사이의 결합도를 얼마나 줄였는지에 대해서도 스스로 물을 수 있다. 전화번호를 사용자 ID로 사용하는가? 전화 회사가 지역번호를 재할당한다면 어떻게 할 것인가? 자신의 힘으로 제어할 수 없는 속성에 의존하지 마라."}],"\n",["$","h2",null,{"children":"Coding"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"코드의 결합도를 줄여라."}]," 부끄럼타는 코드(shy code)를 작성하라. 즉 불필요한 어떤 것도 다른 모듈에 보여주지 말고, 다른 모듈의 구현에 의존하지 않는 코드를 작성하라"]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"전역(global) 데이터를 피하라."}]," 코드가 전역 데이터를 참조할 때마다, 코드는 해당 데이터를 공유하는 다른 컴포넌트와 묶이게 된다. 모듈이 필요로하는 컨텍스트를 명시적으로 넘겨주면 코드를 이해하고 유지보수하기 쉽게 된다."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"유사한 함수를 피하라."}]," 중복 코드는 구조적 문제의 징후다. ",["$","$L9",null,{"href":"https://en.wikipedia.org/wiki/Strategy_pattern","children":"Strategy pattern"}],"을 사용하여 더 나은 구현을 할 수 없는지 고려하라."]}],"\n"]}],"\n",["$","h2",null,{"children":"직교적으로 살아가기"}],"\n",["$","p",null,{"children":["직교성은 ",["$","$L9",null,{"href":"https://en.wikipedia.org/wiki/Don%27t_repeat_yourself","children":"DRY 원리"}],"와도 밀접한 관계가 있다. DRY 원리는 시스템 내부의 중복을 최소화시키고, 직교성은 시스템 컴포넌트 간의 상호의존도를 줄인다. DRY 원리로 무장하고 직교성 원리를 충실히 사용한다면 개발하고 있는 시스템이 더 유연하고, 이해하기 쉽고 또한 디버그, 테스트, 유지도 쉬워질 것이다."]}],"\n",["$","p",null,{"children":"만약 무언가 하나를 변경하기 위해 많은 일을 하는 혹은 하나를 변경할 때마다 다른 네 개의 무언가가 이상해진다면 그 프로젝트는 아마도 직교적으로 설계되거나 코딩되지 않았을 것이다. (리팩터링을 할 시간이다.)"}]] +7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"직교성 (Orthogonality) — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"하나가 바뀌어도 나머지에 어떤 영향도 주지 않으면 서로 직교한다고 할 수 있다."}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] +1:null c:I[1749,["901","static/chunks/901-e0fa2c46d9ea48b7.js","749","static/chunks/749-fb88c0d37357d13f.js","42","static/chunks/app/%5Bslug%5D/page-571622d6f0bd4ea4.js"],"Image"] d:T4fa,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAVCAYAAAAnzezqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADW0lEQVR4nK2WX0TzURjHz8UudhfdpJuJXWRMRCYyJiYSid1ETEQiXUW6jxERGRExuxgTESMiXUQixhgjRkSMiBExnnwenjn93t/ed/Eevn7nPOec5zz/zvf8XKvVkuXlZaF9fn7K19fX0Oj1enJ5eSnn5+dyfX0tlUpFLi4upFQqydvbm9zc3PSB/O7uTnZ2dmR3d1fXHB4eikPgnJPX19dfG4EBGxsbkslkZHp6Wh3J5XKysLAgT09PsrS0JMlkUiYnJ1U+OzurSKVSumdvb0/cwcGBGlCv14cygHlAw8uPjw95f3/XPmCOcbfbVS87nY46x/f5+VmI+MvLi45Z7xDMzMwM7T2NL8oeHx81vHhLNGq1muzv76seDm2327rm4eFBjaKxzodrNpsyNTX1TwNYjFcczIF8ka2vr8vc3JxUq1U5OTnREDcaDZmfn9fwE270kwIaOiyK4IcBTA46HA/wBq8sBcgJJ+ljnmjSJy3mOcbSZy5MtxsmAjQUW6EGjQP+2Pb4zV/zw4BGoyGJROIPA4gGnhgomtvbW/WI4rF5PPejhMwvVh+hBrRardAUoDDoAY2iI9e+jOjgiLXfcImDILiG5NK/YtlsVuWRSEQRjUYVo6OjOh4ZGdH++Pi4rjNsbm7+3oCxsTG9Pqenp33Ptra2tIohGL6AVEEq8XhcJiYmJBaLad83IJ/Ph4Z/UBqczwNQpS0KpuBvjRSgJ5gy0+H3Q4swmUzqJGmwXAaL0ODfY/oczj5jRfbD8caMGOazYPCqO66hGYAABVw3LA4LGTKjU9Zsb2/3uR4yWl1dVZ6nhogs7wJvAimDsDDKv5LON8AOhDjwxpcZE0IuGIgR7MWz+/t7jQSemhxavrq60mtbLBb1oWJv0CkXxoR2EAqtcceRMWd5RZlxgaWH5xkHTB9rLD2hNdAMMcC8xXo8AihF5qeGMdcunU7L4uKijgk9/wa8hMh5E/CeNBGRIOE53wB7Rg0sJNfGEVaY/hpCXS6XFXjKmDUYz1NP+AHkFfbkO4RGxWEc/j9b2Hvg8A4CoVoJHyED9A3MAcJsfRv7INRU/MrKiqytrSlzopv+oFvlmOCR4b+OvPEFZ2dnCtjRYOE8Pj7u4+joSMHdNxQKBQ05NYAByAa9ht+xN7971ycIegAAAABJRU5ErkJggg==a:["$","$Lc",null,{"src":"./orthogonality/orthogonality.png","alt":"","placeholder":"blur","blurDataURL":"$d","unoptimized":true,"width":250,"height":167}] e:T55a,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAVCAYAAAAnzezqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADo0lEQVR4nJXWP0TvXRgA8O/Q0hANiaQpiUhES0SiKRERERGRiIhoSERENKQhIpoiGiIaIiKiISIaIhoioiEiGs71Oe7zu997327d9/A45zzPc57z/D+nKIoiVVVVJfNXUFNTk2pra1NdXV2qr6+vzA0NDb/hAF4yq6urK3OcNwO4pqamVIyNjSXj/f09fTVeX1/T9fV1en5+znB/f59ubm7S3d1denx8TBcXF+np6Sm9vLykj4+PL2XFXVNTU6kYHx//JwUI397ezofm5ubS8fFxmpiYSMPDw2lpaSmNjIyk0dHRtLGx8a2sUHB2djYVXV1dWfuDg4MMh4eHFYj90dFROjs7y5eenJxksI59GY/vb7xl/svLyzQwMJCKxsbGtLm5ma0wl2Frayutr6+ntbW11NLSkmZmZtLq6mpaXl7OePTghUPj0dbW1kyH45GA4CUPb3t7+68cwDw9PZ2FEsLNmLjdQBNvgwWDg4P5EoIXFxcrNNZT1CB7YWEhX4pnZWUly+TVkFmIm8HdNNvd3c1MDrlgf3+/wizpjNvb24rVFNjZ2UkPDw+Zdnp6WlGALHRyQ5713t5epk9OTv7ygIGZlphd6IIYEiaspIg9LzBgfn4+K2Wcn5/nfQx43hRv3pCAkYS5CgiBYIFkAxKFR7hauclq2U7429tbVgAftwqRNRw5PKYiDDKdJ8vl+JQswMv4QlOgiY0ZcA2wVmrWqgWPPTw38wLrrINvaGgodXZ2Zg/KpZCL11zGaVrfNqKILctjrRHZR3/QfEIGvFnjQvu2EY3+TEIHy/GJhtHf35/6+vqyBzo6OrKlZjhuFe+enp5seXd3d461tXP2LvsTKGeQ9W0nZMXV1VWOZSgVc0BZeBn/t5b8v1rxx08hSofGEXOzJOQFYB3AK+iBDx54uRHt3ANWyYFyCMoQsXa5bFZWyjHehahzF5VneJc4Zw+cUS08Kp9UYIHhXzxAWPQBgyIaVnjCBSyEU75eTv2EkuEBDes/IWhubs6HCPEeaD7AGsDrYG1tbbnM8MKbWYkWED0fTUODo0R4CS5k27u76O3tzS7RfLTRgHjJgAaif8PHqyYc8NbxYsbrCRdnyq9qee/NUCWVJPwsYwPHnTqhktVQuFOZmbmRZWjCiY4W78ZnciMEvz1G3/1iJA1PRYPRTuFYYu1CNE1KrkTyfjZCgdwH/MviT1f+1/0J/n54/R9ArM1xFg+Aj79h/AXjPwnib+i/+QP6cqIzjWxXAAAAAABJRU5ErkJggg==b:["$","$Lc",null,{"src":"./orthogonality/typical-layer.png","alt":"","placeholder":"blur","blurDataURL":"$e","unoptimized":true,"width":317,"height":204}] diff --git a/prompt-engineering.html b/prompt-engineering.html index 65cd4e5..99ad354 100644 --- a/prompt-engineering.html +++ b/prompt-engineering.html @@ -1,4 +1,4 @@ -개발자를 위한 ChatGPT 프롬프트 엔지니어링 — Hewon Jeong
    Hewon Jeong

    개발자를 위한 ChatGPT 프롬프트 엔지니어링

    ChatGPT Prompt Engineering for Developers 강의를 들으면서 정리한 내용입니다. 강의에서는 Python을 사용하는데 저는 익숙한 TypeScript, Node.js로 예제 코드를 따라하면서 들었습니다. 제가 작성한 전체 예제 코드는 이 GitHub repo에서 보실 수 있습니다.

    +개발자를 위한 ChatGPT 프롬프트 엔지니어링 — Hewon Jeong
    Hewon Jeong

    개발자를 위한 ChatGPT 프롬프트 엔지니어링

    ChatGPT Prompt Engineering for Developers 강의를 들으면서 정리한 내용입니다. 강의에서는 Python을 사용하는데 저는 익숙한 TypeScript, Node.js로 예제 코드를 따라하면서 들었습니다. 제가 작성한 전체 예제 코드는 이 GitHub repo에서 보실 수 있습니다.

    ✌️ 두가지 유형의 LLM

    1. 기본 LLM (Base LLMs) @@ -280,4 +280,4 @@

      📙 참조

    2. ChatGPT Prompt Engineering for Developers
    3. hewonjeong/prompt-engineering
    4. openai/openai-node
    5. -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/prompt-engineering.txt b/prompt-engineering.txt index 8b5edc4..b1c5cea 100644 --- a/prompt-engineering.txt +++ b/prompt-engineering.txt @@ -1,8 +1,8 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","prompt-engineering","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","prompt-engineering","d"],{"children":["__PAGE__?{\"slug\":\"prompt-engineering\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","prompt-engineering","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","prompt-engineering","d"],{"children":["__PAGE__?{\"slug\":\"prompt-engineering\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","prompt-engineering","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"개발자를 위한 ChatGPT 프롬프트 엔지니어링"}],["$","time",null,{"dateTime":"2023-06-29","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"June 29, 2023"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"개발자를 위한 ChatGPT 프롬프트 엔지니어링 — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"ChatGPT Prompt Engineering for Developers 강의 노트"}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null diff --git a/react-runtime-system.html b/react-runtime-system.html index 2fa017b..4156e8a 100644 --- a/react-runtime-system.html +++ b/react-runtime-system.html @@ -1,4 +1,4 @@ -React In Depth: 프로그래밍 모델과 원리 — Hewon Jeong
    Hewon Jeong

    React In Depth: 프로그래밍 모델과 원리

    단방향 데이터 흐름, 상위 컴포넌트의 상태 변경에 따른 리렌더링, immutable한 state 관리 등 React를 사용하여 개발 하다보면 다른 UI 프로그래밍 모델에서는 낯선 개념들을 마주할 때가 있습니다. Dan Abramov가 이러한 개념들에 대해 명쾌하게 설명한 글 React as a UI Runtime 을 읽으며 간략하게 정리한 내용입니다. 원글의 양이 길어 hooks 등의 개념은 따로 정리할 예정입니다.

    +React In Depth: 프로그래밍 모델과 원리 — Hewon Jeong
    Hewon Jeong

    React In Depth: 프로그래밍 모델과 원리

    단방향 데이터 흐름, 상위 컴포넌트의 상태 변경에 따른 리렌더링, immutable한 state 관리 등 React를 사용하여 개발 하다보면 다른 UI 프로그래밍 모델에서는 낯선 개념들을 마주할 때가 있습니다. Dan Abramov가 이러한 개념들에 대해 명쾌하게 설명한 글 React as a UI Runtime 을 읽으며 간략하게 정리한 내용입니다. 원글의 양이 길어 hooks 등의 개념은 따로 정리할 예정입니다.

    Host Tree

    React는 일반적으로 동적으로 변화할 수 있는 트리를 출력하는 프로그램이다. (DOM 트리, PDF 요소들의 트리, JSON 객체 등) 이것을 ‘호스트 트리’ 라고 한다. (DOM이나 iOS와 같이 외부 호스트 환경의 일부이기 때문)

    React는 외부 상호작용, 네트워크 응답, 타이머 등 외부 이벤트에 대한 응답으로 복잡한 호스트 트리를 예측할 수 있게 조작하는 프로그램을 작성하는데 유용하다.

    @@ -204,4 +204,4 @@

    Call Tree (호출 트리)

    React는 내부적으로 현재 렌더되어 있는 컴포넌트를 기억하기 위해 자체적인 호출 스택이 있다. (e.g. 가령 [App, Page, Layout, Article /** 현재 렌더링 하는 부분 **/])

    이 트리들은 상호작용하기 위해서 계속 살아 있어야 한다. 즉 Article 컴포넌트의 렌더가 끝나도 React 호출 트리는 파괴되지 않는다. local state와 호스트 인스턴스의 참조를 어딘가에 유지해야 한다.

    호출 트리 프레임은 재조정 규칙에 따라 지역 상태, 호스트 인스턴스와 함께 파괴됩니다. React 소스를 읽어봤다면 이러한 프레임을 파이버라고 부르는 것을 볼 수 있다.

    -

    파이버는 지역 상태가 실제로 있는 곳이다. 지역 상태가 업데이트될 때 React는 해당 파이버의 자식들을 재조정하고 해당 컴포넌트들을 호출한다.


    \ No newline at end of file +

    파이버는 지역 상태가 실제로 있는 곳이다. 지역 상태가 업데이트될 때 React는 해당 파이버의 자식들을 재조정하고 해당 컴포넌트들을 호출한다.


    \ No newline at end of file diff --git a/react-runtime-system.txt b/react-runtime-system.txt index 2996e6b..94c1073 100644 --- a/react-runtime-system.txt +++ b/react-runtime-system.txt @@ -1,8 +1,8 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","react-runtime-system","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","react-runtime-system","d"],{"children":["__PAGE__?{\"slug\":\"react-runtime-system\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","react-runtime-system","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","react-runtime-system","d"],{"children":["__PAGE__?{\"slug\":\"react-runtime-system\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","react-runtime-system","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"React In Depth: 프로그래밍 모델과 원리"}],["$","time",null,{"dateTime":"2019-09-28","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"September 28, 2019"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"React In Depth: 프로그래밍 모델과 원리 — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"React는 어떻게 동작할까? 왜 그렇게 동작할까? 얼핏 들었던 내부 개념들에 대한 정리"}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null diff --git a/role-responsibility-and-collaboration.html b/role-responsibility-and-collaboration.html index 3c430fb..5d752fb 100644 --- a/role-responsibility-and-collaboration.html +++ b/role-responsibility-and-collaboration.html @@ -1,4 +1,4 @@ -역할, 책임, 협력 — Hewon Jeong
    Hewon Jeong

    역할, 책임, 협력

    《오브젝트: 코드로 이해하는 객체지향 설계》의 ‘역할, 책임, 협력’ 파트를 읽고 정리한 내용입니다.

    +역할, 책임, 협력 — Hewon Jeong
    Hewon Jeong

    역할, 책임, 협력

    《오브젝트: 코드로 이해하는 객체지향 설계》의 ‘역할, 책임, 협력’ 파트를 읽고 정리한 내용입니다.

    객체 지향 프로그래밍을 이해하기 위해 가장 중요한 것은 무엇일까? 클래스, 상속, 지연 바인딩 등 일까? 이러한 것들은 다분히 구현 측면에 치우쳐 있기 때문에 객체지향 패러다임의 본질과는 거리가 멀다.

    역할, 책임, 협력

    @@ -51,4 +51,4 @@

    유연하고 재사용 가능한 협력

    역할의 구현하는 가장 일반적인 방법은 추상클래스와 인터페이스를 사용하는 것이다. 추상 클래스는 책임의 일부를 구현해놓은 것이고 인터페이스는 일체의 구현 없이 책임의 집합만을 나열해 놓았다는 차이가 있다.

    객체 vs. 역할

    여러 종류의 객체에 의해 수행될 필요가 있다면 ⇒ 역할, 한 종류의 객체만이 협력에 참여할 필요가 있다면 ⇒ 객체

    -

    대부분의 경우에 어떤 것이 역할이고 어떤 것이 객체인지가 또렷하게 드러나지는 않을 것이다. 설계 초반에는 적절한 책임과 협력의 큰 그림을 탐색하는 것이 가장 중요한 목표여야 하고 역할과 객체를 명확하게 구분하는 것은 그렇게 중요하지 않다. ⇒ 객체로 시작하고 필요한 순간에 객체로부터 역할을 분리


    \ No newline at end of file +

    대부분의 경우에 어떤 것이 역할이고 어떤 것이 객체인지가 또렷하게 드러나지는 않을 것이다. 설계 초반에는 적절한 책임과 협력의 큰 그림을 탐색하는 것이 가장 중요한 목표여야 하고 역할과 객체를 명확하게 구분하는 것은 그렇게 중요하지 않다. ⇒ 객체로 시작하고 필요한 순간에 객체로부터 역할을 분리


    \ No newline at end of file diff --git a/role-responsibility-and-collaboration.txt b/role-responsibility-and-collaboration.txt index f94ab0c..d4a742d 100644 --- a/role-responsibility-and-collaboration.txt +++ b/role-responsibility-and-collaboration.txt @@ -1,8 +1,8 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","role-responsibility-and-collaboration","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","role-responsibility-and-collaboration","d"],{"children":["__PAGE__?{\"slug\":\"role-responsibility-and-collaboration\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","role-responsibility-and-collaboration","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","role-responsibility-and-collaboration","d"],{"children":["__PAGE__?{\"slug\":\"role-responsibility-and-collaboration\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","role-responsibility-and-collaboration","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"역할, 책임, 협력"}],["$","time",null,{"dateTime":"2019-10-20","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"October 20, 2019"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"역할, 책임, 협력 — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"객체지향의 세계에서 기능은 객체들 간의 상호 작용들 통해 구현된다. 그리고 그 상호작용은 객체 사이에 주고 받는 메시지로 표현된다."}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null diff --git a/simple-made-easy.html b/simple-made-easy.html index 82e2ace..e93f5a7 100644 --- a/simple-made-easy.html +++ b/simple-made-easy.html @@ -1,4 +1,4 @@ -쉽게 풀이한 단순함 (Simple Made Easy) — Hewon Jeong
    Hewon Jeong

    쉽게 풀이한 단순함 (Simple Made Easy)

    아래 두 자료를 보면서 정리한 글입니다. 먼저 번역해주신 분들 덕분에 비원어민인 저도 이 자료를 접할 수 있었습니다. 훌륭한 지식을 쉽게 접할 수 있도록 앞서 기여해주신 번역자분들에게 감사드립니다.

    +쉽게 풀이한 단순함 (Simple Made Easy) — Hewon Jeong
    Hewon Jeong

    쉽게 풀이한 단순함 (Simple Made Easy)

    아래 두 자료를 보면서 정리한 글입니다. 먼저 번역해주신 분들 덕분에 비원어민인 저도 이 자료를 접할 수 있었습니다. 훌륭한 지식을 쉽게 접할 수 있도록 앞서 기여해주신 번역자분들에게 감사드립니다.

    • 발표 영상: “Simple Made Easy” - Rich Hickey (2011)
    • 번역: 쉽게 풀이한 단순함
    • @@ -165,4 +165,4 @@

      어떻게 단순하게 만들 수 있을까?

      • 단순한 결과물을 만드는 도구를 선택하라. 복잡한 결과물을 만드는 도구를 사용하지 말라.
      • 단순함이라는 기초 위에 추상(abstraction)을 생성하려고 노력하라. 단순함은 숫자가 적다는 뜻이 아니다. 몇개 안되는 줄이 엮여있는 것보다 많은 줄이 곧게 뻗어 이어진 편이 낫다.
      • -

    \ No newline at end of file +
    \ No newline at end of file diff --git a/simple-made-easy.txt b/simple-made-easy.txt index aa7cbb7..a00b99e 100644 --- a/simple-made-easy.txt +++ b/simple-made-easy.txt @@ -1,13 +1,13 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","simple-made-easy","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","simple-made-easy","d"],{"children":["__PAGE__?{\"slug\":\"simple-made-easy\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","simple-made-easy","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","simple-made-easy","d"],{"children":["__PAGE__?{\"slug\":\"simple-made-easy\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","simple-made-easy","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"쉽게 풀이한 단순함 (Simple Made Easy)"}],["$","time",null,{"dateTime":"2023-03-01","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"March 1, 2023"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] -9:I[6906,["901","static/chunks/901-e0fa2c46d9ea48b7.js","749","static/chunks/749-fb88c0d37357d13f.js","42","static/chunks/app/%5Bslug%5D/page-571622d6f0bd4ea4.js"],""] -8:[["$","p",null,{"children":"아래 두 자료를 보면서 정리한 글입니다. 먼저 번역해주신 분들 덕분에 비원어민인 저도 이 자료를 접할 수 있었습니다. 훌륭한 지식을 쉽게 접할 수 있도록 앞서 기여해주신 번역자분들에게 감사드립니다."}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["발표 영상: ",["$","$L9",null,{"href":"https://youtube.com/watch?v=SxdOUGdseq4","children":"“Simple Made Easy” - Rich Hickey (2011)"}]]}],"\n",["$","li",null,{"children":["번역: ",["$","$L9",null,{"href":"https://muchtrans.com/translations/simple-made-easy.ko.html","children":"쉽게 풀이한 단순함"}]]}],"\n"]}],"\n",["$","p",null,{"children":"$La"}],"\n",["$","h2",null,{"children":"단순함과 쉬움의 차이"}],"\n",["$","h3",null,{"children":"단순함 (Simple)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"어원은 ‘sim’ (하나) + ‘plex’(겹치다, 엮다). 반댓말은 complex"}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"‘단순하다’라는 것은 뒤섞이거나 엮여있지 않았다는 것"}]," (두 개의 줄을 하나로 엮어 하나의 줄로 만드는 이미지를 떠올리자)"]}],"\n",["$","li",null,{"children":"임무, 역할, 일, 목표가 하나로 엮여있다. (‘하나만 존재 해야한다’ 혹은 ‘기능이 하나’라는 의미는 아님)"}],"\n",["$","li",null,{"children":"기능의 개수(cardinality)와 뒤섞임(interleaving)을 구별해야 한다."}],"\n",["$","li",null,{"children":["우리는 “이 부분이 엮여있네!” 라고 보고 판단할 수 있다. 즉 쉬움과 달리 ",["$","strong",null,{"children":"단순함은 객관적인 개념"}],"이다."]}],"\n"]}],"\n",["$","h3",null,{"children":"쉬움 (Easy)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"어원은 ‘ease’ (근처에 눕다. 가까이 있다.)"}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"손쉬움:"}]," 가까이에서 ‘쉽게’ 구할 수 있다 (설치 관리자로 하드에 저장할 수 있는 라이브러리, IDE 도구 등)"]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"친숙함:"}]," 우리가 이미 알고 있는 것, 내가 가진 역량에 가까운 것"]}],"\n",["$","li",null,{"children":["위 두 가지 개념에 심취하면 ‘설치해서 5초 안에 실행할 수 있을까?’ 만 고민하게 된다. ",["$","strong",null,{"children":"다루는 문제는 복잡한데 쉽게 가져다 쓸 수 있는지만 따지게 되는 함정에 빠진다."}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"쉬움은 상대적이다."}]," 뒤섞이거나 꼬인 부분을 봤을 때 단순함을 어겼다고 할 수 있는 것과 구분된다. (내가 독일어를 읽지 못한다고해서 독일어가 해석 불가능한 언어인 것은 아니다. 내가 독일어를 모를 뿐, 독일어는 누구에게는 쉽고 누구에게는 어려울 수 있다.)"]}],"\n"]}],"\n",["$","h2",null,{"children":"도구와 결과물"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"도구(constructs): 프로그래밍 언어, 라이브러리 등"}],"\n",["$","li",null,{"children":"결과물(artifacts): 사용자들이 사용할 소프트웨어"}],"\n",["$","li",null,{"children":"도구와 결과물을 대할 때 단순함과 쉬움을 구분해야한다."}],"\n",["$","li",null,{"children":"도구의 편의성에만 몰두하는 경향: “몇 글자만 입력했는데 잘 되네요!”, “세미콜론이 없네요!” 등"}],"\n",["$","li",null,{"children":"소프트웨어의 퀄리티, 정확성, 유지보수성, 유연함은 우리가 사용하는 도구와는 거의 관련이 없다."}],"\n",["$","li",null,{"children":["그러므로 우리는 ",["$","strong",null,{"children":"결과물을 기준으로 도구를 평가해야한다."}]," (코드의 겉모습이나 사용 경험 등이 아니라)"]}],"\n"]}],"\n",["$","h2",null,{"children":"한계"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"우리의 이해력은 제한적이고 한 번에 아주 적은 숫자만 기억할 수 있다."}],"\n",["$","li",null,{"children":"생각할 것들이 서로 뒤섞이면 각각을 떼어놓고 다루지 못하게 된다."}],"\n",["$","li",null,{"children":"처음보는 코드가 다른 어떤 부분과 연결됐다면 둘 모두를 머릿속에 넣어야 한다. → 서로 얽혀있는 것들은 부담을 가중시킨다. (즉 이러한 복잡성이 시스템을 이해하는 데 한계를 느끼게 한다.)"}],"\n",["$","li",null,{"children":["세상에서 가장 뛰어난 저글링 선수도 스무개, 백개의 공을 다룰 수 없다. ",["$","strong",null,{"children":"우리가 다루는 문제에 비해 그걸 이해하는 능력은 통계적으로 비슷하게 나쁘다."}]]}],"\n"]}],"\n",["$","h2",null,{"children":"변경"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"소프트웨어를 수정하기 위해서는 무엇을 하는 소프트웨어인지 분석하고 무엇을 해야하는지 결정해야한다."}],"\n",["$","li",null,{"children":"“이 변화는 어디까지 영향을 끼치지?”, “그러면 수정 사항을 적용할 부분은 어디지?”라고 질문을 던져야 한다."}],"\n"]}],"\n",["$","h2",null,{"children":"디버깅"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"실무에서 발생하는 모든 버그들은 이미 타입 체커와 모든 테스트를 통과했다."}],"\n",["$","li",null,{"children":"이러한 ‘가드레일’은 안전장치일 뿐 목적지로 가는 방향을 알려주지 않는다. (세상에 일부러 가드레일에 부딪히면서 운전하는 사람은 없다.)"}],"\n",["$","li",null,{"children":"결국 개발자가 프로그램을 추론할 수 있는 능력이 디버깅에 있어서 가장 중요하다."}],"\n"]}],"\n",["$","h2",null,{"children":"개발 속도"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["쉬움을 쫓다보면 초반 속도는 빨라진다. 하지만 ",["$","strong",null,{"children":"복잡성을 무시하면 장기적으로는 반드시 속도가 느려진다."}]]}],"\n",["$","li",null,{"children":["단순함을 쫓다보면 초기 속도가 나지 않을 수 있다. ",["$","strong",null,{"children":"문제를 단순한 형태로 바라보는 일에 시간을 써야한다."}]]}],"\n",["$","li",null,{"children":"두 가지를 다 잡는 일은 훌륭한 일이다. 다만 쉬움에만 집중하면 결국엔 복잡성이 발목을 잡는다."}],"\n"]}],"\n",["$","h2",null,{"children":"쉬운 것은 사실 복잡하다"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"복잡한 결과물(artifacts)을 생성하는 도구(constructs)의 특징: 간단명료하게 설명할 수 있다. 굉장히 친숙하다. 사용하기 쉽다."}],"\n",["$","li",null,{"children":"하지만 사용자들은 개발자들이 소프트웨어를 만드는 동안 얼마나 재밌었는지 관심 있을리가 없다. 이 프로그램으로 무엇을 할 수 있는지, 잘 동작하는지가 중요하다."}],"\n",["$","li",null,{"children":"단순해야 복잡한 결과물을 만들 수 있다. “우발적인 복잡함” 선택한 도구에 내재되어 있다. (’우발적’을 쉽게 쓰면면 ‘니 탓’이란 뜻이라고 함🥲)"}],"\n",["$","li",null,{"children":"복잡함을 만드는 도구, 예를 들면 베틀과 같은 기계를 사용하여 뜨개질로 만든 성을 만들 수 있다. 이 뜨개질로 만든 성은 애자일을 도입하든, 테스트와 리팩토링 도구를 사용하든 레고로 만든 성보다 빨리 변경할 수 없다."}],"\n"]}],"\n",["$","h2",null,{"children":"단순함의 장점"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"이해하기 쉽다. 수정하기 쉽다. 디버깅이 쉽다."}],"\n",["$","li",null,{"children":"유연성이 높다. (policy, location. etc)"}],"\n"]}],"\n",["$","h2",null,{"children":"어떻게 해야 더 쉬워질까?"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"가까운 도구상자에 넣어두고 꺼내쓰자. (가까움의 측면)"}],"\n",["$","li",null,{"children":"책을 구해서 읽고, 튜토리얼을 따라서 해보고, 설명을 부탁한다. (익숙함의 측면)"}],"\n",["$","li",null,{"children":"우리가 더 많은 걸 배울 순 있지만 더 똑똑해 질 수는 없다. → 우리의 뇌가 복잡함에 가까이 갈 수는 없다. 대신 단순하게 만들어 뇌 근처로 가져와야 한다."}],"\n"]}],"\n",["$","h2",null,{"children":"여러분의 도구상자엔 무엇이 있나요?"}],"\n",["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"children":"Complexity"}],["$","th",null,{"children":"Simplicity"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"children":"State, Objects"}],["$","td",null,{"children":"Values"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Methods"}],["$","td",null,{"children":"Functions, Namespaces"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"vars"}],["$","td",null,{"children":"Managed refs"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"inheritance, switch, matching"}],["$","td",null,{"children":"Polymorphism a la carte"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Syntax"}],["$","td",null,{"children":"Data"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Imperative loops, fold"}],["$","td",null,{"children":"Set functions"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Actors"}],["$","td",null,{"children":"Queues"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"ORM"}],["$","td",null,{"children":"Declarative data manipulation"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Conditionals"}],["$","td",null,{"children":"Rules"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Inconsistency"}],["$","td",null,{"children":"Consistency"}]]}]]}]]}],"\n",["$","h2",null,{"children":"Complect (엮여있다)"}],"\n",["$","p",null,{"children":"$Lb"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"끼워넣거나 휘감거나 땋는다는 뜻 → 소프트웨어를 나쁘게 만드는 것! 안좋은 것!"}],"\n",["$","li",null,{"children":"fig.1 과 fig.6 는 똑같은 줄이지만 fig.6가 훨씬 이해하기 어렵다."}],"\n"]}],"\n",["$","h2",null,{"children":"Compose (합성하다)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"합성하다. → 함께 놓는다는 의미"}],"\n",["$","li",null,{"children":"우리는 항상 합성가능한 시스템을 원한다. (단순한 요소들을 같이 놓는 것(composing)이 강력한 소프트웨어를 만드는 방법이기 때문에)"}],"\n"]}],"\n",["$","h2",null,{"children":"Modularity and Simplicity"}],"\n",["$","p",null,{"children":"$Lc"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"왼쪽 그림에서 파란 블럭과 노란 블럭은 서로를 호출하지 않더라도 완벽히 엮여있다."}],"\n",["$","li",null,{"children":"요소를 격리할 방법: 추상화(오른쪽 그림의 흰색 점선으로 표시된 블럭 윗부분) → 파란 블럭이 노란 블럭을 전혀 모르고, 노란 블럭도 파란 블럭을 전혀 모른다. 단순함이 유지된다."}],"\n",["$","li",null,{"children":"단순함을 분할하기(partitioning)와 계층짓기(stratification)과 연관시키지 말 것. 오히려 분할과 계층짓기가 가능하게 만드는 것이 단순함이다."}],"\n"]}],"\n",["$","h2",null,{"children":"복잡함을 만드는 도구 (Complexity toolkit)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"State: 시간과 값들이 엮인다.(complect) → 같은 인자를 전달해도 결과는 달라진다. state를 감싼 모듈을 사용하면 사용하는 그 모듈도 엮여버린다."}],"\n",["$","li",null,{"children":"Objects: 상태(state), 식별자(identify), value를 엮어서 분리하지 못하게 한다."}],"\n",["$","li",null,{"children":"Methods: 보통 함수와 상태를 엮는다."}],"\n",["$","li",null,{"children":"Syntax: 단방향으로 의미와 순서를 엮는다. 문법은 데이터보다 모든 면에서 열등하다."}],"\n",["$","li",null,{"children":"Inheritance: 상속이라는 말 그대로 두 타입을 엮는다."}],"\n",["$","li",null,{"children":"Switch/matching: 무엇(what)이 일어나면 누가(who) 무슨일을 하는지의 한 쌍으로 엮는다."}],"\n",["$","li",null,{"children":"var(iable)s: 값과 시간을 밀접하게 엮는다."}],"\n"]}],"\n",["$","h2",null,{"children":"단순함을 만드는 도구 (Simplicity Toolkit)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Values: final같은 불변으로 선언할 수 있다."}],"\n",["$","li",null,{"children":"Functions: a.k.a stateless method"}],"\n",["$","li",null,{"children":"Data: 데이터는 단순하다. 선형적이고 순차적이다. (Maps, arrays, sets, JSON, etc)"}],"\n",["$","li",null,{"children":"다형성 (polymorphism): 데이터 구조(data structures)와 함수 정의에 대한 집합(definitions of sets of functions)이 있고, 이것들을 연결할 수 있다. 이 셋은 모두 독립적인 작업이다."}],"\n",["$","li",null,{"children":"Set functions, Queues: 라이브러리"}],"\n",["$","li",null,{"children":"일관성(Consistency): Transaction 혹은 값을 사용해야 한다."}],"\n"]}],"\n",["$","h2",null,{"children":"단순함을 위한 추상화"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"어떻게 단순함을 위해 추상화할 수 있을까? 추상이라는 단어는 하나가 아니라는 암시를 준다. 물리적인 성질을 빼내어 떨어뜨리는 것이다."}],"\n",["$","li",null,{"children":"복잡한 것을 숨기는 것(hiding)은 추상화가 아니므로 구별해야한다."}],"\n",["$","li",null,{"children":"“모르겠고, 알고 싶지도 않아.” 같은 태도를 취하는 방법도 도움이 된다."}],"\n",["$","li",null,{"children":"설계 작업으로써 육하원칙을 적용해 볼 수 있다. “여기서 ‘누가’에 해당하는 것은? ‘무엇’에 해당하는 것은?” 이라고 질문을 던지면 대상을 분해하는데 도움이 된다."}],"\n"]}],"\n",["$","h2",null,{"children":"설계 육하원칙"}],"\n",["$","h3",null,{"children":"무엇 (What)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"‘무엇’이란 우리가 성취하려고 하는 것, 명령어(operations)이다."}],"\n",["$","li",null,{"children":"우리는 함수로 추상화를 구현한다. (추가로 언어가 이터페이스, 타입클래스 등을 지원하면 사용한다.)"}],"\n",["$","li",null,{"children":"함수/인터페이스들은 아주 작아야한다. 거대하게 만들지말고 다형성 구조로 표현하라"}],"\n",["$","li",null,{"children":"실제 구현과 분리하여 값과 추상화에 대한 정의를 해야한다. 이 때 ‘어떻게’와 엮이지 않도록 주의한다. 즉 함수가 어떻게 작동해야하는지 넌지시 암시하는 등 설계에 ‘어떻게’를 욱여넣지말라."}],"\n",["$","li",null,{"children":"‘무엇’과 ‘어떻게’를 확실하게 구분하는 것이 핵심이다. 이것을 잘 한다면 ‘어떻게’는 다른 곳으로 넘겨버릴 수도 있다."}],"\n"]}],"\n",["$","h3",null,{"children":"누구 (Who)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"‘누구’란 데이터나 엔티티에 대한 것"}],"\n",["$","li",null,{"children":"추상화는 결국 프로그램이 작동하는 방식에 따라 데이터나 엔티티와 연결된다."}],"\n",["$","li",null,{"children":"하위 컴포넌트를 상위 컴포넌트에 주입하는 방식으로 가려면 하위 컴포넌트가 많아져야 한다. (선행 조건: 인터페이스가 충분히 작아야함) → 정책과 기능을 분리할 수 있다."}],"\n"]}],"\n",["$","h3",null,{"children":"어떻게 (How)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"‘어떻게’는 프로그램이 구행하는 일, 실제 구현 코드이다."}],"\n",["$","li",null,{"children":"스위치문, 패턴 매칭 등으로 엮지말고 다형서 구조로 추상을 연결하라"}],"\n",["$","li",null,{"children":"추상 안에 구현을 암시하는 경우를 주의하라. 구현할 사람의 손발을 꽁꽁 묶어버리는 셈이다. 선언적으로 작성하라."}],"\n",["$","li",null,{"children":"그 어떤 것도 ‘어떻게’와 섞지 말라. 모든 구현 코드들은 가능한 한 그 자체로 외딴섬이어야 한다."}],"\n"]}],"\n",["$","h3",null,{"children":"언제, 어디서 (When, Where)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"다른 것들과 엮이는 상황을 최대한 막아라 (엮임은 의도치않게 시작된다.)"}],"\n",["$","li",null,{"children":"A가 처리하고 그 다음 작업은 B에서 처리한다고 하자. 여기서 A가 B를 호출하도록 변경하면 A와 B의 ‘언제’와 ‘어디서’를 엮은 것이다. (A가 B를 호출하려면 어디 있는지 알아야하고, ‘언제’호출했는지도 엮여있다.)"}],"\n",["$","li",null,{"children":"큐를 사용해서 문제를 해결할 수 있다."}],"\n"]}],"\n",["$","h3",null,{"children":"왜 (Why)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"애플리케이션의 규칙과 정책"}],"\n",["$","li",null,{"children":"외부에서 선언적으로 관리하라"}],"\n"]}],"\n",["$","h2",null,{"children":"결론"}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":["단순함은 궁극적인 정교함이다. ",["$","em",null,{"children":"- 레오나르도 다 빈치"}]]}],"\n"]}],"\n",["$","h4",null,{"children":"단순함은 선택에 달려있다."}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"복잡한 결과물을 만드는 도구를 계속 사용하면 복잡함을 벗어나지 못한다. (확증편향) → 가드레일이 단순함을 유발하지 않음을 명심하자"}],"\n",["$","li",null,{"children":"단순함을 위한 관심과 감각을 길러야한다. 단순함과 쉬움은 완전히 다른 것이다. ‘엮임’을 감지하는 레이더를 가져야한다. 요소들이 연결되는 부분을 찾고 독립시킬 수 있는지 살펴보라."}],"\n",["$","li",null,{"children":"‘신뢰성’ 도구 (testing, refactoring, type systems)은 보조 도구(안전망)일 뿐 단순함에 대한 도구가 아니다. 이 도구들은 문제의 본질을 건들이지 않는다."}],"\n"]}],"\n",["$","h4",null,{"children":"어떻게 단순하게 만들 수 있을까?"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"단순한 결과물을 만드는 도구를 선택하라. 복잡한 결과물을 만드는 도구를 사용하지 말라."}],"\n",["$","li",null,{"children":"단순함이라는 기초 위에 추상(abstraction)을 생성하려고 노력하라. 단순함은 숫자가 적다는 뜻이 아니다. 몇개 안되는 줄이 엮여있는 것보다 많은 줄이 곧게 뻗어 이어진 편이 낫다."}],"\n"]}]] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"쉽게 풀이한 단순함 (Simple Made Easy) — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"좋은 시스템은 단순하다. ‘단순하다’라는 것은 무엇일까?"}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null +9:I[6906,["901","static/chunks/901-e0fa2c46d9ea48b7.js","749","static/chunks/749-fb88c0d37357d13f.js","42","static/chunks/app/%5Bslug%5D/page-571622d6f0bd4ea4.js"],""] +8:[["$","p",null,{"children":"아래 두 자료를 보면서 정리한 글입니다. 먼저 번역해주신 분들 덕분에 비원어민인 저도 이 자료를 접할 수 있었습니다. 훌륭한 지식을 쉽게 접할 수 있도록 앞서 기여해주신 번역자분들에게 감사드립니다."}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["발표 영상: ",["$","$L9",null,{"href":"https://youtube.com/watch?v=SxdOUGdseq4","children":"“Simple Made Easy” - Rich Hickey (2011)"}]]}],"\n",["$","li",null,{"children":["번역: ",["$","$L9",null,{"href":"https://muchtrans.com/translations/simple-made-easy.ko.html","children":"쉽게 풀이한 단순함"}]]}],"\n"]}],"\n",["$","p",null,{"children":"$La"}],"\n",["$","h2",null,{"children":"단순함과 쉬움의 차이"}],"\n",["$","h3",null,{"children":"단순함 (Simple)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"어원은 ‘sim’ (하나) + ‘plex’(겹치다, 엮다). 반댓말은 complex"}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"‘단순하다’라는 것은 뒤섞이거나 엮여있지 않았다는 것"}]," (두 개의 줄을 하나로 엮어 하나의 줄로 만드는 이미지를 떠올리자)"]}],"\n",["$","li",null,{"children":"임무, 역할, 일, 목표가 하나로 엮여있다. (‘하나만 존재 해야한다’ 혹은 ‘기능이 하나’라는 의미는 아님)"}],"\n",["$","li",null,{"children":"기능의 개수(cardinality)와 뒤섞임(interleaving)을 구별해야 한다."}],"\n",["$","li",null,{"children":["우리는 “이 부분이 엮여있네!” 라고 보고 판단할 수 있다. 즉 쉬움과 달리 ",["$","strong",null,{"children":"단순함은 객관적인 개념"}],"이다."]}],"\n"]}],"\n",["$","h3",null,{"children":"쉬움 (Easy)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"어원은 ‘ease’ (근처에 눕다. 가까이 있다.)"}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"손쉬움:"}]," 가까이에서 ‘쉽게’ 구할 수 있다 (설치 관리자로 하드에 저장할 수 있는 라이브러리, IDE 도구 등)"]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"친숙함:"}]," 우리가 이미 알고 있는 것, 내가 가진 역량에 가까운 것"]}],"\n",["$","li",null,{"children":["위 두 가지 개념에 심취하면 ‘설치해서 5초 안에 실행할 수 있을까?’ 만 고민하게 된다. ",["$","strong",null,{"children":"다루는 문제는 복잡한데 쉽게 가져다 쓸 수 있는지만 따지게 되는 함정에 빠진다."}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"쉬움은 상대적이다."}]," 뒤섞이거나 꼬인 부분을 봤을 때 단순함을 어겼다고 할 수 있는 것과 구분된다. (내가 독일어를 읽지 못한다고해서 독일어가 해석 불가능한 언어인 것은 아니다. 내가 독일어를 모를 뿐, 독일어는 누구에게는 쉽고 누구에게는 어려울 수 있다.)"]}],"\n"]}],"\n",["$","h2",null,{"children":"도구와 결과물"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"도구(constructs): 프로그래밍 언어, 라이브러리 등"}],"\n",["$","li",null,{"children":"결과물(artifacts): 사용자들이 사용할 소프트웨어"}],"\n",["$","li",null,{"children":"도구와 결과물을 대할 때 단순함과 쉬움을 구분해야한다."}],"\n",["$","li",null,{"children":"도구의 편의성에만 몰두하는 경향: “몇 글자만 입력했는데 잘 되네요!”, “세미콜론이 없네요!” 등"}],"\n",["$","li",null,{"children":"소프트웨어의 퀄리티, 정확성, 유지보수성, 유연함은 우리가 사용하는 도구와는 거의 관련이 없다."}],"\n",["$","li",null,{"children":["그러므로 우리는 ",["$","strong",null,{"children":"결과물을 기준으로 도구를 평가해야한다."}]," (코드의 겉모습이나 사용 경험 등이 아니라)"]}],"\n"]}],"\n",["$","h2",null,{"children":"한계"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"우리의 이해력은 제한적이고 한 번에 아주 적은 숫자만 기억할 수 있다."}],"\n",["$","li",null,{"children":"생각할 것들이 서로 뒤섞이면 각각을 떼어놓고 다루지 못하게 된다."}],"\n",["$","li",null,{"children":"처음보는 코드가 다른 어떤 부분과 연결됐다면 둘 모두를 머릿속에 넣어야 한다. → 서로 얽혀있는 것들은 부담을 가중시킨다. (즉 이러한 복잡성이 시스템을 이해하는 데 한계를 느끼게 한다.)"}],"\n",["$","li",null,{"children":["세상에서 가장 뛰어난 저글링 선수도 스무개, 백개의 공을 다룰 수 없다. ",["$","strong",null,{"children":"우리가 다루는 문제에 비해 그걸 이해하는 능력은 통계적으로 비슷하게 나쁘다."}]]}],"\n"]}],"\n",["$","h2",null,{"children":"변경"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"소프트웨어를 수정하기 위해서는 무엇을 하는 소프트웨어인지 분석하고 무엇을 해야하는지 결정해야한다."}],"\n",["$","li",null,{"children":"“이 변화는 어디까지 영향을 끼치지?”, “그러면 수정 사항을 적용할 부분은 어디지?”라고 질문을 던져야 한다."}],"\n"]}],"\n",["$","h2",null,{"children":"디버깅"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"실무에서 발생하는 모든 버그들은 이미 타입 체커와 모든 테스트를 통과했다."}],"\n",["$","li",null,{"children":"이러한 ‘가드레일’은 안전장치일 뿐 목적지로 가는 방향을 알려주지 않는다. (세상에 일부러 가드레일에 부딪히면서 운전하는 사람은 없다.)"}],"\n",["$","li",null,{"children":"결국 개발자가 프로그램을 추론할 수 있는 능력이 디버깅에 있어서 가장 중요하다."}],"\n"]}],"\n",["$","h2",null,{"children":"개발 속도"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["쉬움을 쫓다보면 초반 속도는 빨라진다. 하지만 ",["$","strong",null,{"children":"복잡성을 무시하면 장기적으로는 반드시 속도가 느려진다."}]]}],"\n",["$","li",null,{"children":["단순함을 쫓다보면 초기 속도가 나지 않을 수 있다. ",["$","strong",null,{"children":"문제를 단순한 형태로 바라보는 일에 시간을 써야한다."}]]}],"\n",["$","li",null,{"children":"두 가지를 다 잡는 일은 훌륭한 일이다. 다만 쉬움에만 집중하면 결국엔 복잡성이 발목을 잡는다."}],"\n"]}],"\n",["$","h2",null,{"children":"쉬운 것은 사실 복잡하다"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"복잡한 결과물(artifacts)을 생성하는 도구(constructs)의 특징: 간단명료하게 설명할 수 있다. 굉장히 친숙하다. 사용하기 쉽다."}],"\n",["$","li",null,{"children":"하지만 사용자들은 개발자들이 소프트웨어를 만드는 동안 얼마나 재밌었는지 관심 있을리가 없다. 이 프로그램으로 무엇을 할 수 있는지, 잘 동작하는지가 중요하다."}],"\n",["$","li",null,{"children":"단순해야 복잡한 결과물을 만들 수 있다. “우발적인 복잡함” 선택한 도구에 내재되어 있다. (’우발적’을 쉽게 쓰면면 ‘니 탓’이란 뜻이라고 함🥲)"}],"\n",["$","li",null,{"children":"복잡함을 만드는 도구, 예를 들면 베틀과 같은 기계를 사용하여 뜨개질로 만든 성을 만들 수 있다. 이 뜨개질로 만든 성은 애자일을 도입하든, 테스트와 리팩토링 도구를 사용하든 레고로 만든 성보다 빨리 변경할 수 없다."}],"\n"]}],"\n",["$","h2",null,{"children":"단순함의 장점"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"이해하기 쉽다. 수정하기 쉽다. 디버깅이 쉽다."}],"\n",["$","li",null,{"children":"유연성이 높다. (policy, location. etc)"}],"\n"]}],"\n",["$","h2",null,{"children":"어떻게 해야 더 쉬워질까?"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"가까운 도구상자에 넣어두고 꺼내쓰자. (가까움의 측면)"}],"\n",["$","li",null,{"children":"책을 구해서 읽고, 튜토리얼을 따라서 해보고, 설명을 부탁한다. (익숙함의 측면)"}],"\n",["$","li",null,{"children":"우리가 더 많은 걸 배울 순 있지만 더 똑똑해 질 수는 없다. → 우리의 뇌가 복잡함에 가까이 갈 수는 없다. 대신 단순하게 만들어 뇌 근처로 가져와야 한다."}],"\n"]}],"\n",["$","h2",null,{"children":"여러분의 도구상자엔 무엇이 있나요?"}],"\n",["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"children":"Complexity"}],["$","th",null,{"children":"Simplicity"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"children":"State, Objects"}],["$","td",null,{"children":"Values"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Methods"}],["$","td",null,{"children":"Functions, Namespaces"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"vars"}],["$","td",null,{"children":"Managed refs"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"inheritance, switch, matching"}],["$","td",null,{"children":"Polymorphism a la carte"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Syntax"}],["$","td",null,{"children":"Data"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Imperative loops, fold"}],["$","td",null,{"children":"Set functions"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Actors"}],["$","td",null,{"children":"Queues"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"ORM"}],["$","td",null,{"children":"Declarative data manipulation"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Conditionals"}],["$","td",null,{"children":"Rules"}]]}],["$","tr",null,{"children":[["$","td",null,{"children":"Inconsistency"}],["$","td",null,{"children":"Consistency"}]]}]]}]]}],"\n",["$","h2",null,{"children":"Complect (엮여있다)"}],"\n",["$","p",null,{"children":"$Lb"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"끼워넣거나 휘감거나 땋는다는 뜻 → 소프트웨어를 나쁘게 만드는 것! 안좋은 것!"}],"\n",["$","li",null,{"children":"fig.1 과 fig.6 는 똑같은 줄이지만 fig.6가 훨씬 이해하기 어렵다."}],"\n"]}],"\n",["$","h2",null,{"children":"Compose (합성하다)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"합성하다. → 함께 놓는다는 의미"}],"\n",["$","li",null,{"children":"우리는 항상 합성가능한 시스템을 원한다. (단순한 요소들을 같이 놓는 것(composing)이 강력한 소프트웨어를 만드는 방법이기 때문에)"}],"\n"]}],"\n",["$","h2",null,{"children":"Modularity and Simplicity"}],"\n",["$","p",null,{"children":"$Lc"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"왼쪽 그림에서 파란 블럭과 노란 블럭은 서로를 호출하지 않더라도 완벽히 엮여있다."}],"\n",["$","li",null,{"children":"요소를 격리할 방법: 추상화(오른쪽 그림의 흰색 점선으로 표시된 블럭 윗부분) → 파란 블럭이 노란 블럭을 전혀 모르고, 노란 블럭도 파란 블럭을 전혀 모른다. 단순함이 유지된다."}],"\n",["$","li",null,{"children":"단순함을 분할하기(partitioning)와 계층짓기(stratification)과 연관시키지 말 것. 오히려 분할과 계층짓기가 가능하게 만드는 것이 단순함이다."}],"\n"]}],"\n",["$","h2",null,{"children":"복잡함을 만드는 도구 (Complexity toolkit)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"State: 시간과 값들이 엮인다.(complect) → 같은 인자를 전달해도 결과는 달라진다. state를 감싼 모듈을 사용하면 사용하는 그 모듈도 엮여버린다."}],"\n",["$","li",null,{"children":"Objects: 상태(state), 식별자(identify), value를 엮어서 분리하지 못하게 한다."}],"\n",["$","li",null,{"children":"Methods: 보통 함수와 상태를 엮는다."}],"\n",["$","li",null,{"children":"Syntax: 단방향으로 의미와 순서를 엮는다. 문법은 데이터보다 모든 면에서 열등하다."}],"\n",["$","li",null,{"children":"Inheritance: 상속이라는 말 그대로 두 타입을 엮는다."}],"\n",["$","li",null,{"children":"Switch/matching: 무엇(what)이 일어나면 누가(who) 무슨일을 하는지의 한 쌍으로 엮는다."}],"\n",["$","li",null,{"children":"var(iable)s: 값과 시간을 밀접하게 엮는다."}],"\n"]}],"\n",["$","h2",null,{"children":"단순함을 만드는 도구 (Simplicity Toolkit)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Values: final같은 불변으로 선언할 수 있다."}],"\n",["$","li",null,{"children":"Functions: a.k.a stateless method"}],"\n",["$","li",null,{"children":"Data: 데이터는 단순하다. 선형적이고 순차적이다. (Maps, arrays, sets, JSON, etc)"}],"\n",["$","li",null,{"children":"다형성 (polymorphism): 데이터 구조(data structures)와 함수 정의에 대한 집합(definitions of sets of functions)이 있고, 이것들을 연결할 수 있다. 이 셋은 모두 독립적인 작업이다."}],"\n",["$","li",null,{"children":"Set functions, Queues: 라이브러리"}],"\n",["$","li",null,{"children":"일관성(Consistency): Transaction 혹은 값을 사용해야 한다."}],"\n"]}],"\n",["$","h2",null,{"children":"단순함을 위한 추상화"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"어떻게 단순함을 위해 추상화할 수 있을까? 추상이라는 단어는 하나가 아니라는 암시를 준다. 물리적인 성질을 빼내어 떨어뜨리는 것이다."}],"\n",["$","li",null,{"children":"복잡한 것을 숨기는 것(hiding)은 추상화가 아니므로 구별해야한다."}],"\n",["$","li",null,{"children":"“모르겠고, 알고 싶지도 않아.” 같은 태도를 취하는 방법도 도움이 된다."}],"\n",["$","li",null,{"children":"설계 작업으로써 육하원칙을 적용해 볼 수 있다. “여기서 ‘누가’에 해당하는 것은? ‘무엇’에 해당하는 것은?” 이라고 질문을 던지면 대상을 분해하는데 도움이 된다."}],"\n"]}],"\n",["$","h2",null,{"children":"설계 육하원칙"}],"\n",["$","h3",null,{"children":"무엇 (What)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"‘무엇’이란 우리가 성취하려고 하는 것, 명령어(operations)이다."}],"\n",["$","li",null,{"children":"우리는 함수로 추상화를 구현한다. (추가로 언어가 이터페이스, 타입클래스 등을 지원하면 사용한다.)"}],"\n",["$","li",null,{"children":"함수/인터페이스들은 아주 작아야한다. 거대하게 만들지말고 다형성 구조로 표현하라"}],"\n",["$","li",null,{"children":"실제 구현과 분리하여 값과 추상화에 대한 정의를 해야한다. 이 때 ‘어떻게’와 엮이지 않도록 주의한다. 즉 함수가 어떻게 작동해야하는지 넌지시 암시하는 등 설계에 ‘어떻게’를 욱여넣지말라."}],"\n",["$","li",null,{"children":"‘무엇’과 ‘어떻게’를 확실하게 구분하는 것이 핵심이다. 이것을 잘 한다면 ‘어떻게’는 다른 곳으로 넘겨버릴 수도 있다."}],"\n"]}],"\n",["$","h3",null,{"children":"누구 (Who)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"‘누구’란 데이터나 엔티티에 대한 것"}],"\n",["$","li",null,{"children":"추상화는 결국 프로그램이 작동하는 방식에 따라 데이터나 엔티티와 연결된다."}],"\n",["$","li",null,{"children":"하위 컴포넌트를 상위 컴포넌트에 주입하는 방식으로 가려면 하위 컴포넌트가 많아져야 한다. (선행 조건: 인터페이스가 충분히 작아야함) → 정책과 기능을 분리할 수 있다."}],"\n"]}],"\n",["$","h3",null,{"children":"어떻게 (How)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"‘어떻게’는 프로그램이 구행하는 일, 실제 구현 코드이다."}],"\n",["$","li",null,{"children":"스위치문, 패턴 매칭 등으로 엮지말고 다형서 구조로 추상을 연결하라"}],"\n",["$","li",null,{"children":"추상 안에 구현을 암시하는 경우를 주의하라. 구현할 사람의 손발을 꽁꽁 묶어버리는 셈이다. 선언적으로 작성하라."}],"\n",["$","li",null,{"children":"그 어떤 것도 ‘어떻게’와 섞지 말라. 모든 구현 코드들은 가능한 한 그 자체로 외딴섬이어야 한다."}],"\n"]}],"\n",["$","h3",null,{"children":"언제, 어디서 (When, Where)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"다른 것들과 엮이는 상황을 최대한 막아라 (엮임은 의도치않게 시작된다.)"}],"\n",["$","li",null,{"children":"A가 처리하고 그 다음 작업은 B에서 처리한다고 하자. 여기서 A가 B를 호출하도록 변경하면 A와 B의 ‘언제’와 ‘어디서’를 엮은 것이다. (A가 B를 호출하려면 어디 있는지 알아야하고, ‘언제’호출했는지도 엮여있다.)"}],"\n",["$","li",null,{"children":"큐를 사용해서 문제를 해결할 수 있다."}],"\n"]}],"\n",["$","h3",null,{"children":"왜 (Why)"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"애플리케이션의 규칙과 정책"}],"\n",["$","li",null,{"children":"외부에서 선언적으로 관리하라"}],"\n"]}],"\n",["$","h2",null,{"children":"결론"}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":["단순함은 궁극적인 정교함이다. ",["$","em",null,{"children":"- 레오나르도 다 빈치"}]]}],"\n"]}],"\n",["$","h4",null,{"children":"단순함은 선택에 달려있다."}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"복잡한 결과물을 만드는 도구를 계속 사용하면 복잡함을 벗어나지 못한다. (확증편향) → 가드레일이 단순함을 유발하지 않음을 명심하자"}],"\n",["$","li",null,{"children":"단순함을 위한 관심과 감각을 길러야한다. 단순함과 쉬움은 완전히 다른 것이다. ‘엮임’을 감지하는 레이더를 가져야한다. 요소들이 연결되는 부분을 찾고 독립시킬 수 있는지 살펴보라."}],"\n",["$","li",null,{"children":"‘신뢰성’ 도구 (testing, refactoring, type systems)은 보조 도구(안전망)일 뿐 단순함에 대한 도구가 아니다. 이 도구들은 문제의 본질을 건들이지 않는다."}],"\n"]}],"\n",["$","h4",null,{"children":"어떻게 단순하게 만들 수 있을까?"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"단순한 결과물을 만드는 도구를 선택하라. 복잡한 결과물을 만드는 도구를 사용하지 말라."}],"\n",["$","li",null,{"children":"단순함이라는 기초 위에 추상(abstraction)을 생성하려고 노력하라. 단순함은 숫자가 적다는 뜻이 아니다. 몇개 안되는 줄이 엮여있는 것보다 많은 줄이 곧게 뻗어 이어진 편이 낫다."}],"\n"]}]] d:I[1749,["901","static/chunks/901-e0fa2c46d9ea48b7.js","749","static/chunks/749-fb88c0d37357d13f.js","42","static/chunks/app/%5Bslug%5D/page-571622d6f0bd4ea4.js"],"Image"] e:T48a,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAANCAYAAADISGwcAAAACXBIWXMAAAsTAAALEwEAmpwYAAADCElEQVR4nFWVUWSycRTG313soouxu9ldF9ldxkxMRrpJRnYTY2YkEomYMRKJiTGybxcTiTFmjJGIRETMiDERY4wZESMxxpnf4bzfOvxT5z3/5zznOee8OSIi4/FYPj8/5e3tTb6+vnDJ+/u7+kejkUynU9dHHD6L45n5X15eZDKZqP/19VXv4xsMBurjHrHkwffz8yOOPWg2m9LpdOT5+VmDe72e9Pt9KZfLegEbDocK+vT0pHcwElrix8dH108sdy8vL+Xh4cElcH19La1WS25ubtTn8EHSXC4nV1dXCoZBZn9/Xw4PD7U6I3VwcCB7e3vqowLs/v5ednd3ZXt7W8lZsrW1NVlaWnIxqT4SicjCwoLU6/V5Aul0Wmq1mjLHbm9vNfnp6alWhgEE6Pr6uiY3Atx3HEeBTa12u62+1dVVJW5x4XBY/YVC4T+BwWAgmUxGCcAcYOT7+PiQSqWiJPCVSiUJBAKqAqBGgGpIDjlrAfcg6vf73RYgPYQ8Ho+qOEcgm81qv6iAilOplPYVeY+OjqTb7Uo8Hpfz83M5Pj5Wnw3cxcU/2djYUHIkwSjG6/VKMBhUNbBqtSrLy8uqQDKZnCeQy+UUiD6RFEVIwCwkEgklQIUMIRXt7OzoPVSCDIBUd3Z25iqA3FtbW4qHMXgk56Dq3AwAAgEUgASAJGs0GjoLJIrFYvqMxJubmzqId3d32i7aAOmTkxNtA1gkZDhRllgGFFUggMIuAYYrn8+7M4DBEKkZTpMVAlQIIPHWf2KQFyIUAg7J2SqI8IyVplCfz6dKhUIhLcYBhJ4jM/21LQCY6ugfu4sxA1QBOWYGgxDDxlBBDAXAImmxWNR2EQsZVFxZWdHVXFxc1E1zAKG/BBOE7BgvJmTjku02YLz58EPWfPQZApCnUrBoHcryGwX5zixEo1EtztbbAWQ2m2mlNtXf39/u2pgi5qP/DCZmawhp1vLvywlM4pDZYjkQtveC+yoGHBWseguGPUPJdyPAjMDcYjj8L3AfAsThQynz/b1PARx+c34BMosOvCDWIIgAAAAASUVORK5CYII=b:["$","$Ld",null,{"src":"./simple-made-easy/complect.png","alt":"","placeholder":"blur","blurDataURL":"$e","unoptimized":true,"width":600,"height":251}] a:["$","$Ld",null,{"src":"./simple-made-easy/hero.png","alt":"","placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAANCAIAAABHKvtLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAChklEQVR4nK1TT2jTcBSODES8qOAOXq2nSTccilh6WIdS0dGtVgb+aSt1bp0nqTi3iTB30R1mPYS4rLrNQ/FUpmmJ0HaBjNBLWM2IwYirhWAudSUwzWFb6JP159KYUU9+h4T38vK+970/GADUYAfPp6e9Xm+CTKiqChboup7JZDiOszoNwwAAWZZXeN400fNrHaaJoRedoVv2tWB1HNx/YJldBoCtrS0ASKVSoWAwFAwRBFEul80/RVHkOO5bqVQoFKrValMCVKPf70fZMQw7cuhwdCiKKpUkiWEYHMdvhcNTz6YEQUD+UqlE0/Tq6uoKz+fzeeRvSqAoCkrt6fK0Hm0NXAncjkRQRA1qyWRy5MHIxMREdHBQkj4hv2EYaSo9+WRyfGxcFEWktSmBIAi9vX0dHR0YhjmOO062td0dHjZbNEuSnac6Rx+OUhTFMIzpZ1k2Uwcy/0WAxhWLxdxut8vlmnk5o+u6GfFFll/E46lUSpIk25xpmkZqbJOXZfkvAjOI5/mNjQ3zG0KlUrG22ErAsqxZvoXgs53ANHAcr1QqtlyqqibIxF4CTdMIgti7u/SHpWyWsSsAAI7jTjgcoija9nru1et2p1PTNFuiWZJsdzqR4jpqOzsB2/2+Y/fvDQDAdl1cg2B8bOzs6TMURdmKDd0Mdnd5eMtBIdy4dv1C9/lisbjb5G0AWJPSd/zY00fnfumb6IIbLRqIRC55LxI4jg4b5VJV1Xe5J9DnT1Npa/mKovh6fP2Bq+8WF3f9OwTM+9hIGIs/xtZKCtLUUPCxWJwlSXSrVuSyuYX5+fUf67YW5bLZNwsL6IZRiwDgp/Y983aIW5ozh/9HwX+EYWwaxqZp/gY7CBP/3lRdJQAAAABJRU5ErkJggg==","unoptimized":true,"width":4714,"height":1900}] diff --git a/what-is-ood.html b/what-is-ood.html index 95acc23..23624ef 100644 --- a/what-is-ood.html +++ b/what-is-ood.html @@ -1,4 +1,4 @@ -객체 지향 설계란 무엇인가 — Hewon Jeong
    Hewon Jeong

    객체 지향 설계란 무엇인가

    《오브젝트: 코드로 이해하는 객체지향 설계》의 ‘객체, 설계’ 파트를 읽고 정리한 내용입니다.

    +객체 지향 설계란 무엇인가 — Hewon Jeong
    Hewon Jeong

    객체 지향 설계란 무엇인가

    《오브젝트: 코드로 이해하는 객체지향 설계》의 ‘객체, 설계’ 파트를 읽고 정리한 내용입니다.

    ”이론이 먼저일까, 실무가 먼저일까?”

    어떤 분야를 막론하고, 이론을 정립할 수 없는 초기에는 실무가 먼저 급속한 발전을 이룬다. (…) 해당 분야가 충분히 성숙해지는 시점에 이르러서야 이론이 실무를 추월하게 된다. - Rober L. Glass (소프트웨어 크리에이비티 2.0 中)

    @@ -146,4 +146,4 @@

    객체지향 설계

  • 우리가 진정으로 원하는 것? 변경에 유연하게 대응할 수 있는 코드.
  • 객체지향 패러다임은 세상을 바라보는 방식대로 코드를 작성할 수 있게 돕는다. 데이터와 프로세스를 객체 안으로 밀어 넣었다고 변경하기 쉬운 설계를 얻을 수 있는 것은 아님. 객체지향의 세계에서 애플리케이션은 객체들로 구성되며 애플리케이션의 기능은 객체들 간의 상호 작용들 통해 구현된다. 그리고 객체들 사이의 상호작용은 객체 사이에 주고 받는 메시지로 표현된다.

    -

    ⇒ 훌륭한 객체지향 설계란 협력하는 객체 사이의 의존성을 적절하게 관리하는 설계👏🏻


    \ No newline at end of file +

    ⇒ 훌륭한 객체지향 설계란 협력하는 객체 사이의 의존성을 적절하게 관리하는 설계👏🏻


    \ No newline at end of file diff --git a/what-is-ood.txt b/what-is-ood.txt index 47d1600..bd61b42 100644 --- a/what-is-ood.txt +++ b/what-is-ood.txt @@ -1,8 +1,8 @@ 3:I[5613,[],""] 5:I[1778,[],""] -6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-6115c3860241666a.js"],""] +6:I[7674,["901","static/chunks/901-e0fa2c46d9ea48b7.js","185","static/chunks/app/layout-404cecc675210ad4.js"],""] 4:["slug","what-is-ood","d"] -0:["lIqbsHa6OwBUNoW2UeESg",[[["",{"children":[["slug","what-is-ood","d"],{"children":["__PAGE__?{\"slug\":\"what-is-ood\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","what-is-ood","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/774e50315e83930a.css","precedence":"next","crossOrigin":""}]]}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5af8a0c92a4e4a9f.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["ijI2H4ht_ifEwJyVN3XqI",[[["",{"children":[["slug","what-is-ood","d"],{"children":["__PAGE__?{\"slug\":\"what-is-ood\"}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","what-is-ood","d"],{"children":["__PAGE__",{},["$L1","$L2",null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","html",null,{"lang":"ko","children":["$","body",null,{"className":"mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]","children":[["$","header",null,{"className":"mb-14 flex flex-row place-content-between","children":["$","$L6",null,{}]}],["$","main",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","article",null,{"className":"markdown","children":[["$","h1",null,{"className":"text-[40px] font-bold leading-[44px]']","children":"Not found"}],["$","div",null,{"className":"markdown mt-10","children":["$","p",null,{"children":"This page doesn’t exist (yet?)"}]}]]}],"notFoundStyles":[],"styles":null}]}]]}]}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b56cb8ead7d0e754.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 2:["$","article",null,{"children":[["$","h1",null,{"className":"text-[2.5rem] leading-tight font-bold break-keep","children":"객체 지향 설계란 무엇인가"}],["$","time",null,{"dateTime":"2019-09-04","className":"text-[13px] text-gray-500 dark:text-gray-400 font-mono flex mt-2","children":"September 4, 2019"}],["$","div",null,{"className":"markdown mt-10","children":["$L8",["$","hr",null,{}]]}]]}] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"객체 지향 설계란 무엇인가 — Hewon Jeong"}],["$","meta","3",{"name":"description","content":"객체지향의 세계에서 기능은 객체들 간의 상호 작용들 통해 구현된다. 그리고 그 상호작용은 객체 사이에 주고 받는 메시지로 표현된다."}],["$","link","4",{"rel":"icon","href":"/icon.png?dd72987ff3bd4997","type":"image/png","sizes":"160x160"}],["$","meta","5",{"name":"next-size-adjust"}]] 1:null